htmlArea

A directory of browser-based WYSIWYG editors

  MAIN
INDEX
SEARCH
POSTS
WHO'S
ONLINE
LOG
IN

Home: htmlArea 3 (beta): htmlArea 2 & 3 archive (read only): htmlArea v3.0 - Add-Ons:
Adding placeholder for custom XHTML tag


The htmlArea 2 & 3 editors have been discontinued.

We've made these forums available as a read-only reference and knowledge-base for people using or developing editors based on htmlArea 2 or 3.

Anyone who is interested in taking over version 2 or 3 is free to do so. All we ask is that you choose a new name that doesn't have "htmlarea" in it to avoid confusion with this site. We'll even give you a link in the directory to make it easier for people to find you. If you are developing or hosting an htmlArea based-editor under a new name, please submit it to our directory.

 


mslinn
New User

Jun 30, 2004, 3:06 PM

Post #1 of 8 (28832 views)
Shortcut
Adding placeholder for custom XHTML tag Can't Post

We would like htmlArea 3.0 to render a gif whenever we insert specific XHTML tags that our application processes. For example, the <z:example/> tag should be rendered as <img src="example.gif"> when htmlEditor is in WYSIWYG mode.

Any suggestions on how to proceed in order to extend htmlArea in this manner?

Thanks! ... BTW, htmlArea is an excellent piece of work.

Mike


mslinn
New User

Jul 2, 2004, 1:04 PM

Post #2 of 8 (28809 views)
Shortcut
Re: [mslinn] Adding placeholder for custom XHTML tag [In reply to] Can't Post

A few days have gone by since I posted, but no-one has replied. I'm not sure if this is because no-one understands how to solve the problem, or if the motivation wasn't properly explained.

DreamWeaver has an option whereby JSP tags (of the form <jsp:whatever/>) can be displayed with a visual placeholder. I want to be able to do something similar with htmlArea. The placeholder might be an image, or might be some other HTML construct, like specially formatted text.

I see that this forum has something similar to what I'm looking for:
javascript:_addTag('blush')

I don't mind getting my hands dirty and doing the work, but it's not clear to me what files in the htmlArea distribution would need to be altered. Even better would be some way to enhance htmlArea without disturbing the existing code base.

Any suggestions on how to proceed?

MikeBlush


inCharge.co.uk
Novice

Jul 13, 2004, 3:54 PM

Post #3 of 8 (28721 views)
Shortcut
Re: [mslinn] Adding placeholder for custom XHTML tag [In reply to] Can't Post

Mike

...or it could be that there's no nice & easy way of doing this. However, there may be a difficult & nasty way...

The editor can run your JavaScript plugins when the user hits your custom button. You could probably intercept and process events. But there is no way to change the way that the HTML is rendered.

So you would need to parse your XHTML at the start and change <jsp:whatever/> to <img src="whatever.gif"> and in reverse when saved. Then you would need to program the image functions to ignore your 'special' images. And disable the raw HTML editing mode.

Do your custom XHTML tags ever enclose other tags/text? e.g. <special>blah</special>

If the custom tags include attributes or content then you could strip it out and store it on the server and identify the placeholder by an ID. e.g. <img id="_CSTM1234" src="whatever.gif">

It's probably do-able. Feel free to mail me if you want to hire some help.

Cheers, Julian


mslinn
New User

Jul 13, 2004, 5:50 PM

Post #4 of 8 (28713 views)
Shortcut
Re: [inCharge.co.uk] Adding placeholder for custom XHTML tag [In reply to] Can't Post

Julian,

Thank you for your thoughtful reply. As you said, the approach you suggest is a bit awkward.

BTW, I don't want to disable raw HTML mode. Some users will need this feature.

It would be far better to intercept the custom tags at the rendering stage, rather than to attempt sleight of hand by messing with the source. If you (or anyone else) has any insight on how this might be done, I would like to hear about it.

Mike


inCharge.co.uk
Novice

Jul 14, 2004, 2:42 AM

Post #5 of 8 (28706 views)
Shortcut
Re: [mslinn] Adding placeholder for custom XHTML tag [In reply to] Can't Post

Mike

You would need the browser to provide an event like onRenderElement and JavaScript to provide graphics functionality like the MS Windows GDI, which it doesn't.

Alternatively there may be a contentWindow API that PlugIns can access, but I doubt it.

So the only other way to 'intercept the custom tags at the rendering stage' is to modify the rendering code itself, which you can download from http://www.mozilla.org/source.html. But even if your budget was big enough you'd end up with an Open Source, Desktop product, which is probably not what you're after.

Cheers, Julian


wizzardme2000
New User

Jul 14, 2004, 3:05 PM

Post #6 of 8 (28685 views)
Shortcut
Re: [inCharge.co.uk] Adding placeholder for custom XHTML tag [In reply to] Can't Post

Just make your iframe an xhtml document!


Code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> 
<html xmlns:html="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
html\:mytag {
background: url(imagefile);
width: mehpx;
height: mehpx;
}
</style>
</head>
<body>
<html:mytag></html:mytag>
</body>
</html>


Just add your own namespace (I'm assuming you don't want to use html:) and your done.


(This post was edited by wizzardme2000 on Jul 14, 2004, 3:06 PM)


howenlink
New User

Aug 4, 2004, 1:54 PM

Post #7 of 8 (28484 views)
Shortcut
Re: [mslinn] Adding placeholder for custom XHTML tag [In reply to] Can't Post

We have a similar requirement to insert placeholders but decided not to use an image because images were resizable--an undesirable side-effect. Instead we insert a tiny table with one row and column. It's more flexible because we can control the cell text the user sees.

Put the table within an anchor with contenteditable="false" so the user cannot edit it. It seems to work out really well.

editor.focusEditor();
editor.insertHTML(
"<a contenteditable='false'>
<table id="12345"><tbody><tr><td>Placeholder</td></tr></tbody></table>
</a>" );


mslinn
New User

Aug 4, 2004, 7:41 PM

Post #8 of 8 (28478 views)
Shortcut
Re: [howenlink] Adding placeholder for custom XHTML tag [In reply to] Can't Post

Excellent! Could we talk offline?

Mike
650-345-1140

 
 
 


Search for (options)