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

longlongago~~2025-09-30 10:26

提示：vue2 + tinymce@5

### 文章目录

  • [@[TOC](文章目录)](#文章目录 @TOC 前言 一、行内富文本编辑器工具栏自定义class 二、修改样式 三、展示数学公式 四、添加自定义按钮 四、添加自定义下拉框 总结)
  • [前言](#文章目录 @TOC 前言 一、行内富文本编辑器工具栏自定义class 二、修改样式 三、展示数学公式 四、添加自定义按钮 四、添加自定义下拉框 总结)
  • [一、行内富文本编辑器工具栏自定义class](#文章目录 @TOC 前言 一、行内富文本编辑器工具栏自定义class 二、修改样式 三、展示数学公式 四、添加自定义按钮 四、添加自定义下拉框 总结)
  • [二、修改样式](#文章目录 @TOC 前言 一、行内富文本编辑器工具栏自定义class 二、修改样式 三、展示数学公式 四、添加自定义按钮 四、添加自定义下拉框 总结)
  • [三、展示数学公式](#文章目录 @TOC 前言 一、行内富文本编辑器工具栏自定义class 二、修改样式 三、展示数学公式 四、添加自定义按钮 四、添加自定义下拉框 总结)
  • [四、添加自定义按钮](#文章目录 @TOC 前言 一、行内富文本编辑器工具栏自定义class 二、修改样式 三、展示数学公式 四、添加自定义按钮 四、添加自定义下拉框 总结)
  • [四、添加自定义下拉框](#文章目录 @TOC 前言 一、行内富文本编辑器工具栏自定义class 二、修改样式 三、展示数学公式 四、添加自定义按钮 四、添加自定义下拉框 总结)
  • [总结](#文章目录 @TOC 前言 一、行内富文本编辑器工具栏自定义class 二、修改样式 三、展示数学公式 四、添加自定义按钮 四、添加自定义下拉框 总结)

前言

使用富文本编辑器

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

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

c 复制代码 
<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',
        // 自定义icons
        icons: '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，方便层级嵌套

c 复制代码 
npm install sass-loader node-sass --save-dev

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

解决方案：配置webpack

c 复制代码 
"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

c 复制代码 
<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',
        // 自定义icons
        icons: '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

c 复制代码 
npm i katex vue-katex-auto-render --save-dev

1、src/main.js

c 复制代码 
import "katex/dist/katex.min.css";
import katexAutoRender from 'vue-katex-auto-render';

Vue.directive('katex', katexAutoRender);

2、editor/Index.vue

c 复制代码 
<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',
        // 自定义icons
        icons: '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

c 复制代码 
<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") {
          // 增加字体大小，最大200px
          if (fontSize < 200) fontSize++;
        } else {
          // 减少字体大小，最小12px
          if (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',
        // 自定义icons
        icons: '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

c 复制代码 
<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") {
          // 增加字体大小，最大200px
          if (fontSize < 200) fontSize++;
        } else {
          // 减少字体大小，最小12px
          if (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',
        // 自定义icons
        icons: '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>

总结

踩坑路漫漫长@~@

相关推荐
玉宇夕落8 分钟前
JavaScript 执行状态全景图：从调用栈到事件循环，深入理解异步机制
javascript
牧野星辰11 分钟前
eslint你不懂的都在这里，不信你进来看嘛~
前端·eslint
FogLetter11 分钟前
设计模式奇幻漂流：从单例孤岛到工厂流水线
前端·设计模式
ohyeah11 分钟前
深入理解 JavaScript 数组：从创建到遍历的完整指南
前端·javascript
顾三殇12 分钟前
【TRAE】AI 编程：颠覆全栈开发，基于 TRAE AI 编程完成 Vue 3 + Node.js + MySQL 企业级项目实战，从环境搭建到部署上线
vue.js·ai编程·trae·ai 开发工具
逛逛GitHub13 分钟前
GitHub 开源 AI 好玩神器，自动记录你的一天。
前端·github
hollyhuang33 分钟前
正则校验：校验只能输入数字且首位不能是0
前端
一室易安35 分钟前
模仿elementUI 中Carousel 走马灯卡片模式 type=“card“ 的自定义轮播组件 图片之间有宽度
前端·javascript·elementui
在下胡三汉40 分钟前
创建轻量级 3D 资产 - Three.js 中的 GLTF 案例
开发语言·javascript·3d
脸大是真的好~44 分钟前
黑马JAVAWeb -Vue工程化 - Element Plus- 表格-分页条-中文语言包-对话框-Form表单
前端·javascript·vue.js
热门推荐
01GitHub 镜像站点02UV安装并设置国内源03综合整理：pdf预览显示：你尝试预览的文件可能对你的计算机有害。如果你信任此文件以及其来源，请打开此文件以看其内容，如何解决以正常预览文件04Linux下V2Ray安装配置指南05安娜的档案(Anna’s Archive) 镜像网站/国内最新可访问入口（持续更新）06BongoCat - 跨平台键盘猫动画工具07Labelme从安装到标注：零基础完整指南08《大数据技术原理与应用》实验报告三 熟悉HBase常用操作09看了下昨日泄露的苹果 App Store 源码……10智能库存管理的需求预测模型：从业务痛点到落地代码的完整实践