富文本编辑器Tinymce的使用、行内富文本编辑器工具栏自定义class、katex渲染数学公式

提示：vue2 + tinymce@5

前言

使用富文本编辑器

一、行内富文本编辑器工具栏自定义class

1、防止直接使用class为tox-tinymce修改样式造成全局污染，添加自定义class名称custom_tinymce_box

<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',setup: (ed) => {if (ed&&ed.on) {// 监听编辑器失焦事件，触发内容变化ed.on("init", () => {const container = ed.getContainer();container.classList.add('custom_tinymce_box');});}}});},},
}
</script>
<style scoped>
.editor_content{border: 1px solid #333;
}
</style>

添加前

添加后

二、修改样式

1、安装scss，方便层级嵌套

npm install sass-loader node-sass --save-dev

安装遇到问题：webpack 3 + Vue2项目匹配的依赖版本不对问题处理

解决方案：配置webpack

"node-sass": "^4.14.1",
"sass-loader": "^7.3.1",
"vue-loader": "13.7.3",
"vue-style-loader": "^3.0.1",
"vue-template-compiler": "2.5.2",
"webpack": "^3.6.0",

2、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',setup: (ed) => {if (ed&&ed.on) {// 监听编辑器失焦事件，触发内容变化ed.on("init", () => {const container = ed.getContainer();container.classList.add('custom_tinymce_box');});}}});},},
}
</script>
<style scoped>
.editor_box{padding: 60px 20px 20px;
}
.editor_content{border: 1px solid #333;width: 400px;
}
</style>
<style lang="scss">
.custom_tinymce_box{border-radius: 4px!important;border: 1px solid #ccc!important;box-sizing: border-box;padding: 6px;transform: translateY(-14px);.tox-toolbar__primary,.tox-toolbar-overlord,.tox-editor-container,.tox-editor-header{border: 0!important;}.tox-toolbar__group{height: 24px;.tox-tbtn{width: 24px;height: 20px;line-height: 20px;padding: 0;margin: 0;}}
}
</style>

三、展示数学公式

安装vue-katex

npm i katex vue-katex-auto-render --save-dev

1、src/main.js

import "katex/dist/katex.min.css";
import katexAutoRender from 'vue-katex-auto-render';Vue.directive('katex', katexAutoRender);

2、editor/Index.vue

<template><div class="editor_box"><div class="editor_content" name="" id="editorId"></div><div class="editor_content_show" v-katex v-html="contennt"></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 {contennt:'',}},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',setup: (ed) => {if (ed&&ed.on) {// 监听编辑器失焦事件，触发内容变化ed.on("init", () => {const container = ed.getContainer();container.classList.add('custom_tinymce_box');});ed.on("change", () => {this.contennt = ed.getContent();});}}});},},
}
</script>
<style scoped>
.editor_box{padding: 60px 20px 20px;
}
.editor_content{border: 1px solid #333;width: 400px;
}
</style>
<style lang="scss">
.custom_tinymce_box{border-radius: 4px!important;border: 1px solid #ccc!important;box-sizing: border-box;padding: 6px;transform: translateY(-14px);.tox-toolbar__primary,.tox-toolbar-overlord,.tox-editor-container,.tox-editor-header{border: 0!important;}.tox-toolbar__group{height: 24px;.tox-tbtn{width: 24px;height: 20px;line-height: 20px;padding: 0;margin: 0;}}
}
</style>

四、添加自定义按钮

1、editor/Index.vue

