在vue项目里使用文本编辑

首先找到一款适合自己的插件

我这里使用的就是Vue-Quill-Editor。

1.安装

npm install vue-quill-editor --save

2.然后在main.js中全局引入(其它引入方式参考npm上)

import Vue from 'vue'
import QuillEditor from 'vue-quill-editor'
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.bubble.css'
import 'quill/dist/quill.snow.css'

Vue.use(QuillEditor)

3.在模板中使用标签

<quill-editor v-model="content" //数据双向绑定
                ref="myQuillEditor" //方便找到DOM元素
                :options="editorOption" //文本编辑选项配置（在data中定义）
                @blur="onEditorBlur($event)" //事件
                @focus="onEditorFocus($event)" //事件
                @ready="onEditorReady($event)"> //事件
  </quill-editor>

4.option配置

custom: {
      modules: {
        toolbar: [
          ["bold", "italic", "underline", "strike"], //加粗，斜体，下划线，删除线
          ["blockquote", "code-block"], //引用代码块
          [{ header: 1 }, { header: 2 }], //标题键值对的形式,1、2表示字体大小
          [{ list: "ordered" }, { list: "bullet" }], //列表
          [{ script: "sub" }, { script: "super" }], //上下标
          [{ indent: "-1" }, { indent: "+1" }], //缩进
          [{ direction: "rtl" }], //文本方向
          [{ size: ["small", "norrmal", "large", "huge"] }], //字体大小
          [{ header: [1, 2, 3, 4, 5, 6, normal] }], //几级标题
          [{ color: [] }, { background: [] }], //字体颜色，字体背景颜色
          [{ font: [] }], //字体
          [{ align: [] }], //对齐方式
          ["clean"], //清除字体样式
          ["image", "video"] //上传图片视频
        ]
      }
    }

这个插件有个小bug，想做个首行缩进很困难。不在意这个的话可以使用。