|
Friday 11 March 2005 8:43:35 am
<b>how to add custom tags to xmlarea</b> let's say we want to add a custom tag to render text in a monospaced font. we'll call the new tag 'mono'. first off we add the tag to content.ini as usual [CustomTagSettings]
...
AvailableCustomTags[]=mono
IsInline[mono]=true
next we need to think how the tag can be represented in the editor with a single html tag. you can use pretty much any tag other than PRE that accepts a 'lang' or 'language' attribute (most do). for our example TT fits the bill. in xmlarea.ini we define this tag [CustomTagSettings]
...
StartTags[mono]=tt
EndTags[mono]=tt
these details are used by the toolbar button to add + remove the tags. if you don't specify them, a SPAN will be used if your custom tag is inline or a DIV if not.
then we add details of the button:
- a tooltip, which appears when you hover over the button + in the context menu (if not specified, the tagname is used)
- the filename of an 18x18px icon relative to xmlarea/design/standard/javascript/images/ (if not specified a ? icon is used) [CustomTagSettings]
...
Tooltips[mono]=Monospace
Icons[mono]=ed_mono.gif
the last step in xmlarea.ini adding the button where we want it in the toolbar. the name of the button will be 'custom_mono'. if we want it after the italic button then: [CustomTagSettings]
...
xmlareaButtons[]=italic
xmlareaButtons[]=custom_mono
finally we need to create a template for the tag called 'mono.tpl' in xmlarea/design/standard/templates/xmlarea/ezxmltags/ which looks like this: <tt id="custom_mono"{section show=$classification} class="{$classification}"{/section} language="{$attstr}">{$content}</tt>
note the following:
- we use the same tag as we specified in xmlarea.ini. if we didn't specify one, we use a DIV or SPAN (depending on wether it's inline or not).
- the ID is required. it must be the name of the custom tag button.
- the $classification section isn't required but it allows us to alter the css class of the html tag + so alter it's appearance.
- the LANG or LANGUAGE attribute (depending on your html tag) is required if you want to allow custom attributes to be added.
- you can access other custom attributes by the attribute name eg. {$title} in factbox but don't place anything inside the tag other than it's content. now, after we've cleared our caches, we're done. to alter the appearance of the tag, edit xmlarea/design/standard/javascript/pagestyle.js. this is a simple javscript file containing lines of css. our tag is TT with an ID="custom_mono" so we might add a line like: 'tt#custom_mono { font-weight: bold } '
we could also alter it's appearance if it's class were set to 'red': 'tt#custom_mono.red { color: #f00 } '
in release 0.2.2 you can also use an IMG tag to represent a custom tag. you might do this as follows. content.ini [CustomTagSettings]
...
AvailableCustomTags[]=newtag
IsInline[newtag]=true
xmlarea.ini [CustomTagSettings]
...
xmlareaButtons[]=custom_newtag
StartTags[newtag]=img src="/full/path/from/root.gif"
Tooltips[newtag]=My New Tag
Icons[newtag]=ed_newtagicon.gif
xmlarea/design/standard/templates/xmlarea/ezxmltags/newtag.tpl: <img src="/full/path/from/root.gif" id="custom_newtag"{section show=$classification} class="{$classification}"{/section} lang="{$attstr}" />
that's all i can think of. hope this makes some sense!
|