Question

我想选择使用TinyMCE颜色选择器选择透明的颜色，这样一个角色（一个＆＃34;子弹＆＃34;）仍然会在那里占据空间但是如果没有可见的话它的颜色是透明的。

有一个＆＃34; X＆＃34;框选项说＆＃34;没有颜色＆＃34;但这似乎使颜色变黑，不透明。

有没有人知道如何为这个颜色选择器添加透明颜色选项，甚至可以制作＆＃34; X＆＃34;盒子工具透明而不是黑色？

感谢任何想法。

Answer 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插件的文件夹覆盖那里的那个。

我希望它有所帮助。

Answer 2

颜色选择器中的×按钮会删除所有自定义颜色，但不会添加零不透明颜色。

正如您在查看the source code或trying the full example时所看到的，在所包含的colorpicker插件中不支持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();
            });
        }
    });
});

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中选择黑色方块。使用value =“transparent”下降到selectColor（value）将透明设置为颜色。

为＆＃34;透明＆＃34;添加颜色框在TinyMCE-4颜色选择器上

3 个答案: