What happened to advImage plugin in TinyMCE?

You might have heard of a fully featured HTML WYSIWYG editor control called “TinyMCE“. If you haven’t, it is an HTML text area extender which adds customised text editing experience to the existing text area of the HTML page. It gives a functionality similar to the WordPad offered by Microsoft. Migration from its version 3 to 4 is quite easy. But with a compromise on some functionalities.

According to the TinyMCE, they have removed advhr, advimage, advlink, iespell, inlinepopups, style, emotions and xhtmlxtras plugins from the version 4. And added anchor, charmap, compat3x, hr, image, link, emoticons, code and textcolor instead. Even from that, the advimage takes a big leap. advimage is an advanced image property editor which visualise a dialog box with many features built-in. It could even support for mouseover/out image swapping. It was that much advance. In TinyMCE V4.0, they have replaced the advimage plugin with the image plugin. Which is better in the appearance (aka simplified). But not from the functionality. The below image shows the difference between the two versions in terms of advimage and the image plugin.

 

Figure 1 – V3 vs V4 image insertion dialog box

 

As per Figure 1, V.3 supported the advimage while the V4 supports the new plugin called “image“. There is a drastic difference between these two. And in V.4, they have introduced an advanced tab as well. But, it is disabled by default. In order to use the advanced tab, the user has to explicitly enable a setting which has been provided by TinyMCE. It’s called “image_advtab“. In order to enable this, the user has to first import the image plugin and then make the image_advtab to true as the below code block.

 

tinymce.init({
 selector: "textarea", // change this value according to your HTML
 plugins: "image",
 menubar: "insert",
 toolbar: "image",
 image_advtab: true
});

 

Then it will transfer like this,

Figure 2 – V.4 Image insertion dialog box

 

It gives some more features. But not as much as the advimage. Once we add a value to the vertical space and the other textboxes, it will automatically make the style and it will appear in the Style entry.  And we could manually add the styles in the styles text entry box also. And the TinyMCE suggest to use styles in this manner in the controller.

 

style_formats: [
 {title: 'Image Left', selector: 'img', styles: {
 'float' : 'left',
 'margin': '0 10px 0 10px'
 }},
 {title: 'Image Right', selector: 'img', styles: {
 'float' : 'right',
 'margin': '0 10px 0 10px'
 }}
]

 

Wouldn’t there an easy way to add styles than the above? Well, according to the TinyMCE website, it has completely given up the advanced image controllers which was there in the advimage plugin. The best evidence is ,

 

“Though the easier methods of adding buttons and windows are the same, more complex controls or dialogs needs to be written in the new API style.”
(Ephox., 2011)

 

In future releases, it will provide many features as the time goes. However, improving the UI over the functionalities while removing the existing functionalities cannot be accepted under any circumstances.