如何为已有的CKEditor工具栏按钮添加新功能（含数学公式）

你用的是CKEditor的full nightly包，这类版本内置了多数常用插件，直接配置就能实现需求：

1. 启用内置数学公式功能 #

CKEditor full版本默认包含数学公式相关插件，只需在初始化时修改配置，把对应按钮加入工具栏：

// 假设编辑器绑定的textarea id为editor1
CKEDITOR.replace('editor1', {
    // 保留原有工具栏按钮的基础上，新增数学公式和特殊符号按钮
    toolbar: [
        'Bold', 'Italic', 'Underline', // 你的原有按钮
        'Mathjax', 'SpecialChar'       // 新增功能按钮
    ],
    // 配置MathJax渲染路径（full包可能内置，也可手动指定）
    mathJaxLib: 'https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS_HTML'
});

2. 给已有图标绑定额外功能 #

如果要让现有工具栏图标触发数学公式插入等额外操作，可通过重写命令实现：

var editor = CKEDITOR.replace('editor1');

editor.on('instanceReady', function() {
    // 获取原有按钮的命令（比如加粗按钮）
    var originalCmd = editor.getCommand('bold');
    // 保存原执行逻辑
    var originalExec = originalCmd.exec;
    
    // 重写命令执行函数
    originalCmd.exec = function(editor) {
        // 先执行原有功能
        originalExec.call(this, editor);
        // 追加插入数学公式（可替换为弹出公式输入框的逻辑）
        editor.insertHtml('$$E=mc^2$$');
    };
});

3. 自定义特色符号面板 #

要添加专属特殊符号或公式，可扩展SpecialChar的符号列表：

CKEDITOR.replace('editor1', {
    // 自定义符号集合，保留默认符号的同时新增自定义项
    specialChars: CKEDITOR.config.specialChars.concat([
        ['\\(\\alpha\\)', '希腊字母α'],
        ['$$\\sum_{i=1}^n i$$', '求和公式'],
        ['©', '版权符号']
    ]),
    toolbar: ['SpecialChar'] // 确保工具栏包含该按钮
});

CKEditor 5版本适配（若使用的是CKEditor 5 nightly） #

如果是CKEditor 5，配置逻辑略有不同：

ClassicEditor
    .create(document.querySelector('#editor'), {
        toolbar: [
            'bold', 'italic', 'math', 'specialCharacters' // 新增功能按钮
        ],
        // 扩展特殊符号列表
        specialCharacters: [
            ...ClassicEditor.defaultConfig.specialCharacters,
            { title: 'α', character: 'α' },
            { title: '求和公式', character: '$$\\sum_{i=1}^n i$$' }
        ]
    })
    .catch(error => {
        console.error(error);
    });

内容的提问来源于stack exchange，提问作者abu abu