vue-quill-editor 富文本编辑器插件介绍

时间：2024-03-07 15:11:04

Iblog项目中博文的文本编辑器采用了vue-quill-editor插件，本文将简单介绍其使用方法。

引入配置

  • 安装模块
npm install vue-quill-editor --save
  • index.js中引入组件
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)

注意必须引入样式，否则会出现编辑器排版的混乱。

  • 组件中注册
// 在<script></script>之间插入
import { quillEditor, Quill } from \'vue-quill-editor\'
// 工具栏配置
const toolbarOptions = [
  [\'bold\', \'italic\', \'underline\', \'strike\'],
  [\'blockquote\', \'code-block\'],
  [{\'list\': \'ordered\'}, {\'list\': \'bullet\'}],
  [{\'indent\': \'-1\'}, {\'indent\': \'+1\'}],
  [{\'color\': []}, {\'background\': []}],
  [{\'align\': []}],
  [\'link\', \'image\'],
  [\'clean\'],
  [{\'size\': [\'small\', false, \'large\', \'huge\']}],
  [{\'header\': [1, 2, 3, 4, 5, 6, false]}],
  [{\'font\': []}]
]
export default {
  data () {
    return {
      ...
      editorOption: {
        placeholder: \'提示语\',
        modules: {
          toolbar: {
            container: toolbarOptions,
            ...
          }
        }
      }
      ...
    }
  },
...
  components: {
    \'quill-editor\': quillEditor
  },
...
}
  • 使用组件
<div class="quill-box">
  <template>
    <quill-editor v-model="content"
                  :options="editorOption"
                  ref="content">
    </quill-editor>
  </template>
</div>

经过上述配置即可使用quill富文本编辑器了。

更改图片按钮的事件函数

由于quill插件默认插入图片是base64格式的，若图片较大会引起内容太大无法保存到数据库里面，这样为了上传图片或者插入网络图片，要先更改图片按钮的事件下函数，具体是在editorOption->modules->toolbar中加入handlers对象，并插入名称为image的函数，函数的内容设定为自身所需内容，如下

data () {
  return {
    content: \'\',
    editorOption: {
      ...
      modules: {
        toolbar: {
          container: toolbarOptions,
          handlers: {
            \'image\': function (value) {
              if (value) {
                // 自定义内容
              } else {
                this.quill.format(\'image\', false)
              }
            }
          }
        }
      }
    }
  }

插入图片网络图片

若想插入来自网络的图片，即提供图片网址，可以加入以下语句

const range = this.quill.getSelection()
const value = prompt(\'提示语\')
this.quill.insertEmbed(range.index, \'image\', value, Quill.sources.USER)

但是这种方法嵌入的图片暂时不支持调整图片大小。

使用样式渲染内容

使用该插件所保存的内容需经过原样式渲染才能还原编辑时的效果，配置方法为，在<div>标签中加入ql-editor样式，并且内容需为html格式呈现

<div class="ql-editor" v-html="articleContent"></div>

相关文章