XHTML Xtras Plugin for TinyMCE
Thursday, April 20, 2006Here's another plugin I've written for TinyMCE: XHTML Xtras. It's all the elements you've been missing from your favourite rich text editor. Included in this release: <del />, <ins />, <cite />, <abbr /> and <acronym />. Updated: Now with 100% Redundancy!
Redundant!
This plugin is now part of the standard TinyMCE package. And they made much nicer buttons :).
About
Sometimes I find it annoying that, although you want to write nice XHTML, the tools wont let you do so unless you edit the source by hand. Here's my first attempt at lending a helping hand. This plugin will allow you to insert, update and remove the following elements:
- <del />
- <ins />
- <cite />
- <abbr />
- <acronym />
Instructions
Unzip into the 'xhtmlxtras' folder under your TinyMCE 'plugins' folder. Add 'xhtmlxtras' to your plugins setting, and then you have the following buttons available for your toolbars:
- 'cite' : Citation element
- 'abbr' : Abbreviation element
- 'acronym' : Acronym element
- 'del' : Deletion element
- 'ins' : Insertion element
The popup dialog boxes contain fields for the attributes allowed under the specification (standard events not included yet). For example, select some text and click the acronym button. Type in the definition into the 'Title' field for the tooltip. The remove button will remove the element only, not the text.
The plugin includes a CSS file which will be imported for viewing the above elements in your editor content. The included buttons suck, for the love of God, please help!
License
TinyMCE is released under the LGPL and thus so is this plugin.
Version 1.1 (TinyMCE 2.0.3 and up)
Download xhtmlxtras1.1.zip for TinyMCE 2.0.3 and up. If you actually find this useful, please consider leaving a comment.
Change Log
version 1.1
- removed ugly headings
- fix problem where an empty element is inserted when there is no selection
- changed button behaviour to respect current selection
Thanks to Scott 'monkeybrain' Eadefor the above
Version 1.0
- Initial release
8 Comments
Does abbr actually work for you under IE?
It works just fine under Firefox. On IE it is necessary to do some weird things in order to make abbr elements visible, but I don't seem to be able to even insert abbr tags in IE.
Cheers,
Scott
As things currently stand (IE6sp2 and TinyMCE 2.0.6.1) insertion of abbr elements fails.
Tiny uses document.selection.createRange().pasteHTML(value) where value is the string you build in SXE.insertElement. It seems that IE validates the HTML and since it doesn't like abbr elements it just ignores the paste request.
Oh well.
Scott
Another minor fix for you...
Even when your buttons are inactive they can be clicked, hence you need to perform some additional checking around the commands thus:
execCommand : function(editor_id, element, command, user_interface, value) {
var inst = tinyMCE.getInstanceById(editor_id);
switch (command) {
case "mceCite":
if (inst.selection.getSelectedHTML()) {
var template = new Array();
template['file'] = '../../plugins/xhtmlxtras/cite.htm';
template['width'] = 350;
template['height'] = 400;
tinyMCE.openWindow(template, {editor_id : editor_id});
}
return true;
...
Cheers,
Scott
There seems to be a bug if the option "convert_fonts_to_spans : true" is set. The selected text will then be inserted on the beginning of the page.
And: I made some new icons for my application, maybe you like them: www.mm-webdesign.com/images.zip
Marc
any update on making this plugin compatible with the convert_fonts_to_spans option? it would be a great plugin if it were able to work with that option...
Hello- just researching tinyMCE plugins. I'm not a coder (I'm a satellite hardware guy [the really big stuff])but looking to kludge a plugin using Flowplayer so the planet can stream FLV directly just point to the file and maybe a couple params inside of tinyMCE (as opposed to the current goog/tube methods which seem to use those sites players).
Doesn't look too hard, but as I said, not my thing. :)
Nice informative site. Cheers!
Something I'm still missing and seems to be necessary for accessibility is to make it possible to add the "lang"-attribute to every tag.
Additonally it makes sense to have the opportunity to use the "span"-tag(the span-tag is necessary if you [for example] want to add language information to a part of text which carries no further information which can be expressed with another tag).
Hi Peter, I believe both of those things are possible with the latest version of TinyMCE.