Rich text input box

The first step: mounting vue-quill-editor or two modules quill

yarn add vue-quill-editor -D
yarn add quill -D

And then introduced main.js file

1 import QuillEditor from 'vue-quill-editor'
2 import 'quill/dist/quill.core.css'
3 import 'quill/dist/quill.bubble.css'
4 import 'quill/dist/quill.snow.css'
5 Vue.use(QuillEditor)

use

<template>
    <div>
        <quill-editor
            v-model="content"
            ref="myQuillEditor"
            :options="editorOption"
            @blur="onEditorBlur($event)" @focus="onEditorFocus($event)"
            @change="onEditorChange($event)">
        </quill-editor>
        <button @click="saveHtml">确定</button>
    </div>
</template>

<script>
export default {
  data () {
    return {
      content: ``,
      editorOption: {
        theme: 'snow', //Default entry 
        // modules: CI { 
        //      Toolbar: [ 
        //          [ 'Bold', 'Italic', 'underline', 'Strike'], // bold, italic, underline, strikethrough 
        //          [ 'blockquote ',' code-block '] , // reference block 
        //          [{' header ':. 1}, {' header ': 2}], // the title, in the form of key-value pairs; represents 1,2 Font size 
        //          [{ 'list': 'ordered'}, { 'list': 'bullet'}], a list of // 
        //          [{ 'Script': 'Sub'}, { 'Script': 'Super'} ], superscripts and subscripts // 
        //          [{ 'indent': '-1'}, { 'indent': '+ 1'd'}], // indented 
        //          [{ 'direction': 'RTL'}],Text Orientation // 
        //          [{ 'size': [ 'Small', to false, 'Large', 'Huge']}], font size // 
        //         [{ 'Header': [1 , 2, 3, 4, 5, 6, false]}], // several stages title 
        //          [{ 'Color': []}, { 'background': []}] // font color, font background color 
        //          [{ 'font': []}], Font // 
        //          [{ 'align = left': []}], alignment // 
        //          [ 'Clean'], // clear the font style 
        //          [ 'Image', 'video'] // upload pictures, upload videos 
        //      ] 
        // } 
      }, 
    } 
  }, 
  computed: { 
    Editor () { 
      return  the this $ refs.myQuillEditor.quill. 
    } 
  }, 
  Methods: { 
    onEditorReady (editor) {}, // prepare editor 
    onEditorBlur () {},//Lost focus event 
    onEditorFocus () {}, // get focus event 
    onEditorChange () {}, // content change event 
    saveHTML (Event) { 
      Alert ( the this .content) 
    } 
  } 
}
 </ Script>

To quill-editor component toolbar to add title

Original link: https: //blog.csdn.net/w390058785/article/details/84346251

Step 1: Create a quill-title.js file, as follows

 

const titleConfig = {
  'ql-bold':'加粗',
  'ql-color':'颜色',
  'ql-font':'字体',
  'ql-code':'插入代码',
  'ql-italic':'斜体',
  'ql-link':'添加链接',
  'ql-background':'背景颜色',
  'ql-size':'字体大小',
  'ql-strike':'删除线',
  'ql-script':'上标/下标',
  'ql-underline':'下划线',
  'ql-blockquote':'引用',
  'ql-header':'标题',
  'ql-indent':'缩进',
  'ql-list':'列表',
  'ql-align':'文本对齐',
  'ql-direction':'文本方向',
  'ql-code-block':'代码块',
  'ql-formula':'公式',
  'ql-image':'图片',
  'ql-video':'视频',
  'ql-clean':'清除字体样式'
};
 
export function addQuillTitle(){
  const oToolBar = document.querySelector('.ql-toolbar'),
        aButton = oToolBar.querySelectorAll('button'),
        aSelect =  oToolBar.querySelectorAll('select');
  aButton.forEach(function(item){
    if(item.className === 'ql-script'){
      item.value === 'sub' ? item.title = '下标': item.title = '上标';
    }else if(item.className === 'ql-indent'){
      item.value === '+1' ? item.title ='向右缩进': item.title ='向左缩进';
    }else{
      item.title = titleConfig[item.classList[0]];
    }
  });
  aSelect.forEach(function(item){
    item.parentNode.title = titleConfig[item.classList[0]];
  });
}

 

使用

<script>
import { addQuillTitle } from './quill-title.js'
export default {
    mounted(){
      addQuillTitle();
    }
}