Last night I was struggling quite a bit again. I had made up my mind that I would no longer use any component from the Ajax Control Toolkit, because it is all pretty confusing and I constantly had to fight naming conflicts between CSS classes, mainly with other CSS frameworks.
So I started looking for a new HTML editor. I didn’t care whether it would be pure JS or a combination of .NET/JS. But I wanted to avoid above all TinyMCE, simply because I was once again afraid of conflicts with CSS classes and configuration.
The simplest and at the same time quite original one seemed to be this one: 👻 This link is deader than Flash Player.So I set it up according to the instructions , but not only was it the same as the other HTML editors I already had, I also had to fight with absolute positioning. The CSS was tailored only to the WYSIHTML5 page, so when I placed the HTML editor lower on the page and wanted to insert a link or an image, the dialog showed up at the top, while at the bottom everything was transparent, and so on.
Simply an unfinished product and a bad design from the start, and personally I try to never choose absolute positioning. Then I told myself that I wouldn’t rely on someone else’s solution and would write something custom of my own.
The first thing I didn’t know how to do was get the text selected in the editor. For that I found the library jquery.wrapSelection.js, a bit old, but I couldn’t find any other, and then the first problem came up: I hate JavaScript and its lack of typing.
I tried to write a TypeScript Definition for the 781 lines of that library, but I didn’t know which classes, and above all which types of their variables and methods, were in there, so I had to give up.
That was the end of my dream of my own HTML editor. And since most of the other HTML editors didn’t even have a demo on their website, or the demo itself put me off, I finally went with TinyMCE and I definitely don’t regret it.
Independence from jQuery, features I had never seen before, an attractive design, and classes are named, for example, .mce-btn, so there is no risk of conflict with other classes, in my case for example the Metro UI CSS FW.
The configuration is also simple, almost unbelievably so:
<script type = "text/javascript" >
$(document).ready(function () {
tinymce.init({
selector: '#tinymce',
plugins: 'advlist,anchor,autolink,autoresize,autosave,bbcode,charmap,code,colorpicker,contextmenu,directionality,emoticons,example,example_dependency,fullpage,fullscreen,hr,image,importcss,insertdatetime,layer,legacyoutput,link,lists,media,nonbreaking,noneditable,pagebreak,paste,preview,print,save,searchreplace,spellchecker,tabfocus,table,template,textcolor,textpattern,visualblocks,visualchars,wordcount',
toolbar: ''
});
}); </script>The code includes all the plugins that ship in the standard zip; however, the list of plugins on the website is even longer.
And the HTML code is even simpler, it couldn’t be more basic:
<textarea id="tinymce"></textarea>All that’s left is to hook it up to ASP.NET, and next time nothing else :).
PS: of course, these plugins aren’t really needed: example, example_dependency, bbcode. In my case bbcode is even undesirable, because then TinyMCE returns bbcode syntax instead of HTML code.