preface

Because the product changed the requirements, rich text should be able to be inserted into the table (he why not embedded word), but the rich text plug-in (vue-quill-Editor) in the original project does not have this function, I checked the solutions on the Internet, most of them choose wangEditor, I use v4 version here.

In the pit of

• – cursor issue cannot be moved to the end after inserting local video (although it appears that the latest V4 version has fixed this issue)
• As for other problems, you can find the corresponding API in the configuration, you can also leave a message below, we discuss together

The basic use

Install: NPM I wangEditor –save

<template>
  <div class="home">
    <h3>wangEditor with vue</h3>
    <div id="editer"></div>
  </div>
</template>

<script>
/ / introduce wangEditor
import wangEditor from 'wangeditor'
export default {
  data() {
    return {
      editor: null.editorData: ' '}},mounted() {
    const editor = new wangEditor(`#demo1`)
    // Configure the onchange callback to synchronize data to vUE
    editor.config.onchange = (newHtml) = > {
       this.editorData = newHtml
    }
    Create an editor
    editor.create()
    this.editor = editor
  },
  methods: {},beforeDestroy() {
    // Call the destruction API to destroy the current editor instance
    this.editor.destroy()
    this.editor = null}}</script>

<style lang="scss">
  .home {
    width: 1200px;
    margin: auto;
    position: relative;
  }
</style>
Copy the code

Configure video uploading (similar to image uploading)

mounted () {
  const _this = this
  const editor = new wangEditor(`#editer`)
  // Configure the onchange callback to synchronize data to vUE
  editor.config.onchange = (newHtml) = > {
    this.form.productDetails = newHtml
  }
  editor.config.menus = [
    'fontName'./ / font
    'fontSize'./ / size
    'foreColor'.// Font color
    'backColor'./ / the background color
    'underline'./ / the underline
    'italic'./ / italics
    'bold'./ / bold
    'justify'.// Alignment
    'splitLine'./ / line
    'undo'./ / cancel
    'redo'./ / recovery
    'list'.// List (ordered, unordered)
    'table'./ / form
    'image'./ / picture
    'video'./ / video. ]// Configure the server base path
  editor.config.uploadVideoServer = '/oss/files'
  // The maximum file limit is 5M
  editor.config.uploadVideoMaxSize = 5 * 1024 * 1024
  // Type restriction
  editor.config.uploadVideoAccept = ['mp4']
  // Upload file specified field
  editor.config.uploadVideoName = 'file'
  // Upload timeout limit
  editor.config.uploadVideoTimeout = 60000
 // Replace the error notification with the element- UI style
  editor.config.customAlert = function (s, t) {
    switch (t) {
      case 'success':
        _this.$message.success(s)
        break
      case 'info':
        _this.$message.info(s)
        break
      case 'warning':
        _this.$message.warning(s)
        break
      case 'error':
        _this.$message.error(s)
        break
      default:
        _this.$message.info(s)
        break}}// Occupancies are configured
  editor.config.placeholder = 'Please enter product details'.Create an editor
  editor.create()
  this.editor = editor
},
Copy the code

This configuration solves the problem that the cursor cannot move behind a video when uploading a video

Normally, use: insertVideoFn(URL), but encountered the above problems, so change to manually create the video tag, and before and after the concatenation   , and finally insert into rich text

. editor.config.uploadVideoHooks = { ...// The video is uploaded and returns the result, and you want to insert the video into the editor customInsert yourself
    customInsert: function(insertVideoFn, result) {
      // result is the interface returned by the server
      // insertVideoFn inserts the video into the editor, passing in the video SRC, and executing the function
      let videoHTML = '   + result.redirect_uri + '" controls style="max-width:100%">  ';
      editor.cmd.do('insertHTML', videoHTML); }}...Copy the code