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">
Posted by Date:

13 comments:

  1. Nilesh GamitJanuary 19, 2009 at 6:26 PM

    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. rafiqMay 20, 2009 at 2:26 PM

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

    ReplyDelete
    Replies
    1. AnonymousFebruary 29, 2012 at 3:02 PM

      I ve doubt on mode
      mode:"textarea" it means it apply to all?

      Delete
  3. kamarajFebruary 11, 2010 at 9:09 PM

    thanks a lot :)

    ReplyDelete
  4. aspgodMarch 24, 2010 at 6:44 PM

    Useful article. thanks

    ReplyDelete
  5. AnonymousApril 10, 2011 at 6:02 AM

    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
  6. SujithJanuary 12, 2012 at 8:14 AM

    Thanks Alot

    ReplyDelete
  7. AnonymousJanuary 31, 2012 at 10:28 AM

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

    ReplyDelete
  8. Nilesh GamitJanuary 31, 2012 at 10:51 AM

    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
  9. Elemental Web SolutionsFebruary 24, 2012 at 6:37 PM

    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
  10. AnonymousMarch 21, 2012 at 9:03 PM

    Thanks, This help a lots of time.

    ReplyDelete
  11. AnonymousJanuary 23, 2013 at 7:20 PM

    Good Article, Helped A Lot, Thx.

    ReplyDelete
  12. AnonymousJune 7, 2013 at 2:52 AM

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

    ReplyDelete

Subscribe to: Post Comments (Atom)