(十二)ATP应用测试平台——关于vue中Vue-Quill-Editor、Mavon-Editor、Tinymce等多种富文本编辑器的集成使用

前言

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

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

• 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富文本编辑器

 ④使用效果

结语

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