ATP应用测试平台——关于vue中Vue-Quill-EditorMavon-EditorTinymce等多种富文本编辑器的集成使用

Posted 2021-09-10 北溟溟

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了ATP应用测试平台——关于vue中Vue-Quill-EditorMavon-EditorTinymce等多种富文本编辑器的集成使用相关的知识，希望对你有一定的参考价值。

前言

本节我们主要介绍几种在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>

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