之前有項目需要用到富文本編輯器，在網上找了好幾個后，最終選擇了這個功能強大，擴展性強的tinymce
tinymce中文文檔地址（不全）：http://tinymce.ax-z.cn/
tinymce英文原版文檔地址：https://www.tiny.cloud/docs/demo/
接下來大致講一下一個小demo（vue項目 + tinymce）
1、npm 安裝 tinymce 和 @packy-tang/vue-tinymce
npm i tinymce @packy-tang/vue-tinymce
2、復制node_modules/tinymce目錄下所有文件至public/目錄下
如下圖
然后在public/index.html頁面全局引入tinymce
<body>
<div id="app"></div>
<script src="/tinymce/tinymce.min.js"></script>
</body>
3、漢化
tinymce需要額外做漢化處理，中文漢化包地址：zh_CN.js
將 zh_CN.js文件直接放到public/tinymce/langs/目錄下就行了，后續配置（下面會講）時加上{language: 'zh_CN'}就能實現。
4、引入
在vue項目main.js文件中
// tinymce編輯器
import tinymce from 'tinymce'
import VueTinymce from '@packy-tang/vue-tinymce'
Vue.prototype.$tinymce = tinymce
Vue.use(VueTinymce)
5、使用
tinymce有多種編輯器模式，具體可以看文檔了解，
筆者一開始使用的是經典模式，但經典模式使用的是iframe，不方便影響編輯器內部的東西，於是采用內聯模式，但是內聯模式是需要
聚焦后才會出現編輯工具欄，不符合需求，所以采用設置聚焦的元素為body的方法讓編輯工具欄一直顯示
代碼如下
<template>
<div class="tinymce-editor">
<div id="tinymceToolbar"></div>
<vue-tinymce
ref="editor"
class="editor overflow-scroll"
v-model="content"
:setting="setting"
:setup="setup"
@keyup.native="$emit('editorChange', content)"
/>
</div>
</template>
<script>
export default {
name: 'tinymceEditor',
components: {
},
data() {
return {
// 編輯器內容
content: '',
// 編輯器設置
setting: {
inline: true, // 設置內斂模式
menubar: false, // 隱藏菜單欄
toolbar:
'code undo redo restoredraft | cut copy paste pastetext | forecolor backcolor bold italic underline strikethrough link anchor | alignleft aligncenter alignright alignjustify outdent indent | \
styleselect formatselect fontselect fontsizeselect | bullist numlist | blockquote subscript superscript removeformat | \
table image media charmap emoticons hr pagebreak insertdatetime print preview | fullscreen | bdmap indent2em lineheight formatpainter axupimgs | myUpload',
// 工具欄，根據需要寫對應的工具名稱，順序及分割線等等，這里的最后的 ‘myUpload’ 是下面setup里的自定義插件
toolbar_mode: 'sliding', // 工具欄模式，這里是滑行模式（當屏幕過小時，多余的工具會隱藏，點擊更多按鈕會出現其他工具，這里配置出現的特效）
plugins: 'print preview searchreplace autolink directionality visualblocks visualchars fullscreen image link media template code
codesample table charmap hr pagebreak nonbreaking anchor insertdatetime advlist lists wordcount imagetools textpattern help
emoticons autosave bdmap indent2em autoresize formatpainter axupimgs', // 需要用到的功能插件，如鏈接，列表等等
language: 'zh_CN', // 語言，漢化
branding: false, // 隱藏品牌，隱藏狀態欄中顯示的“ Powered by Tiny ”鏈接
resize: false, // 是否可以縮放編輯器
elementpath: false, // 在編輯器底部的狀態欄中禁用元素路徑。
fixed_toolbar_container: '#tinymceToolbar', // 可以設置元素選擇器指定工具欄嵌套在哪個元素里面
custom_ui_selector: 'body', // 聚焦的元素
noneditable_noneditable_class: 'mceNonEditable', // 使用此選項，您可以指定TinyMCE將使用的類名稱，以確定使用noneditable插件時可編輯哪些內容區域。主要用入你想以代碼的形式添加某些內容，並給這些內容設置類名，使他們不可編輯，只能整個刪除
init_instance_callback: editor => {
editor.focus() // 初始化聚焦，讓內聯模式的編輯器工具顯示
},
},
}
},
methods: {
/**
* @description: 編輯器setup
* @author: Depp_ck
*/
setup(editor) {
// 自定義插件實現自定義工具欄按鈕功能
editor.ui.registry.addButton('myUpload', {
tooltip: '上傳',
icon: 'browse',
onAction: () => {
console.log('點擊了上傳')
},
})
},
},
}
</script>
<style lang="scss" scoped>
.tinymce-editor {
padding: 20px;
position: relative;
.editor {
padding: 10px;
border: 1px solid #ddd;
height: 410px;
font-size: 16px;
line-height: 1.4;
overflow-y: scroll;
}
}
</style>
