在 TinyMCE-4 颜色选择器上为“透明”添加颜色框答案

【问题标题】：Adding a color box for "Transparent" on the TinyMCE-4 color picker在 TinyMCE-4 颜色选择器上为“透明”添加颜色框
【发布时间】：2015-05-21 19:52:50
【问题描述】：

我希望 TinyMCE 颜色选择器有一个选项，可以选择透明作为颜色，这样一个字符（“子弹”）仍然会在那里并占用空间，但如果它的颜色是透明的，它将不可见。

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

有谁知道如何为这个颜色选择器添加一个透明颜色选项，或者甚至让“X”框实现透明而不是黑色？

感谢您的任何想法。

【问题讨论】：

标签： tinymce-4

【解决方案1】：

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

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

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

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

如果你这样做：

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

它不会删除跨度，而是将其更改为“透明”。

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

希望对你有帮助。

【讨论】：

谢谢！这确实有效！我正在运行 TinyMCE 4.1.7，这与您所拥有的有点不同，所以我将我所做的放在一个单独的答案中并添加了一些 cmets。我给了你赏金。
@Steve 我很高兴它有帮助；

【解决方案2】：

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

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

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

创建一个 CSS 类，您可以将其添加到编辑器中的元素中。然后在您自己的 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();
            });
        }
    });
});

【讨论】：

控制文字颜色的是textcolor插件，不是colorpicker插件。
哦，对不起，你写的是颜色选择器插件，所以我以为你指的是那个。但是，请注意，通过不编写自己的插件并编辑捆绑包，每次有可用的 tinymce 更新时，您都需要进行这些更改。考虑将模块克隆到您自己的模块中，至少从长远来看可以拯救自己。很酷，您找到了解决方案。
是的，我写这个问题时不知道有一个单独的 textcolor 插件。感谢您的警告。

【解决方案3】：

Rafael 的解决方案对我有用。我只是想多记录一点，并展示 TinyMCE 4.1.7 的样子。

当您单击 textcolor 网格中的“X”时，“value”变量会变得“透明”，而不是 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);

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

【讨论】：