先来对比一下各个编辑器
UEditor：百度前端的开源项目，功能强大，基于 jQuery，但已经没有再维护，而且限定了后端代码，修改起来比较费劲
bootstrap-wysiwyg：微型，易用，小而美，只是 Bootstrap + jQuery...
kindEditor：功能强大，代码简洁，需要配置后台，而且好久没见更新了
wangEditor：轻量、简洁、易用，但是升级到 3.x 之后，不便于定制化开发。不过作者很勤奋，广义上和我是一家人，打个call
quill：本身功能不多，不过可以自行扩展，api 也很好懂，如果能看懂英文的话...
summernote：没深入研究，UI挺漂亮，也是一款小而美的编辑器，可是我需要大的
tinymce优势
1. GitHub 用户量多，功能齐全，；
2. 唯一一个从 word 粘贴过来还能保持绝大部分格式的编辑器；
3.适合前后端完全分离；
废话不多说，下面直接开始介绍vue如何集成tinymce
1、下载tinymce
npm i tinymce -S
2、然后在node_modules中找到刚才下载的tinymce 并复制到static文件夹下
其中语言包需要上官网下载
3、在根目录index.html中引入以下文件
<script src="static/tinymce/tinymce.min.js"></script>
4、在componts文件夹下建个Tinymce组件
源码如下：
<template>
<div>
<input type="file" id="photoFileUpload" style="display: none" />
<textarea :id="Id"></textarea>
</div>
</template>
<script>
import '../../../static/tinymce/tinymce'
export default {
name: 'TinyMce',
props: {
value: {
default: '',
type: String
},
config: {
type: Object,
default: () => {
return {
theme: 'modern',
height: 600
}
}
},
url: {
default: '',
type: String
},
accept: {
default: 'image/jpeg, image/png',
type: String
},
maxSize: {
default: 2097152,
type: Number
}
},
data() {
const Id = Date.now()
return {
Id: Id,
myEditor: null,
DefaultConfig: {
// GLOBAL
language: 'zh_CN', //汉化
height: 500, //默认高度
theme: 'modern', //默认主题
menubar: true,
toolbar: `styleselect | fontselect | formatselect | fontsizeselect | forecolor backcolor | bold italic underline strikethrough | insertfile link image | table | alignleft aligncenter alignright alignjustify | outdent indent | numlist bullist | preview removeformat hr | paste code | undo redo | fullscreen `,//需要的工具栏
plugins: `
paste
importcss
image
code
table
advlist
fullscreen
link
lists
textcolor
colorpicker
hr
preview
`,
// CONFIG
forced_root_block: 'p',
force_p_newlines: true,
importcss_append: true,
// CONFIG: ContentStyle 这块很重要， 在最后呈现的页面也要写入这个基本样式保证前后一致， `table`和`img`的问题基本就靠这个来填坑了
content_style: `
* { padding:0; margin:0; }
html, body { height:100%; }
img { max-width:100%; display:block;height:auto; }
a { text-decoration: none; }
iframe { width: 100%; }
p { line-height:1.6; margin: 0px; }
table { word-wrap:break-word; word-break:break-all; max-width:100%; border:none; border-color:#999; }
.mce-object-iframe { width:100%; box-sizing:border-box; margin:0; padding:0; }
ul,ol { list-style-position:inside; }
`,
insert_button_items: 'image link | inserttable',
// CONFIG: Paste
paste_retain_style_properties: 'all',
paste_word_valid_elements: '*[*]', // word需要它
paste_data_images: true, // 粘贴的同时能把内容里的图片自动上传，非常强力的功能
paste_convert_word_fake_lists: false, // 插入word文档需要该属性
paste_webkit_styles: 'all',
paste_merge_formats: true,
nonbreaking_force_tab: false,
paste_auto_cleanup_on_paste: false,
// CONFIG: Font
fontsize_formats: '10px 11px 12px 14px 16px 18px 20px 24px',
// CONFIG: StyleSelect
style_formats: [
{
title: '首行缩进',
block: 'p',
styles: { 'text-indent': '2em' }
},
{
title: '行高',
items: [
{ title: '1', styles: { 'line-height': '1' }, inline: 'span' },
{ title: '1.5', styles: { 'line-height': '1.5' }, inline: 'span' },
{ title: '2', styles: { 'line-height': '2' }, inline: 'span' },
{ title: '2.5', styles: { 'line-height': '2.5' }, inline: 'span' },
{ title: '3', styles: { 'line-height': '3' }, inline: 'span' }
]
}
],
// FontSelect
font_formats: `
微软雅黑=微软雅黑;
宋体=宋体;
黑体=黑体;
仿宋=仿宋;
楷体=楷体;
隶书=隶书;
幼圆=幼圆;
Andale Mono=andale mono,times;
Arial=arial, helvetica,
sans-serif;
Arial Black=arial black, avant garde;
Book Antiqua=book antiqua,palatino;
Comic Sans MS=comic sans ms,sans-serif;
Courier New=courier new,courier;
Georgia=georgia,palatino;
Helvetica=helvetica;
Impact=impact,chicago;
Symbol=symbol;
Tahoma=tahoma,arial,helvetica,sans-serif;
Terminal=terminal,monaco;
Times New Roman=times new roman,times;
Trebuchet MS=trebuchet ms,geneva;
Verdana=verdana,geneva;
Webdings=webdings;
Wingdings=wingdings,zapf dingbats`,
// Tab
tabfocus_elements: ':prev,:next',
object_resizing: true,
// Image
imagetools_toolbar: 'rotateleft rotateright | flipv fliph | editimage imageoptions'
}
}
},
methods: {
setContent(content) {
this.myEditor.setContent(content)
},
getContent() {
return this.myEditor.getContent()
},
init() {
const self = this
window.tinymce.init({
// 默认配置
...this.DefaultConfig,
// 挂载的DOM对象
selector: `#${this.Id}`,
// prop内传入的的config
...this.config,
setup: (editor) => {
self.myEditor = editor
editor.on(
'init', () => {
self.loading = true
self.$emit('on-ready') // 抛出 'on-ready' 事件钩子
editor.setContent(self.value)
self.loading = false
}
)
// 抛出 'input' 事件钩子，同步value数据
editor.on(
'input change undo redo', () => {
self.$emit('input', editor.getContent())
}
)
}
})
}
},
mounted() {
this.init()
},
beforeDestroy() {
// 销毁tinymce
this.$emit('on-destroy')
window.tinymce.remove(`#${this.Id}`)
},
}
</script>
4、调用组件
新建一个vue文件，并配置路由，源码如下：
<template>
<div>
<tinymce></tinymce>
</div>
</template>
<script>
import tinymce from "../TinyMce/TinyMce"
export default {
data() {
return {
}
},
methods: {
},
components:{
tinymce
}
}
</script>
<style>
</style>
<style lang="scss" scoped type="text/css">
</style>
5、浏览器访问此路由
完美运行，亲测好使