Our highest priority is to satisfy the customer through early and continuous delivery of valuable and working software.

Monday, January 19, 2009

How to apply TinyMCE editor only to specific Textarea?

By default, TinyMCE applies to every textarea of a HTML page. There is a way to make it only load on like <textarea id="mceEditor">.

just add the attribute 'editor_selector' in tinyMCE.init . The value for this attribute is a css class name which should be used in the textarea where you want to apply editor.

For ex:

tinyMCE.init({
mode : "textareas",
theme : "simple",
editor_selector :"mceEditor"
});

and in the textarea tag

<textarea name="description" style="width:100%;" class="mceEditor">

16 comments:

  1. Its better to use tinyMCE.execCommand('mceAddControl', false, 'mceEditor'); instead of tinyMCE.init();

    Here; "mceEditor" is id of Text area.

    You can use tinyMCE.execCommand("mceRemoveControl", false, "mceEditor"); on body/page unload to remove it from DOM.

    ReplyDelete
  2. tinyMCE.init({
    mode : "exact",
    elements : "description",
    theme : "simple",
    editor_selector :"mceEditor"
    );

    ReplyDelete
    Replies
    1. I ve doubt on mode
      mode:"textarea" it means it apply to all?

      Delete
  3. I'm building a web app in MVC 3, using JQuery Dialog and TinyMCE, I kept getting "j is null" error every second time I tried to save the record via ajax call back.

    I solved it by make sure I called tinyMCE.execCommand('mceAddControl', false, 'mceEditor');
    on page (partial view) load, and called
    tinyMCE.execCommand("mceRemoveControl", false, "mceEditor")
    when dialog is closing.

    thanks for the hint.

    ReplyDelete
  4. Where should I put that TinyMce.init code? Should the TinyMce package be in the same folder where your website directory is?

    ReplyDelete
  5. Where should I put that TinyMce.init code?
    TinyMce.init - you can put code before !! end body !! tag at the end.

    Should the TinyMce package be in the same folder where your website directory is?
    No its not necessary. You just need to make sure that JavaScript is included properly in your page; where you need TinyMce.

    ReplyDelete
  6. Thanks, you can use the "exact" method and then specify the ID of the textarea as the elements that need to use tinyMCE. EG:

    tinyMCE.init({
    ...
    mode : "exact",
    elements : "elm1,elm2"
    });

    ...

    <textarea id="elm1" ...

    ReplyDelete
  7. Thanks, This help a lots of time.

    ReplyDelete
  8. Good Article, Helped A Lot, Thx.

    ReplyDelete
  9. Very good article! Thank you.

    ReplyDelete
  10. This doesn't seem to work in TinyMCE 4. Am I missing something?

    ReplyDelete