在 TinyMCE-4 颜色选择器上为 "Transparent" 添加颜色框

Question

我想要 TinyMCE 颜色选择器的一个选项，选择透明作为颜色，这样一个字符 ("bullet") 仍会存在并占用 space 但不会显示如果它的颜色是透明的。

有一个 "X" 框选项显示 "No color" 但这似乎使颜色变黑，而不是透明。

有谁知道如何向这个颜色选择器添加透明颜色选项，甚至使 "X" 框实现透明而不是黑色？

感谢任何想法。

Answer 1

我相信我能做到，我做了一些快速测试，它似乎工作正常。

我有最新版本的 TinyMCE (4.1.10_dev) 来访问 textcolor 插件的非缩小 javascript 有这个指令：

if (value == 'transparent') {
    resetColor();
} else {
    selectColor(value);
}

这里发生了什么？当您选择一种颜色时，它会运行 selectColor，它将 selected 文本包裹在 selected 颜色的范围内。但是，当您 select 无颜色时，它会删除此颜色跨度（这就是为什么它会返回默认颜色黑色）而不是将其设置为透明。

所以如果你这样做：

//if (value == 'transparent') {
//  resetColor();
//} else {
    selectColor(value);
//}

它不会删除跨度，而是将其更改为 'transparent'。

一件重要的事情是 tinyMCE 自动获取插件脚本，所以它只适用于缩小版本，所以在你做了这些更改之后，你必须将脚本缩小到 plugin.min.js 并把它在 textcolro 插件的文件夹上覆盖那里的文件夹。

希望对您有所帮助。

Answer 2

颜色选择器中的 × 按钮删除任何自定义颜色，它不添加零不透明度颜色。

正如您在查看 the source code or trying the full example 时所看到的，包含的颜色选择器插件不支持 rgba() 或不透明度。不幸的是只有 rgb() 和 hex。

您可能需要 create your own small plugin 添加该能力。有多种选择，例如：

创建一个 CSS class，您可以将其添加到编辑器中的元素。然后在您自己的 CSS 文件中施展您的色彩魔法。
在工具栏中创建一个新按钮，使元素透明。

我个人会选择选项二，如下所示：

tinymce.init({
    selector: 'textarea',
    plugins: 'nocolour',
    toolbar: 'nocolour',
    external_plugins: {
        "nocolour": "url_to_your/nocolour.js"
    }
});

和nocolour.js：

tinymce.PluginManager.add('nocolour', function(editor, url) {
    // Add a button that opens a window
    editor.addButton('nocolour', {
        text: 'Remove Colour',
        icon: false,
        onclick: function() {
            editor.undoManager.transact(function() {
                editor.focus();
                // Here is where you add code to remove the colour
                editor.nodeChanged();
            });
        }
    });
});

Answer 3

Rafael 的解决方案对我有用。我只是想更多地记录它并展示它在 TinyMCE 4.1.7 中的样子。

当您单击文本颜色网格中的 "X" 时，"value" 变量会获得 "transparent," 而不是 colorMap 中的十六进制值。

textcolor插件中的相关代码为：

value = e.target.getAttribute('data-mce-color');  // the hex color from  the colorMap square that was clicked. "transparent" if X was clicked
        if (value) {
            if (this.lastId) {
                document.getElementById(this.lastId).setAttribute('aria-selected', false);
            }

            e.target.setAttribute('aria-selected', true);
            this.lastId = e.target.id;

//          if (value == 'transparent') {  // occurs if you select the "X" square
//              removeFormat(buttonCtrl.settings.format);
//              buttonCtrl.hidePanel();
//              return;
//          }

            selectColor(value);

我注释掉的五行删除了 selected 文本的格式，将其保留为黑色，这似乎没有用。如果您想要黑色文本，您可以 select colorMap 中的黑色方块。通过 selectColor(value) 值 = "transparent" 将透明设置为颜色。

在 TinyMCE-4 颜色选择器上为 "Transparent" 添加颜色框

Adding a color box for "Transparent" on the TinyMCE-4 color picker

tinymce-4