A directory of browser-based WYSIWYG editors


Home: htmlArea 2: htmlArea 2 & 3 archive (read only): htmlArea v2.0:
custom popup window

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.



Sep 1, 2002, 7:59 AM

Post #1 of 3 (4497 views)
custom popup window Can't Post

I'd like to add a new button on the main panell.

The main purpose is to add a custom phrase just like editor_insertHTML does but asking before, via popup window, the phase you want to add. The user should choose the phrase from a select field... let say..

Adding the button is very easy, but, create the popup windows is quite hard. I tryed to get some ideas looking on 'insertimage' source code but did not understant almost nothing.

Can someone help me?

thank you in advance,

ciao ciao



Staff / Moderator

Sep 4, 2002, 3:34 PM

Post #2 of 3 (4408 views)
Re: [lepo] custom popup window [In reply to] Can't Post

Basically, what you need to do is add a button that creates a popup dialog when clicked, then you need to have the dialog return a value, and then call editor_insertHTML with that value.

Create button - open editor.js and find the line that adds the "insert image" button (line 111) in the editor_generate() function, copy and paste that line and change the ID name, and image like this:

+ '<button title="Insert Text" id="_' +objname+ '_pulldowntext" class="btn" onClick="editor_action(" unselectable="on"><font face=wingdings size=4>J</font></button>'

I put a little wingdings smiley face in the button, you can use an image or whatever you like. After objname you specify the "cmdID". This is what's passed to editor_action() and needs to be all text (no underscores).

Popup Dialog - in the editor_action function find the block commented as "insert image", copy and paste that and modify it to look like this:

// insert pulldown text
else if (cmdID.toLowerCase() == 'pulldowntext'){
var text = showModalDialog(_editor_url + "select_phrase.html", null,
"resizable: yes; help: no; status: no; scroll: yes; "
+" dialogWidth:300px; dialogHeight: 60px; ");
editor_insertHTML(objname, text);

Since we gave your button a cmdID of "pulldowntext" we look for that in the if statement. If the statement returns true we popup a dialog window from the file "select_phrase.html" (see attached file). That file has some javascript that returns the selected text. We catch that in the "text" variable and then call editor_insertHTML with that value and we're done.

I've attached a editor.js and select_phrase.html file that you can see as an example. Adding buttons isn't super easy to do but it's not overly hard either if you're moderately comfortable with javascript.

Hope that helps!

Dave Edis - Senior Developer
Attachments: select_phrase.html (0.73 KB)
  editor.js (31.9 KB)


Sep 5, 2002, 5:51 AM

Post #3 of 3 (4388 views)
Re: [Dave] custom popup window [In reply to] Can't Post

wow !

thank you sooooo much for your excellent example... and for your time.

Wink lepo - italy



Search for (options)