在TinyMCE-4颜色选择器上添加用于“透明”的颜色框。

Question

我想要一个选项与TinyMCE颜色选择选择透明的颜色，这样一个字符(“子弹”)将仍然在那里并占用空间，但如果它的颜色是透明的，将是不可见的。

有一个"X“框选项，上面写着”没有颜色“，但这似乎使颜色变黑，不透明。

有没有人知道如何添加一个透明的颜色选项到这个颜色选择器，甚至使"X“框实现透明，而不是黑色？

谢谢你的建议。

Answer 1

我相信我能做到这一点，我做了一些快速的测试，看起来效果很好。

我获得了最新版本的TinyMCE (4.1.10_dev)来访问textcolor插件的非小型化javascript，下面是这样的说明：

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

这里发生了什么？当您选择一种颜色时，它会运行selectColor，它用选定的颜色将选定的文本包装在一个跨度内。但是，当您选择no颜色时，它会移除这个颜色跨度(这就是为什么它返回到黑色，这是默认颜色)，而不是将其设置为透明。

所以如果你这么做

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

而不是移除跨度，而是将其改为“透明”。

一件重要的事情是，tinyMCE自动获得插件脚本，因此它只适用于小型化版本，所以在进行这些更改之后，您必须将脚本缩小到plugin.min.js，并将其放在textcolro的文件夹中，覆盖其中的一个。

希望能帮上忙。

Answer 2

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

正如您在查看源代码或尝试完整的示例时所看到的，不支持rgba()或包含的色选择插件中的不透明度。不幸的是，只有rgb()和十六进制。

您可能需要创建自己的小插件来添加此功能。有一些替代办法，例如：

1. 创建一个CSS类，可以将其添加到编辑器中的元素中。然后在你自己的CSS文件中做你的颜色魔术。
2. 在工具栏中创建一个使元素透明的新按钮。

我个人会选择第二种选择，类似这样：

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

拉斐尔的解决方案对我有效。我只是想更多地记录它，并展示它在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中的黑色方框。使用selectColor( value ) =“透明”设置透明的颜色。