富文本编辑器Tinymce的使用、图片可编辑尺寸、自定义plugin(数学公式)、自定义icons

提示：vue2 + tinymce@5

前言

使用富文本编辑器

一、图片可编辑尺寸

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 | align | lineheight | outdent indent | image | code ",// 工具组toolbar_groups: {formatting: {icon: 'bold',tooltip: 'Formatting',items: 'bold italic underline strikethrough'},text: {icon: 'format',tooltip: 'text',items: 'fontselect fontsizeselect forecolor'},text: {icon: 'align',tooltip: 'align-left',items: 'alignleft aligncenter alignright alignjustify'}},// 字体列表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",// 皮肤skin_url:'static/tinymce/skins/ui/oxide',// 图片可编辑image_dimensions: true,});},},
}
</script>
<style scoped></style>

2、过程遇到问题：图片没有可拖拽点位

官方文档上就有拖拽点位

3、排查问题：


4、解决方案

错误方案
排查发现缺少content.css样式 通过引入
import ‘tinymce/skins/ui/oxide/skin.min.css’;
import ‘tinymce/skins/ui/oxide/content.min.css’;
没有效果 @_@~~

正确方案
设置皮肤skin
skin路径：static/tinymce/skins/ui/oxide
配置：skin_url:‘static/tinymce/skins/ui/oxide’,

此处引入图片仅为测试使用，不会构成商业用途，如侵权请联系作者删除，谢谢！

二、改为行内富文本编辑器

1、editor/Index.vue

<template><div class="editor_box"><div class="editor_content" name="" id="editorId"></div></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 | align | lineheight | outdent indent | image | code ",// 工具组toolbar_groups: {formatting: {icon: 'bold',tooltip: 'Formatting',items: 'bold italic underline strikethrough'},text: {icon: 'format',tooltip: 'text',items: 'fontselect fontsizeselect forecolor'},text: {icon: 'align',tooltip: 'align-left',items: 'alignleft aligncenter alignright alignjustify'}},// 字体列表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",// 皮肤skin_url:'static/tinymce/skins/ui/oxide',// 图片可编辑image_dimensions: true,// 行内元素inline: true,});},},
}
</script>
<style scoped>
.editor_content{border: 1px solid #333;
}
</style>

三、添加自定义插件mathjax、kityformula-editor

mathjax官网
kityformula-editor gitee地址

下载好的插件放在目录：static/tinymce/mathjax、static/tinymce/kityformula-editor

1、editor/Index.vue

<template><div class="editor_box"><div class="editor_content" name="" id="editorId"></div></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","kityformula-editor","mathJax"],base_url: 'static/tinymce/',// 控制编辑器内容样式content_css:['static/tinymce/css/index.css','static/tinymce/css/test.css'],// 允许编辑器跨域访问css文件content_css_cors: true,// 顶部menu栏menubar:"",// 底部状态栏statusbar: false,// 工具栏toolbar: "kityformula-editor | mathJax | formatting | text | align | lineheight | outdent indent | image | code ",// 工具组toolbar_groups: {formatting: {icon: 'bold',tooltip: 'Formatting',items: 'bold italic underline strikethrough'},text: {icon: 'format',tooltip: 'text',items: 'fontselect fontsizeselect forecolor'},text: {icon: 'align',tooltip: 'align-left',items: 'alignleft aligncenter alignright alignjustify'}},// 字体列表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",// 皮肤skin_url:'static/tinymce/skins/ui/oxide',// 图片可编辑image_dimensions: true,// 行内元素inline: true,});},},
}
</script>
<style scoped>
.editor_content{border: 1px solid #333;
}
</style>

2、mathJax

3、kityformula-editor

四、生成公式组

1、editor/Index.vue

<template><div class="editor_box"><div class="editor_content" name="" id="editorId"></div></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","kityformula-editor","mathJax"],base_url: 'static/tinymce/',// 控制编辑器内容样式content_css:['static/tinymce/css/index.css','static/tinymce/css/test.css'],// 允许编辑器跨域访问css文件content_css_cors: true,// 顶部menu栏menubar:"",// 底部状态栏statusbar: false,// 工具栏toolbar: " math | formatting | text | align | lineheight | outdent indent | image | code ",// 工具组toolbar_groups: {formatting: {icon: 'bold',tooltip: 'Formatting',items: 'bold italic underline strikethrough'},text: {icon: 'format',tooltip: 'text',items: 'fontselect fontsizeselect forecolor'},align: {icon: 'align-left',tooltip: 'align',items: 'alignleft aligncenter alignright alignjustify'},math: {icon: 'character-count',tooltip: 'math',items: 'mathJax | kityformula-editor'}},// 字体列表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",// 皮肤skin_url:'static/tinymce/skins/ui/oxide',// 图片可编辑image_dimensions: true,// 行内元素inline: true,});},},
}
</script>
<style scoped>
.editor_content{border: 1px solid #333;
}
</style>

五、添加自定义icons

1、editor/Index.vue

<template><div class="editor_box"><div class="editor_content" name="" id="editorId"></div></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","kityformula-editor","mathJax"],base_url: 'static/tinymce/',// 控制编辑器内容样式content_css:['static/tinymce/css/index.css','static/tinymce/css/test.css'],// 允许编辑器跨域访问css文件content_css_cors: true,// 顶部menu栏menubar:"",// 底部状态栏statusbar: false,// 工具栏toolbar: " math | formatting | text | align | lineheight | outdent indent | image | code ",// 工具组toolbar_groups: {formatting: {icon: 'bold',tooltip: 'Formatting',items: 'bold italic underline strikethrough'},text: {icon: 'format',tooltip: 'text',items: 'fontselect fontsizeselect forecolor'},align: {icon: 'align-left',tooltip: 'align',items: 'alignleft aligncenter alignright alignjustify'},math: {icon: 'character-count',tooltip: 'math',items: 'mathJax | kityformula-editor'}},// 字体列表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",// 皮肤skin_url:'static/tinymce/skins/ui/oxide',// 图片可编辑image_dimensions: true,// 行内元素inline: true,// 自定义icon地址icons_url:'static/tinymce/icon/index.js',// 自定义iconsicons: 'customIcons',});},},
}
</script>
<style scoped>
.editor_content{border: 1px solid #333;
}
</style>

总结

踩坑路漫漫长@~@