Home: htmlArea 2: htmlArea 2 & 3 archive (read only): htmlArea v2.0 - Add-Ons:
Tip insert mod


Feb 7, 2005, 1:47 PM

Views: 42751
Tip insert mod

Hi everyone

HtmlArea is now so mature and impressive that it's quite difficult to imagine anything new to add to it. While browsing through some websites, I often came across DHTML info tips popping up as the mouse went over words or links So I tried to use Javascript to generate the same effects. I found lots of ready -to-use scripts. But these had to be changed and adapted whenever I wanted to use them. Too complicated indeed for every day use.

I then tried to think of a new mod for HtmlArea. In fact it didn't take me long. I knew that the DIV option "title="XXXXXXX" popped up a tip. I adapted the insert_link mod to do the job. I added the <b> and </b> tags so that the selected words to be tipped, should appear in bold. It works on any word, on links and on buttons. (Note that links have to be inserted last. (If you try to insert a tip on a link, the link will be erased. So, first insert the tip, then the link). As a teacher I really appreciate this new feature which enables me to add explanations on the fly. You can see it working here on my test page.


First select a word or more , by highlighting it or them (as you would do for inserting a link). Click on the last icon on the second row. This one .Type your tip in "bulle ici". Test right away. The tip appears in HtmllArea.

I have attached the files insert_bulles.html and bulle.gif here

To intall the mod
1) Add a new button to "this.toolbar = [ (I would suggest "tip")
2) Add the line
"tip": ['tips', 'Insert tips', 'editor_action(this.id)', 'ed_bulle.gif'], to your btnlist
3) add the following code to the editor at the requested place

if (cmdID.toLowerCase() == 'tips') {
if (editdoc.selection.createRange().text != "") {
var highlightedText = editdoc.selection.createRange().text;
} else {
var highlightedText = "";
var myText = showModalDialog(_editor_url + "popups/insert_bulles.html",
"resizable: no; help: no; status: no; scroll: no; ");
if (myText) {
editor_insertHTML(objname, unescape( myText) );

There you are !!

Feel free to use it as you please if you think it might be helpful

STERVINA Lannion France


(This post was edited by stervina on Feb 9, 2005, 10:33 AM)
Attachments: tip.zip (1.62 KB)


Feb 14, 2005, 7:29 PM

Views: 42598
Re: [stervina] Tip insert mod

His Stervina:

I've been sick at bed for the last week. I'll take a look as soon as I feel better. Greetings.

Don't give up!!