TinyMCE WYSIWYG Editor – Customize tinymce editor

September 6th, 2012 by Laeeq | 3 comments

tinymce editor

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 dropdown, font dropdown, 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:

view plaincopy to clipboardprint?
  1. tinyMCE.init({
  2. extended_valid_elements : “img[class|src|border=0|alt|title|hspace|vspace|width|height|align|onmouseover|onmouseout|name]“
  3. });

Suppose you want “rel” attribute to be added with span. You will have to use extended_valid_elements like below:

view plaincopy to clipboardprint?
  1. tinyMCE.init({
  2. extended_valid_elements : “span[id|style|rel|rev|charset|hreflang|dir|lang|tabindex]“
  3. });

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:

view plaincopy to clipboardprint?
  1. onclick : function() {
  2. this.execCommand(‘InsertImage’, false, imagePath);
  3. }

Example for adding html content directly to the editor:

view plaincopy to clipboardprint?
  1. onclick : function() {
  2. this.execCommand(‘mceInsertContent’, false, ’<span id=“gallery”>
  3. <a href=‘+imagePath+’ title=“ABC”><img src=‘+imagePath+’ class=“bbc_img” /></a></span>’, {skip_undo : 1});
  4. }

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.

view plaincopy to clipboardprint?
  1. onclick : function() {
  2. tinyMCE.activeEditor.dom.addClass(tinyMCE.activeEditor.dom.select(‘img’), ‘bbc_img’);
  3. }

4. Add a specific element to another elemnent

You can add html element to another element or within elements by using add function of tinymce editor.

view plaincopy to clipboardprint?
  1. onclick : function() {
  2. tinyMCE.activeEditor.dom.add(tinyMCE.activeEditor.getBody(), ‘p’, {title : ‘my title’}, ‘Some content’);
  3. }

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()

view plaincopy to clipboardprint?
  1. tinyMCE.init({
  2. …
  3. content_css : “css/custom_content.css”,
  4. theme_advanced_font_sizes: “10px,12px,13px,14px,16px,18px,20px”,
  5. font_size_style_values : “10px,12px,13px,14px,16px,18px,20px”,
  7. });

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.

view plaincopy to clipboardprint?
  1. tinyMCE.init({
  2. …
  3. forced_root_block : false
  4. });

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.

view plaincopy to clipboardprint?
  1. onclick : function() {
  2. tinyMCE.activeEditor.dom.setHTML(tinyMCE.activeEditor.dom.select(‘p’), ‘inner html’);
  3. }

8. Get the HTML output

You can get the html output by using getOuterHTML function in tinymce editor.

view plaincopy to clipboardprint?
  1. onclick : function() {
  2. tinyMCE.activeEditor.getOuterHTML(tinyMCE.activeEditor.getBody());
  3. }

9. Create HTML string for element

CYou can also create HTML string for element by using createHTML function. The element will be closed unless an empty inner HTML string is passed.

view plaincopy to clipboardprint?
  1. onclick : function() {
  2. tinyMCE.activeEditor.selection.setContent(tinyMCE.activeEditor.dom.createHTML(‘a’,{href:‘test.html’}, ‘some line’));
  3. }

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.

view plaincopy to clipboardprint?
  1. onclick : function() {
  2. tinymce.DOM.loadCSS(‘somepath/some.css’);
  3. }

Beside this tinymce has great documentation for customizing editor functions and content. you can go through this.

You can subscribe to PHPZAG.COM posts by Email

 

Related Topics:

 

 

  1. itoctopus
    September 10th, 2012 at 12:30 | #1
    Reply | Quote

    I remember a few years ago that we were requested to customize TinyMCE to add an upload button – it was a very painful process as we needed to hack into the core of this editor. It was not a piece of cake at all.

    It’s good that they’re now thinking that some people might want to extend their editor.

  2. Md Mahbub Alam Khan
    September 11th, 2012 at 11:37 | #2
    Reply | Quote

    Great post.
    I’m having a problem in tinymce while add/edit HTML snippet in that editor. Suppose, I want to share some HTML snippet in my site.So, for the first time it’s working fine, but when trying to edit that HTML snippet, then i can’t see any HTML snippet in that editor.
    Do you face something like that? Please help me to solve this issue.

  3. Shower Time
    September 16th, 2012 at 20:38 | #3
    Reply | Quote

    Liking the recent changes you’ve made mate!!

  1. No trackbacks yet.