vue Rich Text Editor

download:

 npm install vue-quill-editor --save

main.js introduced

//富文本编辑器
import VueQuillEditor from 'vue-quill-editor';
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'

  Vue.use (VueQuillEditor);

COMPONENTS:

  <div class="fu">
      <quill-editor
        class="editor"
        ref="myTextEditor"
        v-model.trim="content"
        :options="editorOption"
        @blur="onEditorBlur($event)"
        @focus="onEditorFocus($event)"
        @ready="onEditorReady($event)"
        @change="onEditorChange($event)"
      ></quill-editor> 
    </div>

Add input box head:

Adding in data

// Rich Text Editor header 
      editorOption: { 
        modules: { 
          Toolbar: [ 
            [ "Bold", "Italic", "underline", "Strike"], // bold italic underline strikethrough 
            [ "blockquote", "code- block "], // reference block 
            [{header:. 1}, {header: 2}], // 1,2-level heading 
            [{list:" ordered "}], // ordered, unordered list 
            [{ Script: "Sub"}, {Script: "Super"}], // superscript / subscript 
            [{indent: "-1"}, {indent: "+ 1'd"}], // indented 
            [{direction : "rtl"}], // text direction
            [{Color: []}, {background: []}], // {Color: []}, font color, font background color 
            [{font: []}], // font type 
            [{align: [] }], // alignment 
            [ "Clean"], // clear text 
            [ "link", "Image"] // , links, images, videos 
          ] // tools menu bar configuration 
        }, 
        placeholder: "Please here Add product description ", // prompt 
        readyOnly: false , // whether a read-only 
        theme:" Snow ", // theme Snow / Bubble 
        syntax: to true , //Syntax check 
        Edit: "" 
      }

It is a long way:

 

 

 Then add js:

    // lost focus 
    onEditorBlur (Editor) {},
     // get focus 
    onEditorFocus (Editor) {},
     // start 
    onEditorReady (Editor) {},
     // value changes 
    onEditorChange (Editor) { 
       the this .edit = Editor; 
    }

css:

<style  scoped>
.functional {
  height: 473px;
  width: 1120px;
  text-align: left;
  border: 1px #eee solid;
  background: #fff;
  margin: 40px auto;
}
.editor {
  line-height: normal !important;
  width: 1120px;
  height: 430px;
}
.ql-editor {
  line-height: 2.42;
}
.ql-snow .ql-tooltip[data-mode="link"]::before {
  content: "请输入链接地址:";
}
.ql-snow .ql-tooltip.ql-editing a.ql-action::after {
  border-right: 0px;
  content: "保存";
  padding-right: 0px;
}

.ql-snow .ql-tooltip[data-mode="video"]::before {
  content: "请输入视频地址:";
}

.ql-snow .ql-picker.ql-size .ql-picker-label::before,
.ql-snow .ql-picker.ql-size .ql-picker-item::before {
  content: "14px";
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="small"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="small"]::before {
  content: "10px";
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="large"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="large"]::before {
  content: "18px";
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="huge"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="huge"]::before {
  content: "32px";
}

.ql-snow .ql-picker.ql-header .ql-picker-label::before,
.ql-snow .ql-picker.ql-header .ql-picker-item::before {
  content:"text";
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="1"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="1"]::before {
  content: "标题1";
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="2"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="2"]::before {
  content: "标题2";
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="3"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="3""heading 3"]::before {
  Content:;
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="4"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="4"]::before {
  content: "标题4";
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="5"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="5"]::before {
  content: "标题5";
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="6"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="6"]::before {
  content: "标题6";
}

.ql-snow .ql-picker.ql-font .ql-picker-label::before,
.ql-snow .ql-picker.ql-font .ql-picker-item::before {
  content: "标准字体";
}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="serif"]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="serif"]::before {
  content: "衬线字体";
}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="monospace"]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="monospace"]::before {
  content: "等宽字体";
}
.SizeTiShi {
  float: right;
  font-size: 12px;
  color: #999;
  text-align: right;
  margin-right: 20px;
  margin-top: 50px;
}
</style>

Figure:

 

 carry out