What is TinyMCE (And what you eat it with?)

IT is such an area where on one side we have web-sites, videos, pictures, blog-posts, and so on, and on the other side we have SQL, XML, HTML, PHP, ASP … and many other abbreviations and not so.

You may not know what JavaScript is, but surely, you use it daily. You may not know what is TinyMCE, but if you are a blogger who uses WordPress, then … here it is!

TinyMCE is a platform-independent, browser-based WYSIWYG editor control. TinyMCE is designed to easily integrate with content management systems, including Django, Drupal, Joomla!, WordPress, etc.

Recently I added TinyMCE to one of my projects. Certain information shown on different web-pages has to be saved in a standardised way in the project. Usage of Notepad.exe was just enough for that. Then manually I could save entire HTML document to a database by copy-paste. Now I can simply edit documents on a web-page. “Save” button click does the job now, so there is no need to open database editor and find a specific table and cell to put the information.

TinyMCE layout in WordPress is just an example of what the editor can look like and what it can do. It has themes (skins), you can do custom button designs, spell-check, word-count, add plug-ins… and much more. Check full-featured live example here.

I can look like this:

Embedding TinyMCE on a nested page

TinyMCE worked beautifully on any page I wanted except those which had a master page. Interestingly, there were no solutions on any forums on the Internet about such a problem. Microsoft Visual Studio user do not use TinyMCE? (Or they are so advanced that they do not have such questions?!)

Anyway, I had no time to register on any forum devoted to TinyMCE and describe a problem. I just found a solution.

To make TinyMCE work all you need to do is to create a textarea or a textbox, which I find more flexible.

<asp:TextBox ID=”a_doc_tb” runat=”server” ValidateRequestMode=”Disabled”>[TinyMCE]</asp:TextBox>

In JavaScript which embeds the editor there must be such a line:

selector: ‘#a_doc_tb’,

That’s all you need! But if your page is a nested page, then a_doc_tb for you is still a_doc_tb, but not for the editor! Your JavaScript now has to look something like this:

selector: ‘#ContentPlaceHolder1_a_doc_tb’,

Good luck!