富文本vue-quill-editor

地址: https://www.npmjs.com/package/vue-quill-editor.

使用步骤

1. 安装：

`npm install vue-q

2. 局部注册：

// 导入样式
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
// 导入组件
import { quillEditor } from 'vue-quill-editor'
// 注册组件
export default {
  components: {
    quillEditor
  },
}

3. 组件使用：

<!--
- content字段名称
- editorOption组件配置对象
-->
<quill-editor v-model="content" :options="editorOption"></quill-editor>

4. 功能修改

var toolbarOptions = [
  ['bold', 'italic', 'underline', 'strike'],        // toggled buttons
  ['blockquote', 'code-block'],

  [{ 'header': 1 }, { 'header': 2 }],               // custom button values
  [{ 'list': 'ordered'}, { 'list': 'bullet' }],
  [{ 'script': 'sub'}, { 'script': 'super' }],      // superscript/subscript
  [{ 'indent': '-1'}, { 'indent': '+1' }],          // outdent/indent
  [{ 'direction': 'rtl' }],                         // text direction

  [{ 'size': ['small', false, 'large', 'huge'] }],  // custom dropdown
  [{ 'header': [1, 2, 3, 4, 5, 6, false] }],

  [{ 'color': [] }, { 'background': [] }],          // dropdown with defaults from theme
  [{ 'font': [] }],
  [{ 'align': [] }],

  ['clean']                                         // remove formatting button
];

// 初始化插件
var quill = new Quill('#editor', {
  modules: {
    toolbar: toolbarOptions
  },
  theme: 'snow'
});

5.样式修改

// 覆盖富文本样式(publish-container目的提高选择器优先级)
.publish-container .ql-editor{
  height: 300px;
}
.publish-container .ql-toolbar.ql-snow{
  padding: 0 8px;
}