TinyMCE is a open-source web based JavaScript HTML WYSIWYG editor, which allows users to add custom HTML and CSS without having to remember any code. You can simply select the element or text and apply the relevant format using the style drop-down, font drop-down, font size available in the visual editor.
As a web designer or developer, you may need to customize TinyMCE editor design or its functionality. Actually yesterday I got a ticket assigned to add a css class to img tag automatically when user upload a image URL in TinyMCE editor and also to add lightbox. However, I find it very easy to customize editor’s functionality. So here in this post, I am going to share my experience about customizing editor’s existing functionality.
1. Add Valid elements
Sometimes you have to add some specific rule to the editor. The extended_valid_elements is similar to valid_elements. The only difference between this option and valid_elements is that this one gets added to the existing rule set. When adding a new attribute by specifying an existing element rule, the entire rule for that element is over-ridden so be sure to include all valid attributes not just the one you wish to add.
The below example replaces the current img rule:
tinyMCE.init({
extended_valid_elements : "img[class|src|border=0|alt|title|hspace|vspace|width|height|align|onmouseover|onmouseout|name]"
});
Suppose you want “rel” attribute to be added with span. You will have to use extended_valid_elements like below:
tinyMCE.init({
extended_valid_elements : "span[id|style|rel|rev|charset|hreflang|dir|lang|tabindex]"
});
2. Add image URL or html content
You can use execCommand if want to executes a specific command on the currently active editor. By using this function, you can add image with its path by passing “InsertImage” or can insert html content using “mceInsertContent”.
Example for adding image path:
onclick : function() {
this.execCommand('InsertImage', false, imagePath);
}
Example for adding html content directly to the editor:
onclick : function() {
this.execCommand('mceInsertContent', false, '<span id="gallery">
<a href='+imagePath+' title="ABC"><img src='+imagePath+' class="bbc_img" /></a></span>', {skip_undo : 1});
}
3. Add a CSS Class to any specific element
By using this addClass function can add a class to a specific element in a active editor.
In below example an “bbc_img” class will be added to img.
onclick : function() {
tinyMCE.activeEditor.dom.addClass(tinyMCE.activeEditor.dom.select('img'), 'bbc_img');
}
4. Add a specific element to another element
You can add html element to another element or within elements by using add function of TinyMCE editor.
onclick : function() {
tinyMCE.activeEditor.dom.add(tinyMCE.activeEditor.getBody(), 'p', {title : 'my title'}, 'Some content');
}
5. Set css, font, font size etc for your active editor
you can set css file for your active editor using content_css. Also can set font, font size etc.
Add the following to tinyMCE.init()
tinyMCE.init({
…
content_css : "css/custom_content.css",
theme_advanced_font_sizes: "10px,12px,13px,14px,16px,18px,20px",
font_size_style_values : "10px,12px,13px,14px,16px,18px,20px",
});
6. Block elements or text nodes
In TinyMCE editor, p elements is added before and after elements block like “<strong>something</strong>” will result in output like: :”<p>strong>something</strong></p>”. You can block these elements by using forced_root_block function to block p elements. If you set this option to false it will never produce P tags on enter or automatically it will instead produce BR elements and Shift+Enter will produce a P.
tinyMCE.init({
…
forced_root_block : false
});
7. Sets the specified HTML content inside the element or elements
you can set the specified HTML content inside the element or elements using setHTML function. The HTML will first be processed this means URLs will get converted, hex color values fixed etc.
onclick : function() {
tinyMCE.activeEditor.dom.setHTML(tinyMCE.activeEditor.dom.select('p'), 'inner html');
}
8. Get the HTML output
You can get the html output by using getOuterHTML function in TinyMCE editor.
onclick : function() {
tinyMCE.activeEditor.getOuterHTML(tinyMCE.activeEditor.getBody());
}
9. Create HTML string for element
You can also create HTML string for element by using createHTML function. The element will be closed unless an empty inner HTML string is passed.
onclick : function() {
tinyMCE.activeEditor.selection.setContent(tinyMCE.activeEditor.dom.createHTML('a',{href:'test.html'}, 'some line'));
}
10. Imports/loads the specified CSS file
You can also loads the specified CSS file into the document bound to the class. Just use the function loadCSS.
onclick : function() {
tinymce.DOM.loadCSS('somepath/some.css');
}
Beside this TinyMCE has great documentation for customizing editor functions and content. you can go through this.