<template><div class="editor_box"><div class="editor_content" name="" id="editorId"></div><div class="editor_content_show" v-katex v-html="contennt"></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 {editor:null,contennt:'',}},mounted(){this.initTinymce();},methods:{changeFontSize(type) {// 检查编辑器实例是否存在if (!this.editor ||!this.editor.queryCommandValue ||!this.editor.execCommand) {console.warn("编辑器实例未初始化，无法改变字体大小");return;}try {// 获取当前字体大小let fontSize =parseInt(this.editor.queryCommandValue("fontsize")) || 12;if (type == "add") {// 增加字体大小，最大200pxif (fontSize < 200) fontSize++;} else {// 减少字体大小，最小12pxif (fontSize > 12) fontSize--;}// 执行字体大小命令this.editor.undoManager.transact(() => {this.editor.execCommand("FontSize", false, fontSize + "px");});} catch (error) {console.error("改变字体大小失败:", error);}},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 | A+ A-",// 工具组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',setup: (ed) => {this.editor = ed||{};if (ed&&ed.on) {// 监听编辑器失焦事件，触发内容变化ed.on("init", () => {const container = ed.getContainer();container.classList.add('custom_tinymce_box');});ed.on("change", () => {this.contennt = ed.getContent();});}// 自定义功能按钮const addButtonList = [{name: "A+",text: "A+",tooltip: "放大字体",onAction: () => {this.changeFontSize("add");},},{name: "A-",text: "A-",tooltip: "缩小字体",onAction: () => {this.changeFontSize("minus");},},];// 注册所有自定义按钮到编辑器addButtonList.forEach((item) => {try {ed.ui.registry.addButton(item.name, item);} catch (error) {console.error(`注册按钮 ${item.name} 失败:`, error);}});}});},},
}
</script>
<style scoped>
.editor_box{padding: 60px 20px 20px;
}
.editor_content{border: 1px solid #333;width: 400px;
}
</style>
<style lang="scss">
.custom_tinymce_box{border-radius: 4px!important;border: 1px solid #ccc!important;box-sizing: border-box;padding: 6px;transform: translateY(-14px);.tox-toolbar__primary,.tox-toolbar-overlord,.tox-editor-container,.tox-editor-header{border: 0!important;}.tox-toolbar__group{height: 24px;.tox-tbtn{width: 24px;height: 20px;line-height: 20px;padding: 0;margin: 0;}}
}
</style>

四、添加自定义下拉框

1、editor/Index.vue

<template><div class="editor_box"><div class="editor_content" name="" id="editorId"></div><div class="editor_content_show" v-katex v-html="contennt"></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 {editor:null,contennt:'',}},mounted(){this.initTinymce();},methods:{changeFontSize(type) {// 检查编辑器实例是否存在if (!this.editor ||!this.editor.queryCommandValue ||!this.editor.execCommand) {console.warn("编辑器实例未初始化，无法改变字体大小");return;}try {// 获取当前字体大小let fontSize =parseInt(this.editor.queryCommandValue("fontsize")) || 12;if (type == "add") {// 增加字体大小，最大200pxif (fontSize < 200) fontSize++;} else {// 减少字体大小，最小12pxif (fontSize > 12) fontSize--;}// 执行字体大小命令this.editor.undoManager.transact(() => {this.editor.execCommand("FontSize", false, fontSize + "px");});} catch (error) {console.error("改变字体大小失败:", error);}},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 | A+ A- | textStyle ",// 工具组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',setup: (ed) => {this.editor = ed||{};if (ed&&ed.on) {// 监听编辑器失焦事件，触发内容变化ed.on("init", () => {const container = ed.getContainer();container.classList.add('custom_tinymce_box');});ed.on('focus', function (e) {setTimeout(() => {const sinkElement = document.querySelector('.tox-silver-sink'); // 获取tox-silver-sink元素if (sinkElement) {sinkElement.className += ' custom_tinymce_sink'}}, 0);});ed.on("change", () => {this.contennt = ed.getContent();});}// 自定义功能按钮const addButtonList = [{name: "A+",text: "A+",tooltip: "放大字体",onAction: () => {this.changeFontSize("add");},},{name: "A-",text: "A-",tooltip: "缩小字体",onAction: () => {this.changeFontSize("minus");},},];// 注册所有自定义按钮到编辑器addButtonList.forEach((item) => {try {ed.ui.registry.addButton(item.name, item);} catch (error) {console.error(`注册按钮 ${item.name} 失败:`, error);}});// 自定义下拉列表const textItems = [{icon: 'bold',action: 'bold'},{icon: 'italic',action: 'italic'},{icon: 'underline',action: 'underline'},{icon: 'strike-through',action: 'strikethrough'},];this.editor.ui.registry.addMenuButton('textStyle', {icon: 'bold',tooltip: '文字样式',fetch: (callback) => {const items = [];textItems.forEach(item => {items.push({type: 'menuitem',icon: item.icon,onAction: () => {// 执行字体大小命令this.editor.undoManager.transact(() => {this.editor.execCommand(item.action);});}})})callback(items);}});}});},},
}
</script>
<style scoped>
.editor_box{padding: 60px 20px 20px;
}
.editor_content{border: 1px solid #333;width: 400px;
}
</style>
<style lang="scss">
.custom_tinymce_box{border-radius: 4px!important;border: 1px solid #ccc!important;box-sizing: border-box;padding: 6px;transform: translateY(-14px);.tox-toolbar__primary,.tox-toolbar-overlord,.tox-editor-container,.tox-editor-header{border: 0!important;}.tox-toolbar__group{height: 24px;.tox-tbtn{width: 24px;height: 20px;line-height: 20px;padding: 0;margin: 0;}.tox-tbtn.tox-tbtn--select[aria-label="文字样式"]{width: 36px;}}
}
.custom_tinymce_sink .tox-collection__item-icon svg{fill:#000!important;
}
</style>

总结

踩坑路漫漫长@~@