如何修改TinyMCE工具栏上标（Superscript）按钮的title属性值为footnote

在你的TinyMCE初始化配置中新增setup配置项，在编辑器初始化完成后定位上标按钮修改属性即可，修改后的完整代码如下：

initTinyMCE()
function initTinyMCE(selector = '.js-tinymce') {
    tinymce.init({
        selector: selector,
        skin: false,
        branding: false,
        menubar: false,
        height: 500,
        toolbar:
            'undo redo | formatselect | bold italic underline superscript | bullist numlist | removeformat code',
        plugins: [
            "code", "paste", "lists"
        ],
        paste_as_text: true,
        block_formats: 'Paragraph=p; Header 3=h3; Header 4=h4; Header 5=h5; Header Underline=h6; ',
        content_css: '/css/tinymce.css?' + new Date().getTime(),
        // 新增以下配置
        setup: function(editor) {
            editor.on('init', function() {
                // 获取当前编辑器容器内的上标按钮
                const supBtn = editor.getContainer().querySelector('button[title="Superscript"]')
                if (supBtn) {
                    supBtn.setAttribute('title', 'footnote')
                    supBtn.setAttribute('aria-label', 'footnote')
                }
            })
        }
    })
}

逻辑说明 #

• setup是TinyMCE官方提供的初始化钩子，会在编辑器实例创建时触发
• 监听init事件，确保工具栏所有按钮已经渲染完成再操作DOM，不会出现找不到元素的问题
• 通过editor.getContainer()获取当前编辑器的外层容器DOM，避免和页面上其他TinyMCE实例冲突
• 同时修改title属性（控制hover提示）和aria-label属性（无障碍访问提示）

之前尝试失败的原因 #

• jQuery直接在DOM加载完成后执行的时机早于TinyMCE工具栏渲染完成时间，所以找不到对应元素
• formats和style_formats配置用于定义文本格式规则、自定义格式下拉菜单选项，不会修改默认工具栏按钮的提示文本

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