[Vue background management 5] integrating TinyMCE rich text and markdown editor

Time:2020-9-30

Integrating TinyMCE rich text and markdown editor

As I used the basic template of flowered underpants, he had a set of integration solutions, so he integrated the rich text editor and mark down editor. The effect is as follows.

[Vue background management 5] integrating TinyMCE rich text and markdown editor
[Vue background management 5] integrating TinyMCE rich text and markdown editor

Integrated rich text editor

It’s very troublesome to integrate rich text editor. Previously, we also integrated ckeditor and ueditor, but now we are following the pattern of flowered underpantsIntegration schemeAccording to his matchingDevelopment documentation
You can basically implement the style. I will not repeat it here.

The trouble is to modify the image upload

Upload rich text image to server

In the upper right corner of the rich text editor, the flowered underpants pull out the upload button separately. You can use thisComponents see

The upload is very simple. It is integrated with the element UIel-uploadComponent, upload back, triggerthis.$emit('successCBK', arr)The parent component listens for events and puts the uploaded array image into the rich text.

el-uploadComponents can refer to my articlehttps://www.charmcode.cn/article/2020-07-26_Vue_el_upload

Rich text editor paste upload image

First of allThere are some defects in my screenshot pasting and uploading. For details, please refer to my question “think no”https://segmentfault.com/q/10…
There is also GitHub issuehttps://github.com/PanJiaChen…

As the integrated solution of flowered underpants does not integrate paste and upload, the reason seems to be that pasting and uploading is a paid project, so I manually integrate paste and upload, which is not difficult.

Idea: listen to paste event, get image byte stream, upload image, insert URL of image returned by upload success into rich text

Listen for paste events

First paste the event, I am in rich texttextareamonitor@pasteEvent, but it can’t. After reading the document, it is found that the event should be bound at the time of initialization, so the operation is like this.

initTinymce() {
  const _this = this
  window.tinymce.init({
    xxx..
    paste_ data_ Images: false, // paste image
    xxx...
    init_instance_callback: editor => {
      xxx...
      editor.on('paste', (evt) => {
        //Listen for paste events
        this.onPaste(evt)
      })
    },
    xxx...
  })
},

Upload pictures and insert data

onPaste(event) {
    //Realize image paste and upload
    const items = (event.clipboardData || window.clipboardData).items
   
    //Search for clipboard items only takes the first one
    if (items[0].type.indexOf('image') !== -1) {
      console.log ('paste is a picture type ')
      const file = items[0].getAsFile()
      const formData = new FormData()
      formData.append('file', file)
      //Upload pictures
      UpLoadImg(formData).then(res => {
        console.log(res)
        if (res.code === 200) {
          //Put it in the content (pictures can be uploaded normally)
          window.tinymce.get(this.tinymceId).insertContent(`<img class="wscnph" >`)
        } else {
          this.$ message.error ('image upload failed, contact developer ')
        }
      })
    } else {
      console.log ('paste is not a picture, can't upload ')
    }
}

If you want to control the default image size, you can widen the height style.

Integrated markdown editor

There is a problem with the markdown integration scheme in the floral underpants,https://github.com/panjiachen…
Of course, there is PR to fix ithttps://github.com/PanJiaChen…But now it’s merged.
So I plan to write an editor by myself, and then render it with the markdown component. It will last two days.

[Vue background management 5] integrating TinyMCE rich text and markdown editor

However, it was found that the integration of open source was convenient. After a day or two, he gave up. It will be usedmavon-editorThis editor.
It’s easy to integratehttps://github.com/hinesboy/m…Just follow the official instructions.

Add markdown component

I added a link to the syntax reference in the toolbar

<mavon-editor v-if="form.goods_desc_type===2" ref="md" v-model="form.goods_desc" code-style="atom-one-dark" style="height: 500px" @imgAdd="imgAdd" @imgDel="imgDel" >
            <template slot="left-toolbar-before">
              <a href="https://markdown-it.github.io/" target="_blank"><span class="el-icon-link" aria-hidden="true"></span></a>
            </template>
          </mavon-editor>

Image upload, support paste upload at the same time

There is demo on the official website@imgAdd="imgAdd"Add this event, and then addref="md"Property to facilitate access to this component.
The code is as follows

//Markdown editor image upload support screenshot paste upload
      imgAdd(pos, $file) {
        const formData = new FormData()
        formData.append('file', $file)
        UpLoadImg(formData).then(res => {
          console.log(res)
          if (res.code === 200) {
            //Put it in the markdown editor
            this.$refs.md.$img2Url(pos, res.data.image)
          }
        })
      }

summary

What open source components are easy to integrate. Take a moment to look at the documents. If you don’t understand, you can basically solve the problem by searching the issues.

Full GitHub address

GitHub address refer to my personal website

Recommended Today

Java security framework

The article is mainly divided into three parts1. The architecture and core components of spring security are as follows: (1) authentication; (2) authority interception; (3) database management; (4) authority caching; (5) custom decision making; and;2. To build and use the environment, the current popular spring boot is used to build the environment, and the actual […]