Use custom tags in FCK editor

This is a good question, what's the deal-i-o?

Personally, I'm hoping to use BBcode tags, they are much better if you don't want to give your folks full HTML powers to mess up the page if they want .

I have figured out how to enter custom tags via a new button on the toolbar. (Read below). I have not figured out a good way to make the custom tags visible in the WYSIWIG mode. If anyone else has discovered anything, please post.

Gene

-----

To add a custom tag, follow these rough steps. In this case, a custom tag will be made by creating a variation on the "hidden" tag (input type=hidden)

In my case, I am trying to add a tag called "ditag" <ditag a=b c=d ...>
I am basically copying everything for "HiddenField" and calling it "DITagField"

in /editor/js/fckeditorcode_gecko_2.js/ (and in the IE version as well)
add lines for ditag wherever we see stuff for Hidden (with capital H)
there is other stuff for hidden with a small h that we probably don't care about.
this can be hard to do, unless you add some whitespace into the file to make
it more readable. If you have a good editor like emacs that can parse the js
and understand it, it can automatically "beautify" the code to make it legible.
Eclipse can do this pretty well too. If all else fails, you can simply do
search/replace, changing things like ';if' to ';\nif'. Do NOT replace all ;'s
with ;\n because you will break the code.

in /editort/lang/en.js
add lines for ditag wherever we see stuff for hidden
this is so we can labels in our dialog box in english

create a dialog box for the ditag field
in the directory /editor/dialog, copy hiddenfield.html and make ditagfield.html
in the "Ok()" function, change the createElement from INPUT to "DI_TAG" or whatever
and change the type from "hidden" to whatever, or possibly eliminate this.
the name is important, it must match the name of the tag

editor/skins/default/toolbar
cp anchor.gif ditagfield.gif
this creates an image for the ditagfield in the toolbar - we are
just copying the anchor image, we could copy any of them or make a new little gif
the name is important, it must match the name of the tag

Lastly, add the new button to the Default toolbar (or other toolbar)
in fckconfig.js, find the default toolbar line like this
FCKConfig.ToolbarSets["Default"] = [
and add in the new toolbar button 'DITagField'

At this point, you should have a new button that will pop-up a new dialg that you can fill in that will then add a new tag. It might be that you see it only if you view in Source mode.

I have not been able to figure out a good way to represent my custom tag in WYSIWIG mode. What FCKEditor does for hidden fields is it uses an image to show the user that there is a tag there. You can mouse-over the hidden field image and see the name/value pair for that hidden field. This might be ok for some uses of custom tags. In other cases, I would really rather just see the custom tag, even in WYSIWIG mode. I haven't been able to figure out how to do this.

instead of:

<load "templates/news.tpl">

you have to use a tag like:

<load name="templates/news.tpl">

then the editor does not delete it anymore and only adds an </load> Tag.

Did this question ever get answered? I am curious myself.

regards,

jimmo

I have a similar problem where I want to edit HTML pages with simple cold fusion tags embedded. I thought simply using a style would work by creating start and end tags around text. Alas, no. For some strange treason this doesn't work and I get the same output as was described above - the tags are moved from the enclosed text and I end up with <cfoutput></cfoutput>#myCF# instead of <cfoutput>#myCF#</cfoutput>.

It seems like it should be such a simple problem to solve - just create buttons with custom tags that work the same as BOLD or ITALIC etc. But no....