環(huán)境
VUE webpack tinymce4
額外插件
- 用于優(yōu)化本地圖片上傳的第三方插件：tinymce-imageupload
- 用于加強(qiáng)word源復(fù)制粘帖的官方插件（這是收費(fèi)插件疑枯，我這里不提供資源屠橄，只是教大家怎么配置）：wordpress
開擼
安裝tinymce-vue
npm install @tinymce/tinymce-vue -S
安裝tinymce 4.x.x
npm install tinymce@4.5.10 -S
安裝好之后第焰，需要將node_modules目錄下面的tinymce/skins目錄放到一個(gè)可以訪問到的地方（一般來說是static目錄逃魄，也可以是CDN之類的，反正能訪問到就行）
<u>特別注意：本文內(nèi)容是基于tinymce4所搭建的滓技，現(xiàn)在最新的已經(jīng)是5.x.x的版本了竣稽，結(jié)構(gòu)目錄有所改變，需要調(diào)整skin_url和導(dǎo)入對(duì)應(yīng)的主題磷支。</u>
安裝中文語言包
官網(wǎng)語言包下載地址
選擇你想要的語言下載即可（別跟我說不認(rèn)識(shí)Chinese (China)）
下載后將得到zh_CN.js文件（以簡(jiǎn)體中文為例），同樣食寡，放到一個(gè)你能訪問到的地方（static目錄或CDN）
引入依賴項(xiàng)
import tinymce from 'tinymce/tinymce';
import 'tinymce/themes/modern/theme'; // 具體有有些默認(rèn)主題雾狈，可以在`node_modules`的`tinymce`下找到（這個(gè)據(jù)我所知，也是必須要引入的）
import Editor from '@tinymce/tinymce-vue';
初始化編輯器
添加配置對(duì)象：
content: '',
editorInit: {
language: 'zh_CN', // 指定語言
language_url: '/static/tinymce/zh_CN.js', // 指定語言包地址
skin_url: '/static/tinymce4/skins/lightgray', // 指定主題地址（必須項(xiàng)抵皱，否則編輯器不能成功渲染出來）
height: 300
}
在templete中添加一個(gè)Editor元素
<editor v-model='content' :init='editorInit'></editor>
完成善榛！應(yīng)該就可以看到頁面能成功將編輯器渲染出來了。
添加插件
tinymce已自帶了很多常用插件呻畸，但是很多默認(rèn)是不啟用的移盆，需要主動(dòng)引用并配置才行，這里我們以添加全屏插件fullscreen為例：
- 引入
import 'tinymce/plugins/fullscreen';
在editorInit中配置
editorInit: {
...
plugins: "fullscreen", // 多個(gè)插件擂错，用空格分隔
...
}
常用配置
editorInit: {
...
statusbar: false, // 是否顯示底部狀態(tài)欄
menubar: false, // 配置菜單欄（設(shè)置為false則隱藏）
toolbar: "fullscreen | bold italic", // 工具之間用空格分隔味滞，| 表示顯示一個(gè)分塊符
// editor為當(dāng)前編輯器的實(shí)例對(duì)象
setup: function(editor) {
// 這里為給編輯器綁定一個(gè)單擊事件
editor.on('click', function(e) {
console.log('Editor was clicked');
});
}
}
...
}
支持粘帖圖片
- 引入
import 'tinymce/plugins/paste'
- 添加配置
editorInit: {
...
paste_data_images: true, // 設(shè)置為允許粘帖圖片
// 上傳方式1：填寫images_upload_url和images_upload_base_path
images_upload_url: '/upload', // 圖片上傳地址
images_upload_base_path: '/some/basepath',
// 上傳方式2（建議這種）：自定義上傳邏輯
images_upload_handler: function (blobInfo, success, failure) {
}
...
}
優(yōu)化圖片上傳
其實(shí)我覺得開啟支持粘帖圖片和powerpaste之后，就不需要這個(gè)了钮呀。如果有這方面的需求剑鞍，可以參考這個(gè)。安裝比較簡(jiǎn)單爽醋，給個(gè)github地址蚁署，自己看下吧，和普通plugins基本無異蚂四。
https://github.com/x-shadow-x/tinymce-imageupload
效果圖：
PS：這個(gè)插件在tinymce5上無法使用光戈，而且配置上不是那么的靈活，如果想用遂赠，建議基于改插件久妆，做一些修改。
添加powerpaste插件
- 需要自行下載好對(duì)應(yīng)版本的
powerpaste（實(shí)在找不到可以私信我）跷睦，我下載的是powerpast4.0.1-317
image - 放到一個(gè)一個(gè)你能訪問到的地方
- 很重要的一步筷弦，我看到網(wǎng)上很多“教程”說如果是用npm安裝tinymce不能使用powerpaste，其實(shí)呢，只要花點(diǎn)心思讀讀官方文檔烂琴，就可以發(fā)現(xiàn)爹殊，其實(shí)是可以的，只要利用
external_plugins配置一下就OJBK了
editorInit: {
...
// 添加擴(kuò)展插件
external_plugins: {
'powerpaste': '/static/tinymce/powerpaste/plugin.min.js'
}
powerpaste_word_import: 'propmt',// 參數(shù)可以是propmt, merge, clear奸绷，效果自行切換對(duì)比
powerpaste_html_import: 'propmt',// propmt, merge, clear
powerpaste_allow_local_images: true,
...
}
- powerpaste詳細(xì)配置項(xiàng)可以再參考powerpaste插件使用手冊(cè)
-
添加好之后梗夸，當(dāng)從word復(fù)制內(nèi)容到tinymce時(shí)，便會(huì)提示是否要保留格式：
image
PS:如果是從WPS復(fù)制帶有圖片的內(nèi)容号醉，會(huì)無法成功粘帖圖片反症，從office復(fù)制是可以的。
切換/生成主題
主題生成網(wǎng)站：http://skin.tiny.cloud/
下載下來的主題怎么用扣癣？
很簡(jiǎn)單惰帽，用skin_url配置一下目錄地址就OK了
editorInit: {
...
skin_url: '/static/tinymce4/skins/myskin',
...
}
