Monday 3 September 2007

The joys(ish) of TinyMCE - Rich Text Editor more controllable than last time I looked

I have been trying to find a RTE for a new site I am doing. I would have liked the WordPress/Blogger/Google one to compare but they do not seem to be avalible to download, and stripping javascript out of another site is never a fun job, for more than a couple of lines.


Last time I used it at timeout.com we had a few limits that we had to hack around, they seem to have cleanly added these thing in now. So I'll talk about what I found.

  • Making images not have full urls
  • You can valid your own set of tags and strip out ones you do not what.
  • Add in predifined lists of links, images, css tags
  • Overlay your own css, as would be in the site.


Making images not have full urls

You can valid your own set of tags and strip out ones you do not what.

For us default a tags "target" to "_blank"

Quote:

This example string tells TinyMCE to remove all elements that are not a "a, strong, div or br" element, convert "b" elements to "strong" elements, default "target" to "_blank" and keep the "href", "target" and "align" attributes of the elements.

tinyMCE.init({
...
valid_elements : "a[href|target=_blank],strong/b,div[align],br"
});


Add in predifined lists of links, images, css tags

Again to have an external js file that was full of links for the editor and could be built on the fly either from common site links or other data for that story (they have entered an actor so the list has links to all his related films) would have given some quick help and less errors.

Quote:

This option enables you to have an external list of links, which can be generated by a server side page and then inserted into the link dialog windows of TinyMCE. The links can be to internal site documents or external URLs.

Example of usage of the external_link_list_url option:

tinyMCE.init({
...
external_link_list_url : "myexternallist.js"
});

Example of a external link list file: (myexternallist.js)

var tinyMCELinkList = new Array(
// Name, URL
["Moxiecode", "http://www.moxiecode.com"],
["Freshmeat", "http://www.freshmeat.com"],
["Sourceforge", "http://www.sourceforge.com"]
);


Catching sumit or button comands for custom events.

This would have been good for our custom popups or to do some checking before submiting the form. Also could be used to block some buttons i.e fonts, to some access levels.


So all in all some good things, I just do no like the icons and layout. But you can do the buttons as javascript calls and the menu bar can be sent to another div for styling so should be possible to make it nice.

No comments:

Post a Comment