Vue中富文本编辑器的使用

小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。

大家好，我是不孤独的百年，最近在项目中使用了富文本编辑器，使用到了quillEditor和VueUeditorWrap两种编辑器，整理了一下。

VueUeditorWrap

使用步骤：

1. 安装VueUeditorWrap

npm i vue-ueditor-wrap

2. 下载处理后的UEditor

下载网上地址蛮多的，也可以去我github上下载。

3. 组件注册

export const ueditConfig = {
  autoHeightEnabled: false,
  initialFrameHeight: 300,
  initialFrameWidth: '100%',
  serverUrl: process.env.NODE_ENV === 'production'
    ? 'https://XXXXX/public/ueditor'
    : 'https://XXXXX/public/ueditor',
  UEDITOR_HOME_URL: '../../static/UE/', //上一步文件夹的位置
  toolbars: [
    [
      'source',
      '|',
      'undo',
      'redo',
      '|',
      'bold',
      'italic',
      'underline',
      'strikethrough',
      'superscript',
      'subscript',
      'removeformat',
      'formatmatch',
      'autotypeset',
      'blockquote',
      'pasteplain',
      '|',
      'forecolor',
      'backcolor',
      'insertorderedlist',
      'insertunorderedlist',
      'selectall',
      'cleardoc',
      '|',
      'customstyle',
      'paragraph',
      'fontfamily',
      'fontsize',
      '|',
      'indent',
      '|',
      'justifyleft',
      'justifycenter',
      'justifyright',
      'justifyjustify',
      '|',
      'touppercase',
      'tolowercase',
      '|',
      'link',
      'unlink',
      '|',
      'imagenone',
      'imageleft',
      'imageright',
      'imagecenter',
      '|',
      'simpleupload',
      'insertimage',
      'attachment',
      'insertcode',
      '|',
      'inserttable',
      'date',
      'time',
      'spechars',
      'scrawl',
      '|',
      'searchreplace',
      'drafts',
      "insertvideo"
    ],
  ],
  zIndex: 99999,
};

这是一些编辑器的配置：

4. 页面使用

import VueUeditorWrap from 'vue-ueditor-wrap';
import { ueditConfig } from '@/components/uconfiger';

export default {
  components: {
    VueUeditorWrap,
  },
  data() {
   config: ueditConfig,
   content:'',// 双向绑定
  }
}

<VueUeditorWrap :config="config" v-model="content"></VueUeditorWrap>

quillEditor

使用步骤：

1. 安装quillEditor

npm install vue-quill-editor --save
npm install quill --save

2. 页面使用

import { quillEditor } from 'vue-quill-editor'; //调用编辑器
import 'quill/dist/quill.core.css';
import 'quill/dist/quill.snow.css';
import 'quill/dist/quill.bubble.css';

export default {
  components: {
    quillEditor,
  },
  data() {
   content:'',// 双向绑定
   editorOption: {}, // 默认
  }
}

 <quill-editor v-model="content" ref="myQuillEditor" :options="editorOption"
          @change="onEditorChange($event)"
        ></quill-editor>

computed: {
    editor() {
      return this.$refs.myQuillEditor.quill;
    }
  },
 methods() {
   onEditorChange() {
     console.log(this.content) // 实时能看得到输入的内容 
   }
 }

比较

对开发者来说，quillEditor比VueUeditorWrap更方便一些，开始用的VueUeditorWrap，但是同事使用感好像不是很好（也可能是我写的不好），今天又换的quillEditor，好像好多了，看后续同事的反馈。