为“添加颜色框”；透明的；关于TinyMCE-4颜色选择器

我想使用TinyMCE颜色选择器的一个选项，选择透明作为颜色，这样一个字符（一个“项目符号”）将仍然存在并占用空间，但如果它的颜色是透明的，它将不可见

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

有人知道如何将透明颜色选项添加到此颜色选择器，或者甚至使“X”框实现透明而不是黑色吗

---

谢谢你的建议。

我相信我能做到这一点，我做了一些快速测试，它似乎运行良好

我获得了最新版本的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插件的文件夹中，覆盖其中的一个

---

我希望它能有所帮助。

colorpicker中的

×

按钮会删除任何自定义颜色，但不会添加不透明度为零的颜色

正如您在查看时所看到的，或者在附带的colorpicker插件中不支持rgba（）或不透明性。不幸的是，只有rgb（）和十六进制

您可能需要添加该功能。有许多备选方案，例如：

创建一个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();
            });
        }
    });
});

---

拉斐尔的解决方案对我有效。我只是想进一步记录它，并展示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);

---

我注释掉的五行删除了所选文本的格式，留下了黑色，这似乎没有什么用处。如果想要文本为黑色，可以在颜色映射中选择黑色正方形。使用value=“transparent”选择color（value）将transparent设置为颜色。

控制文本颜色的是textcolor插件，而不是colorpicker插件。哦，对不起，你写的是colorpicker插件，所以我以为你指的就是这个插件。不过，这是一个警告，如果您不编写自己的插件并编辑捆绑包，那么每当tinymce更新可用时，您都需要进行这些更改。考虑把这个模块克隆到你自己的一个，至少从长远来看拯救你自己。很酷，你找到了一个解决方案。是的，我写这个问题的时候不知道有一个单独的textcolor插件。谢谢你的警告，谢谢！这确实有效！我正在运行TinyMCE 4.1.7，它与您的有点不同，因此我将我所做的放在一个单独的答案中，并添加了一些注释。我给了你赏金分数。@Steve我很高兴这有帮助；