Adding the "Transparent" color box in the TinyMCE-4 color picker
I would like to have a transparent color selected using the TinyMCE color set so that the symbol ("bullet") is still there and taking up space, but not visible if it is transparent.
There is an "X" option that says "No color", but that seems to make the color black rather than transparent.
Does anyone know how to add a transparent color parameter to this color set, or even make an "X" instead of transparent instead of black?
Thanks for any ideas.
source to share
I believe I was able to do this, did some quick tests and seems to work fine.
I got the latest TinyMCE (4.1.10_dev) to access the non-javascript textcolor plugin, there is this instruction:
if (value == 'transparent') {
resetColor();
} else {
selectColor(value);
}
What's going on here? When you select a color, it executes a selectColor, which wraps the selected text in between the selected color. However, when you choose color no, it removes that color range (why it falls back to black, which is the default color) instead of setting it transparent.
So if you do this:
//if (value == 'transparent') {
// resetColor();
//} else {
selectColor(value);
//}
Instead of removing the range, it will change it to "transparent".
The important thing is that tinyMCE automatically runs the plugin scripts, so it only works with minified versions, so after making these changes, you will need to minify the script before plugin.min.js
and place it in the textcolro plugin folder overwriting it.
Hope this helps.
source to share
The button ×
in the colorpicker removes any custom colors, it doesn't add a color with opacity.
As you can see by looking at the source code or trying the complete example , there is no support for rgba () or opacity in the included colorpicker plugin. Unfortunately only rgb () and hex.
You may need to create your own little plugin to add this capability. There are several alternatives, for example:
- Create a CSS class that you can add to elements in the editor. Then do your color magic in your own CSS file.
- Create a new button on the toolbar that makes the element transparent.
I would personally go with option two, something like this:
tinymce.init({
selector: 'textarea',
plugins: 'nocolour',
toolbar: 'nocolour',
external_plugins: {
"nocolour": "url_to_your/nocolour.js"
}
});
And 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();
});
}
});
});
source to share
Raphael decided to work for me. I just wanted to document it a little more and show what it looks like for TinyMCE 4.1.7.
When you click "X" on the textcolor grid, the "value" variable gets "transparency", not the hex value from colorMap.
Relevant code in the textcolor plugin:
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);
The five lines I commented remove the formatting for the selected text, leaving it black, which doesn't seem useful. If you want black text, you can choose a black square in colorMap. Going to selectColor (value) with value = "transparent" sets transparency as a color.
source to share