富文本编辑器Tinymce的使用、语言包配置、工具栏与工具栏组添加

提示：vue2 + tinymce@5

前言

使用富文本编辑器

一、安装tinymce

1、安装

npm install tinymce@5.10.9 --save

使用5.10.9版本

二、引入tinymce

tinymce官方文档

1、editor/Index.vue

<template><div class="editor_box"><textarea name="" id="editorId"></textarea></div>
</template><script>
import tinymce from 'tinymce';
// 主题
import 'tinymce/themes/silver/theme.js';
// 图标
import 'tinymce//icons/default/icons.js';
// 工具
import 'tinymce/plugins/image/plugin.js';
import 'tinymce/plugins/code/plugin.js';export default {name: 'Editor',data () {return {}},mounted(){this.initTinymce();},methods:{initTinymce(){tinymce.init({selector: '#editorId',plugins: ["code","image"],toolbar: " undo redo | styles | bold italic underline strikethrough | alignleft aligncenter alignright alignjustify | outdent indent | image | code ",});},},
}
</script>
<style scoped></style>

三、使用中文语言包

语言包下载地址–选择Chinese Simplified语言包
替换语言包文档

下载好的语言包放在目录：static/tinymce/langs/zh_CN.js
1、editor/Index.vue

<template><div class="editor_box"><textarea name="" id="editorId"></textarea></div>
</template><script>
import tinymce from 'tinymce';
// 主题
import 'tinymce/themes/silver/theme.js';
// 图标
import 'tinymce//icons/default/icons.js';
// 工具
import 'tinymce/plugins/image/plugin.js';
import 'tinymce/plugins/code/plugin.js';export default {name: 'Editor',data () {return {}},mounted(){this.initTinymce();},methods:{initTinymce(){tinymce.init({selector: '#editorId',plugins: ["code","image"],toolbar: " undo redo | styles | bold italic underline strikethrough | alignleft aligncenter alignright alignjustify | outdent indent | image | code ",language_url:"static/tinymce/langs/zh_CN.js",language: "zh_CN"});},},
}
</script>
<style scoped></style>

四、去掉顶部menubar、底部statusbar

1、editor/Index.vue

<template><div class="editor_box"><textarea name="" id="editorId"></textarea></div>
</template><script>
import tinymce from 'tinymce';
// 主题
import 'tinymce/themes/silver/theme.js';
// 图标
import 'tinymce//icons/default/icons.js';
// 工具
import 'tinymce/plugins/image/plugin.js';
import 'tinymce/plugins/code/plugin.js';export default {name: 'Editor',data () {return {}},mounted(){this.initTinymce();},methods:{initTinymce(){tinymce.init({selector: '#editorId',plugins: ["code","image"],menubar:"",statusbar: false,toolbar: " undo redo | styles | bold italic underline strikethrough | alignleft aligncenter alignright alignjustify | outdent indent | image | code ",language_url:"static/tinymce/langs/zh_CN.js",language: "zh_CN"});},},
}
</script>
<style scoped></style>

五、添加基础工具

1、editor/Index.vue

<template><div class="editor_box"><textarea name="" id="editorId"></textarea></div>
</template><script>
import tinymce from 'tinymce';
// 主题
import 'tinymce/themes/silver/theme.js';
// 图标
import 'tinymce//icons/default/icons.js';
// 工具
import 'tinymce/plugins/image/plugin.js';
import 'tinymce/plugins/code/plugin.js';export default {name: 'Editor',data () {return {}},mounted(){this.initTinymce();},methods:{initTinymce(){tinymce.init({selector: '#editorId',plugins: ["code","image"],// 控制编辑器内容样式content_css:['static/tinymce/css/index.css','static/tinymce/css/test.css'],// 允许编辑器跨域访问css文件content_css_cors: true,// 顶部menu栏menubar:"",// 底部状态栏statusbar: false,// 工具栏toolbar: "undo redo | formatting | text | fontselect fontsizeselect forecolor | lineheight  | bold italic underline strikethrough | alignleft aligncenter alignright alignjustify | outdent indent | image | code ",// 字体列表font_formats: ["黑体", "仿宋", "楷体", "宋体", "GB Pinyinok-A", "iTeach拼音", "方正综艺简体", "微软雅黑", "汉仪糯米团W", "方正楷体简体", "方正粗圆简体", "方正准圆简体", "华文琥珀", "汉仪铸字杂货铺简", "方正胖娃简体", "方正楷体拼音字库", "Microsoft YaHei", "Arial", "Arial Black", "Arial Rounded Bold", "Comic Sans MS", "Times New Roman", "Chalkboard", "MarkerFelt", "Sassoon Infant", "Century Gothic", "calibri", "Jotting", "Kinqsoft Phonetic Plain", "Marydale", "SCRIPT1 Rager Hevvy", "Segoe Print", "GCFruBol", "GCFruRom", "JetBrains Mono", "DIN Condensed"].join(';'),// 字号列表fontsize_formats: "14px 16px 18px 20px 24px 28px 32px 36px 40px",// 行高列表line_height_formats: '1 1.2 1.4 1.6 2',// 语言包地址language_url:"static/tinymce/langs/zh_CN.js",// 语言language: "zh_CN"});},},
}
</script>
<style scoped></style>

避坑–坑爹的官方文档~~ 文档给出的是toolbar:“fontfamily fontsize fontsizeinput”
实际使用:toolbar:“fontselect fontsizeselect”

五、合并工具组

1、editor/Index.vue

<template><div class="editor_box"><textarea name="" id="editorId"></textarea></div>
</template><script>
import tinymce from 'tinymce';
// 主题
import 'tinymce/themes/silver/theme.js';
// 图标
import 'tinymce//icons/default/icons.js';
// 工具
import 'tinymce/plugins/image/plugin.js';
import 'tinymce/plugins/code/plugin.js';export default {name: 'Editor',data () {return {}},mounted(){this.initTinymce();},methods:{initTinymce(){tinymce.init({selector: '#editorId',plugins: ["code","image"],// 控制编辑器内容样式content_css:['static/tinymce/css/index.css','static/tinymce/css/test.css'],// 允许编辑器跨域访问css文件content_css_cors: true,// 顶部menu栏menubar:"",// 底部状态栏statusbar: false,// 工具栏toolbar: "undo redo | formatting | text | fontselect fontsizeselect forecolor | lineheight  | bold italic underline strikethrough | alignleft aligncenter alignright alignjustify | outdent indent | image | code ",// 工具组toolbar_groups: {formatting: {icon: 'bold',tooltip: 'Formatting',items: 'bold italic underline strikethrough | superscript subscript'},text: {icon: 'format',tooltip: 'text',items: 'fontselect fontsizeselect forecolor | superscript subscript'}},// 字体列表font_formats: ["黑体", "仿宋", "楷体", "宋体", "GB Pinyinok-A", "iTeach拼音", "方正综艺简体", "微软雅黑", "汉仪糯米团W", "方正楷体简体", "方正粗圆简体", "方正准圆简体", "华文琥珀", "汉仪铸字杂货铺简", "方正胖娃简体", "方正楷体拼音字库", "Microsoft YaHei", "Arial", "Arial Black", "Arial Rounded Bold", "Comic Sans MS", "Times New Roman", "Chalkboard", "MarkerFelt", "Sassoon Infant", "Century Gothic", "calibri", "Jotting", "Kinqsoft Phonetic Plain", "Marydale", "SCRIPT1 Rager Hevvy", "Segoe Print", "GCFruBol", "GCFruRom", "JetBrains Mono", "DIN Condensed"].join(';'),// 字号列表fontsize_formats: "14px 16px 18px 20px 24px 28px 32px 36px 40px",// 行高列表line_height_formats: '1 1.2 1.4 1.6 2',// 语言包地址language_url:"static/tinymce/langs/zh_CN.js",// 语言language: "zh_CN"});},},
}
</script>
<style scoped></style>

总结

踩坑路漫漫长@~@