vue 自定义富文本

1. 下载 vue 插件

npm install vue-quill-editor --save

2. 引用到 main.js 里面

// 富文本样式.css
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
// 引入 富文本插件
import  VueQuillEditor from 'vue-quill-editor'
Vue.use(VueQuillEditor)

3. 在我们自己页面引入

 import { quillEditor } from 'vue-quill-editor'
// 注册 在 components:{}生命周期里面
components:{
    quillEditor
}
 // 这时候我们在页面上使用 下面这个标签,富文本就显示基本的原貌了
<quill-editor v-model="content" ref="myQuillEditor" :options="editorOption" @blur="onEditorBlur($event)" @focus="onEditorFocus($event)"
              @change="onEditorChange($event)">
            </quill-editor>

//在 data 里面       content:null,

4. 自定义富文本title 上的功能

// 在data里面

ditorOption:{
        modules:{
          toolbar:[
            // 基本公布
            ['bold', 'italic', 'underline', 'strike'],        // toggled buttons
            // 背景颜色
            ['blockquote', 'code-block'],
            // 文字大小
            [{ 'size': ['small', false, 'large', 'huge'] }],
            [{ 'header': [1, 2, 3, 4, 5, 6, false] }],
            // 富文本列表
            [{ 'list': 'ordered'}, { 'list': 'bullet' }],
            // h1 h2
            [{ 'header': 1 }, { 'header': 2 }]
          ]
        }
      }

5. 下面是我自定义的title 效果了

   写的不好,凑合看吧,但愿对你有帮助,,更多自定义功能需要自己看看官网