先來對比一下各個編輯器
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、瀏覽器訪問此路由
完美運行，親測好使