前言

本节我们主要介绍几种在vue项目中使用较为广泛的富文本编辑器，其中主要包括Vue-Quill-Editor、mavon-editor以及tinymce等的集成及使用。源代码依然托管在我们的ATP应用测试平台中，源码地址：https://gitee.com/northcangap/atp，仅供参考使用。富文本编辑器实现效果如下：

正文

• Vue-Quill-Editor

①npm安装Vue-Quill-Editor

命令：npm i vue-quill-editor -s

 ②main.js全局引用vue-quill-editor富文本编辑器

main.js源码

import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import router from '@/router';
import http from '@/axios/index';
import qs from 'qs';
import '@/util/derective'
import App from '@/App.vue';
import Print from 'vue-print-nb'
import VideoPlayer from 'vue-video-player'
require('video.js/dist/video-js.css')
require('vue-video-player/src/custom-theme.css')
import VueQuillEditor from 'vue-quill-editor'

// require styles
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'

import mavonEditor from 'mavon-editor'
import 'mavon-editor/dist/css/index.css'
import TinymceVueH from 'tinymce-vue-h'

Vue.use(TinymceVueH);
// use
Vue.use(mavonEditor);
Vue.use(VueQuillEditor, /*  default global options  */);
Vue.use(VideoPlayer);
Vue.use(Print);
Vue.use(ElementUI);
Vue.prototype.$http = http;
Vue.prototype.$qs = qs;
Vue.config.productionTip = false;

new Vue(
    router,
    render: h => h(App),
).$mount('#app')

 ③富文本编辑器使用

 EditorTemplate.vue

<template>
  <div class="container">
    <div class="title">
      <span>富文本编辑器示例</span>
      <el-divider direction="vertical"></el-divider>
      <router-link to="home">
        <span style="font-size: 18px;">退出</span>
      </router-link>
    </div>
    <el-divider>Test Staring</el-divider>
    <div class="content">
      <h3 style="text-align: center;">Vue-Quill-Editor</h3>
      <quill-editor class="editor"
                    ref="myTextEditor"
                    v-model="msg1"
                    :options="editorOption"
                    @blur="onEditorBlur($event)"
                    @focus="onEditorFocus($event)"
                    @ready="onEditorReady($event)"
                    @change="onEditorChange($event)">
      </quill-editor>
      <h3 style="text-align: center;">mavon-editor</h3>
      <mavon-editor v-model="msg2"/>
      <h3 style="text-align: center;">tinymce</h3>
      <tinymce-vue-h :init="tinymceInit" v-model="msg3"></tinymce-vue-h>
    </div>
  </div>
</template>

<script>

export default 
  name: "EditorTemplate",
  data() 
    return 
      msg1: '',
      msg2: '',
      msg3: '',
      tinymceInit: 
        theme: 'silver', // 必须参数, 否则富文本编辑器无法显示
        skin_url: '@/tinymce/skins/ui/oxide', // 必须参数, 否则富文本编辑器无法显示
        language_url: '/tinymce/langs/zh_CN.js', // 如需中文,则引入
        language: 'zh_CN', // 如需中文,则引入
        content_css: '/tinymce/skins/content/default', // 必须参数
      ,
      editorOption: 
        /*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", false, "large", "huge"]], // 字体大小
            [header: [1, 2, 3, 4, 5, 6, false]], // 标题
            [color: [], background: []], // 字体颜色、字体背景颜色
            [font: []], // 字体种类
            [align: []], // 对齐方式
            ["clean"], // 清除文本格式
            ["link", "image", "video"] // 链接、图片、视频
          ], //工具菜单栏配置
        ,*/
        placeholder: '请在这里添加产品描述', //提示
        readyOnly: false, //是否只读
        theme: 'snow', //主题 snow/bubble
        syntax: true, //语法检测
      ,
      // markdownOption: 
      //   // bold: true, // 粗体
      // ,
    
  ,
  methods: 
    // 失去焦点
    onEditorBlur(editor) 
    ,
    // 获得焦点
    onEditorFocus(editor) 
    ,
    // 开始
    onEditorReady(editor) 
    ,
    // 值发生变化
    onEditorChange(editor) 
      this.content = editor.html;
      console.log(editor);
    ,
  ,
  computed: 
    editor() 
      return this.$refs.myTextEditor.quillEditor;
    
  ,

</script>

<style scoped lang="scss">
.container 
  padding: 10px;

  a 
    text-decoration: none;
  

  .title 
    font-size: 20px;
    font-weight: bold;
  

</style>

④实现效果：可以编辑文本、图片、视频等多种资源

• mavon-editor

①npm安装mavon-editor

命令：npm i mavon-editor -s

②main.js中全局引入mavon-editor富文本编辑器

 ③mavon-editor组件使用

 ④实现效果：

• tinymce

①npm安装tinymce

命令：npm i tinymce-vue-h -s

②main.js中全局引入tinymce-vue-h富文本编辑器

③使用tinymce-vue-h富文本编辑器

 ④使用效果

结语

本小节到这里就结束了，我们下期见。。。