The idea is to configure a button to toggle between adding and removing a span with a css style to the selected text.
Demo e Download
The content covered in this article can be tested online in our demo and can also be downloaded for local use.
Basic configuration
Create the <textarea> and load TinyMCE:
HTML
<textarea id='default'></textarea> <script src='tinymce.5.10.9/js/tinymce/tinymce.min.js'></script>
Change the path to the tinymce.min.js file according to your installation.
Initializing
We will start with a basic editor using the textarea element with id='default' created above. The height will be set to 500px and the plugin code will be loaded to make the source code available in HTML. The toolbar will be customized containing bold, italic and code buttons.
JavaScript
tinymce.init({ selector: 'textarea#default', height: 500, plugins: 'code', toolbar: 'bold italic code', content_css: 'css/style.css?1', formats: { bold: { inline: 'span', attributes: { class: 'text-bold' }, }, }, });
The content_css option configures the path to the css file containing the style rules that will be used within the editor, for example to customize fonts, paragraphs and headers. The characters ?1 in front of the css file name are used to clear the cache after changes, changing the number in front of the question mark forces the file to be reloaded, this occurs because it is understood that the name is different but the file being loaded is the same.
Finally, we changed the default behavior of bold which is to wrap the selected text in a <b> element. With the configuration above, when applying bold the selected text will be wrapped in a <span class='text-bold'> element. In this case it is necessary to style the bold using the text-bold class in the css file.
CSS
.text-bold {
font-weight: bold;
}
Test the bold button by inspecting the editor's html code using the < > button.
Configuring the buttons
Starting with CSS, prepare the classes that will be used in the editor.
CSS
.text-bold { font-weight: bold; } .text-red { color: red; } .text-blue { color: blue; }
Below is the complete code with two additional buttons, Red and Blue, which wrap the selected text in a span containing their respective css classes.
JavaScript
// Function to replace HTML characters with their entities function encodeHTML(s) { return s.replace(/&/g, '&') .replace(/</g, '<') .replace(/>/g, '>') .replace(/"/g, '"'); } tinymce.init({ selector: 'textarea#default', height: 500, plugins: 'code', // Adds Red and Blue buttons to the toolbar toolbar: 'bold italic code | textred textblue', content_css: 'css/style.css?1', formats: { bold: { inline: 'span', attributes: { class: 'text-bold' }, }, // Creates the format for the buttons
'textred': { inline: 'span', classes: 'text-red', wrapper: true }, 'textblue': { inline: 'span', classes: 'text-blue', wrapper: true }, }, setup: function(editor) { // Function to wrap selected text with span // Receives as parameter the class to be used in the span
function wrapText(cls) { const node = editor.selection.getNode(); const selectedText = encodeHTML(editor.selection.getContent({ format: 'text' })); if (node.nodeName == 'SPAN') { const l = node.classList.length; if (l == 0) { node.classList.add(cls); } else if (l == 1) { if (node.classList.contains(cls)) { editor.execCommand('mceReplaceContent', false, selectedText); } else { node.classList.add(cls); } } else { node.classList.remove(cls); } } else { editor.execCommand( 'mceReplaceContent', false, '<span class="' + cls + '">' + selectedText + '</span>'
); } } // Configure the buttons editor.ui.registry.addButton('textred', { text: 'Red', tooltip: 'Red span', onAction: function() { wrapText('text-red'); } }); editor.ui.registry.addButton('textblue', { text: 'Blue', onAction: function() { wrapText('text-blue'); } }); } });
In this example, two additional buttons are configured to style the text in the editor using a span element containing a css class. Select the text and click the new buttons to toggle customization.
To remove customization, the selection must contain exactly the same text as the original selection, including white space. To toggle customization it is necessary to change the cursor position in the editor before selecting the text again, see more information in the bugs section below.
Final considerations
The wrapText() function wraps the selected text in a span if it is not already in one. If the text is already wrapped and it does not have the class linked to the button, the class will be added to the span instead of adding a new span.
When clicking the button, if the span involving the text has more than one class, one of them being the class linked to the button, this will be removed and the span will be preserved with the rest of its classes.
The span will not be added if the cursor is positioned on the word and the text is not selected.
This article serves as inspiration for other situations, you can wrap text in a div, create buttons to add templates, use creativity.
Bugs
A bug that appears to be related to the editor occurs as follows: When selecting text and clicking the bold button the pattern is applied, if you click immediately after in the Red button the text will turn red and lose its boldness. To work as it should, after clicking the bold button, change the cursor position, select the text again and only then click the Red button, so the text will be in bold red.
This same error occurs when using only the new buttons. If something doesn't work, try changing the cursor position and selecting the text again. If it's just one word, double clicking works. Moving the keyboard cursor back and forth and selecting again also works.
Sources
The content of this article was written by consulting the documentation on the TinyMCE website, topics on the stackoverflow website, and questions asked to ChatGPT.