demand

(PC) do a rich text component that can use the function of picture upload, video upload and file upload, simple text editing and publishing function, using socket transmission,

practice

When I saw the need, I thought it would be easy, so I went to Github to find a rich text editor, because the project was urgent, and I thought I would find one right out of the box.

Each of these editors was tried once and finally filtered

  • Vue-quill-editor: Local video uploading is not supported
  • Vue-froala-wysiwyg: I have all the features I want including photo and video uploading, plus additional support for responsive, but for a fee
  • Ueditor: functionality is very full, but the style is really ugly, may have to own encapsulation
  • The rest of the editors are basically either underpowered or mobile (with the advantage of being lightweight)

Since I had never done rich text development, I spent an afternoon testing the rich text. After careful consideration, I ended up using the conservative approach, using UEditor development, and beautifying it a bit.

The introduction of ueditor

Download address and documentation

  • import ‘.. /.. /static/UEditor/ueditor.config’
  • import ‘.. /.. /static/UEditor/ueditor.all.min’
  • import ‘.. /.. /static/UEditor/lang/zh-cn/zh-cn’

We need to go to the ueditor.config.js file to change the path configuration

Modify the style

Once we’ve introduced UEditor, we’ll just hide the toolbars and create a new div to emulate them ourselves

Next we’ll go straight to a div and give it a Flex layout, then go to iconFont and download some ICONS, but we need to configure WebPack to support batch processing of SVG, refer to the Hand Touch Hand series

Bind an icon to a click event

After that, the style is basically done, all that’s left is to make them click, trigger an event, and make them do something, like

    execCommand: function (name) {
      this.editor.execCommand(name)
    },
Copy the code

Insert pictures, insert video, insert file this operation, I did not use ueditor built-in functions, video and folders I made progress bar form, in to the bottom of the rich text editor, after the success of the image upload the return value pieced together, based on the bidirectional binding, inside the editor components dynamically create pictures, click on the three ICONS, In this way, the editor component only needs to maintain the HTML text of the editor, which has a single responsibility and is easy to maintain later

      editorData: {
        body: ' ',
        images: []
      },
Copy the code

Local Save function

Finally added an automatic save function, here you can use a timer or when the content changes when the localStorage inside.

    autoSaveBody () {
      if (this.isAutoSaved && this.editorData.body) {
        let storage = {}
        Object.assign(storage, this.editorData)
        const pms = JSON.stringify(storage)
        this.isAutoSaved = false
        setTimeout(() => {
          localStorage.setItem(this.storageKey, pms)
          this.isAutoSaved = true}}}, 500)Copy the code

But you have to consider whether the current situation is the first write or the change after the release, so for external use, you only need to operate on the innerValue property, the value of which you can retrieve in the background (which is the change state), And then what kind of data does the editor render, and the way you do that internally is you add an init function, right

    init: function() {// External default valuesif (this.value.body) {
        this.editor.setContent(this.value.body)
      } else{// have a local cache const storage =localStorage.getItem(this.storageKey)
        if (storage) {
          const storageJson = JSON.parse(storage)
          Object.assign(this.editorData, storageJson)
          if (this.editorData.body) {
            this.editor.setContent(this.editorData.body)
          }
        } elseObject.assign(this.editorData, this.$options.data().editorData)
        }
      }
      this.autoSaveInterval = setInterval(() => {
        this.autoSaveBody()
      }, 5000)
    },
Copy the code

disadvantages

The component is too large. The default compression is 389K. After gzip is enabled, it is about 100K

advantages

Powerful, product requirements can be iterative.

supplement

Of course, this is extracted from my project, not a complete code, just a thought. The first time to do rich text, if you say wrong, you are more corrections, or you have better ideas welcome to discuss together

The code address