如何借助TinyMCE为Oracle Apex富文本编辑器默认色板添加颜色

问题背景 #

我在Oracle Apex应用里有个富文本编辑器类型的页面项，默认使用TinyMCE库，想要在默认色板中添加2种自定义颜色，但尝试多种方法都没效果。

我曾尝试在页面项的「初始化JavaScript函数」属性里修改配置：用tinymce.init()虽然能生效，但会破坏Apex原有富文本编辑器的配置；想通过获取现有编辑器实例修改color_map，却始终拿不到实例（对应代码里的/*UPDATE*/部分），具体尝试代码如下：

function (config){

    /*UPDATE */
    // 尝试获取现有编辑器实例
    var existingEditor = tinymce.get('#P1_TESTEADDCOLORS_APEX');

    console.log("print ===>" || existingEditor);

    // 若实例存在则修改color_map
    if (existingEditor) {
        existingEditor.settings.color_map = [
            '000000', 'Black',
            '808080', 'Gray',
            'FFFFFF', 'White',
            'FF0000', 'Red',
            'FFFF00', 'Yellow',
            '008000', 'Green',
            '0000FF', 'Blue'
    ];
    }

    // 尝试刷新编辑器
    existingEditor.execCommand('mceRepaint');

    /*CREATE*/
    /*tinymce.init({
    selector: '#P1_TESTEADDCOLORS_APEX',
    toolbar: 'forecolor backcolor',
    color_map: [
            '000000', 'Black',
            '808080', 'Gray'
        ]
    });*/
    return config;
}

解决方案 #

问题核心在于时机错误：页面项的「初始化JavaScript函数」是在TinyMCE实例创建之前执行的，作用是修改编辑器的初始配置参数，此时编辑器实例还未生成，所以tinymce.get()无法获取到对象。

正确做法是直接修改函数传入的config对象，通过修改初始配置实现色板自定义，既不会破坏Apex原有配置，又能添加自定义颜色：

代码示例 #

function (config) {
    // 保留默认色板的同时添加自定义颜色
    // 先获取默认color_map，若不存在则初始化空数组
    const defaultColors = config.color_map || [];
    // 自定义颜色（格式：'不带#的十六进制码', '颜色名称'）
    const customColors = [
        'FF6B6B', '珊瑚红',
        '4ECDC4', '薄荷绿'
    ];
    // 合并默认颜色与自定义颜色
    config.color_map = defaultColors.concat(customColors);

    return config;
}

操作步骤 #

• 打开目标页面的编辑界面，找到对应的富文本编辑器页面项
• 进入页面项的「属性」面板，找到「高级」分类下的「初始化JavaScript函数」
• 将上述代码粘贴进去，替换原有内容
• 保存页面并运行，即可看到色板中新增了自定义颜色

补充说明 #

• 如果不需要保留默认色板，直接给config.color_map赋值自定义颜色数组即可
• 颜色代码必须是不带#的十六进制字符串，搭配对应的颜色名称

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