There are many good rich text editors out there, such as UEditor, wangEditor, etc., but not all of them work well on mobile.

Let’s leave aside the question of whether mobile really needs rich text, but let’s make it happen.

Failed attempt

The right choice is the beginning of success, and you should definitely do some research before you develop.

Through various data collection, several candidates were identified: UEditor, vue-quill-Editor, wangEditor, VUe-html5-Editor, Tinymce.

UEditor is baidu’s old rich text editor, but the interface has a feeling of the last century, the latest update on the official website stays at 2016-05-18. It hasn’t been maintained officially for years, but there are plenty of folk tutorial materials, so give it a last try and use UEditor for the rest.

WangEditor is truly impressive, as it is officially described as lightweight, simple, easy to use, open source and free. If you think this is a good idea, try it on your project first. It is a pity to find that the performance of wangEditor on the mobile terminal is somewhat disappointing. For example, I want to set an H1 title, but sometimes it works, sometimes it doesn’t, and most of the time it doesn’t work. I don’t know if it is my operation.

Next, try vuE-html5-editor. The introduction is good. After following the tutorial, the editor does not appear on the page as expected… I have searched for many times but have not found the problem, forget it… Fortunately, there are other options.

Finally found you

Then try vue-quill-editor, which you didn’t use at first because the document was in English… After all, English documents are not as comfortable as Chinese documents, so try the framework with Chinese documents first. Who ever thought the others were too bad, had to use this. It works surprisingly well on mobile. Take a look at it in action:

Perfect support for a variety of text effects, but also to insert pictures, editor appearance is also very good to look at it!

For use in projects

For quick integration in a project, you need two documents: vue-Quill-Editor’s Github home page and quill’s official website.

The basic usage is described in vue-quill-Editor, and if you want to do some personalized configuration, you need to see the documentation on the Quill website for various attributes.

Here are my integration steps:

1. Install the vue – quill – editor

NPM install vue quill - editor - saveCopy the code

2. Global import

Introduce vue-quill-Editor into the project in main.js

import Vue from 'vue'
import VueQuillEditor from 'vue-quill-editor'

// require styles
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'

Vue.use(VueQuillEditor, /* { default global options } */)
Copy the code

Vue.use(VueQuillEditor, /* {default global options} */) The second parameter is the configuration of Quill. I’ve only changed the default placeholder hint here, so the last line should read:

Vue.use(VueQuillEditor, {
  placeholder: 'Please enter content'});Copy the code

For detailed configuration, please refer to the Quill official website

3. Use in code

Just use the

tag

<template> <! -- bidirectional data binding --> <quill-editor v-model="content" ref="myQuillEditor" :options="editorOption" @blur="onEditorBlur($event)" @focus="onEditorFocus($event)" @ready="onEditorReady($event)"> </quill-editor> </template>Copy the code

The complete code

The code for the above effect is as follows:

<template>
  <div class="wrapper">
    <div class="title" v-html="title"></div>
    <div class="input-wrapper" v-for="(option,index) in options">
      <div class="sub-title">{{'(' + option.item + ').'}}</div>
      <quill-editor class="editor"
                    v-model="messages[index]"
                    ref="myQuillEditor"
                    @blur="onEditorBlur"
                    @focus="onEditorFocus"
                    @ready="onEditorReady">
      </quill-editor>
    </div>
  </div>
</template>

<script>
  export default {
    components: {
    },
    props: {
      item: {
        type: Object,
        required: true
      },
      index: {
        type: Number,
        required: true
      },
    },
    data() {
      return {
        messages: [],
      }
    },
   
    methods: {

      onEditorBlur() {
        console.log('blur',this.messages)
      },

      onEditorFocus(){
        console.log('focus',this.messages)
      },

      onEditorReady(){
        console.log('ready',this.messages)
      }
  }
</script>

<style lang="scss">

  .wrapper {
    width: 100%;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;

    .title {
      font-size: $font-size-large;
      color: $text-main;
      padding-bottom: px2rem(6);
      line-height: 150%;
    }

    .input-wrapper {
      display: flex;
      flex-direction: row;
      width: 100%;
      margin: px2rem(5) 0;
      box-sizing: border-box;

      .editor{
        width: 100%;
        height: px2rem(200);
      }

      .sub-title {
        font-size: $font-size-normal;
        color: $text-normal;
      }

      .field {
        flex: 1;
        border: 1px solid $border-third;
      }
    }
  }

  div.ql-container.ql-snow{
    height: px2rem(100);
  }

  div.ql-editor.ql-blank{
    height: px2rem(50);
  }

</style>

Copy the code

Some data and interfaces strongly related to the company’s business have been deleted.

There are two points to note:

  1. The editor’s default input box height is high, causing the input box to overlap with other content. You can change the height of the input box by styling the last two paragraphs.

  2. You can display multiple rich text input fields on a page, in this case in a V-for loop. How do you distinguish the values of each input field? Just use v-model=”messages[index]” at binding time using the array position corresponding to the index binding.

This is how vue-quill-Editor is used in a real project.