TinyMCE v6.7.1中mceAddEditor无法使用的问题排查

安全阿岳

2026-7-8

TinyMCE v6动态添加编辑器报错的解决方法

1. 修正命令名错误

你写错了执行命令的名称，正确的命令是mceAddEditor而非mceAddEdit，这是导致问题的直接原因之一。

2. v6中`mceAddEditor`的正确用法

在TinyMCE v6中，mceAddEditor命令需要传入包含目标元素ID的配置对象，示例代码如下：

var comment = 'G' + count + '_fee';
// 先确认目标textarea已存在于DOM中
if (document.getElementById(comment)) {
    tinyMCE.execCommand('mceAddEditor', false, {
        id: comment,
        // 可按需添加该编辑器的专属配置，若无则继承全局配置
        plugins: 'lists link code',
        toolbar: 'undo redo | bold italic | code'
    });
}

3. 报错原因分析

Uncaught TypeError: Cannot set properties of undefined (setting 'external_plugins')通常由以下情况导致：

命令名称拼写错误（你之前的mceAddEdit属于此类）
执行命令时，目标textarea尚未渲染到DOM中
未正确初始化TinyMCE全局配置，导致配置对象缺失必要属性

4. v6更推荐的初始化方式

TinyMCE v6官方更推荐直接使用tinymce.init()来动态初始化编辑器，代码逻辑更直观：

var comment = 'G' + count + '_fee';
tinymce.init({
    selector: '#' + comment,
    // 全局或专属配置项
    plugins: 'advlist autolink lists link image charmap print preview anchor',
    toolbar: 'undo redo | formatselect | bold italic backcolor | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | removeformat | help'
});