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 - Discussion:
registerDropdown function?


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.

 


mschering
Novice

Aug 23, 2003, 10:56 AM

Post #1 of 24 (10063 views)
Shortcut
registerDropdown function? Can't Post

Hi,

Can somebody post an example of how to use the registerDropdown function? I want to create a custom dropdown box that contains all styles from a stylesheet when a user selects it the text should be surrounded by <span class="someClass"></span>.

The formatblock config option doesn't seem to have that capabilities.

Best regards,

Merijn Schering


Custa
Novice

Sep 2, 2003, 1:35 AM

Post #2 of 24 (10030 views)
Shortcut
Re: [mschering] registerDropdown function? [In reply to] Can't Post

This is another function I am really hanging for apart from the Word cleaning functions. The people who I am trying to build a small system for are not the most computer savvy so they will need to clean their word documents and then style them easily with some CSS styles I build for them. Only a couple though coz if you give people too much choice you may aswell through all design out the window.


kriss
New User

Sep 4, 2003, 12:32 PM

Post #3 of 24 (9997 views)
Shortcut
Re: [mschering] registerDropdown function? [In reply to] Can't Post

Hi,

Because I was looking of css-able WYSIWYG-HTML-Editor i tried htmlarea for 2 days now.
Here is my example of how using css and the registerDropdown-function:

First I had to re-enable the stylesheet feature in this way:
The config.stylesheet can be enabled, if you patch the initIframe() code by using this snippet:
replace this line

Code
html += "<style>" + editor.config.pageStyle + "</style>\n";

with this block:

Code
if (editor.config.stylesheet != "undefined") { 
html += '<style type="text/css" media="all"> @import url('+editor.config.stylesheet+');</style>';
} else {
html += "<style>" + editor.config.pageStyle + "</style>\n";
}


Now you can use the registerDropdown-function in a way like this:


Code
function customize(editor) { 
var config=editor.config;
config.registerDropdown( {
id: "Titels",
tooltip: "Assign Titel Level",
options: {"Titel 1":"titel1","Title 2":"titel2","Titel 3":"titel3","Normal":""},
context : "p",
action: function(editor) {
cmd = 'Titels';
var selectbox = editor._toolbarObjects[cmd].element;
var txt = selectbox[selectbox.selectedIndex].value;
var el = editor.getParentElementByName(editor.config.customSelects[cmd].context.toLowerCase());
if (el) {
el.className=txt;
editor.updateToolbar();
}
},
refresh: function(editor) {
cmd = 'Titels';
var selectbox = editor._toolbarObjects[cmd].element;
var el = editor.getParentElementByName(editor.config.customSelects[cmd].context.toLowerCase());
if (el) {
var i = 0;
var options = editor.config.customSelects[cmd].options;
for (var key in options) {
if (options[key] == el.className) {
selectbox.selectedIndex = i;
break;
}
++i;
}
}
}
} );
config.stylesheet = "your_stylesheet.css";
config.toolbar.push(["Titels"]);
}

// Returns the next upper parent element (relative to current cursor-position) matching nodeName
HTMLArea.prototype.getParentElementByName = function(nodeName) {
var el = null;
var ancestors = this.getAllAncestors();
for ( var j = 0; j < ancestors.length; j++) {
el = (ancestors[j] && ancestors[j].nodeName.toLowerCase() == nodeName.toLowerCase()) ? ancestors[j] : null;
if (el) break;
}
return el;
}


As you can see, i've extended the the HTMLArea-prototype with a getParentElementByName-function which I use to fetch the next upper element matching my context.
The main parts of interests are the refresh- and the action- attribute. All you have to do is to paste this code into a new file (custom.js), integrate this file in your editor-html-page (example.html)

Code
<script type="text/javascript" src="custom.js"></script>

and call the customize(editor)-function before the editor.generate()-Statement.

Code
... 
<script type="text/javascript">
var editor = null;
function initEditor() {
editor = new HTMLArea("ta");
customize(editor);
editor.generate();
}
</script>
...


I've not finished my evaluation, but it looks ok for now.

Maybe this helps.

cu

Kriss


mschering
Novice

Sep 6, 2003, 4:17 PM

Post #4 of 24 (9973 views)
Shortcut
Re: [kriss] registerDropdown function? [In reply to] Can't Post

Thank you Kriss! That was what I was looking for!
I slightly modified the action and refresh function so it won't just update one element like just <p> tags:

action function:

function(editor)
{
cmd = 'css_styles';
var selectbox = editor._toolbarObjects[cmd].element;
var txt = selectbox[selectbox.selectedIndex].value;
editor.surroundHTML("<span>", "</span>");
var el = editor.getParentElementByName("span");
if (el)
{
el.className=txt;
editor.updateToolbar();
}
}';

refresh function:

function(editor)
{
cmd = 'css_styles';
var selectbox = editor._toolbarObjects[cmd].element;
var el = editor.getParentElementByName("span");
selectbox.selectedIndex = 0;
if (el)
{
var i = 0;
var options = editor.config.customSelects[cmd].options;
for (var key in options)
{
if (options[key] == el.className)
{
selectbox.selectedIndex = i;
break;
}
++i;
}
}
}';

Hope this helps someone,

Best regards,

Merijn


(This post was edited by mschering on Sep 6, 2003, 4:19 PM)


O.J.
Novice

Oct 23, 2003, 11:48 AM

Post #5 of 24 (9616 views)
Shortcut
Re: [mschering] registerDropdown function? [In reply to] Can't Post

Really good Job thanks alot.

But Please help, what i have to delete if i just wanna to input my .css file. It works allready with your code. But i dont want to have this optionbox there.

What i have to do? I've tried all i can but it seems not alot to be.
[image]http://www.halbgasse.at/engines/images/O.J./vsky.gif[/image]


O.J.
Novice

Oct 23, 2003, 11:54 AM

Post #6 of 24 (9617 views)
Shortcut
Re: [O.J.] registerDropdown function? [In reply to] Can't Post

Now i know how it works!! Great!

i have just to delete: config.toolbar.push(["Titels"]);
[image]http://www.halbgasse.at/engines/images/O.J./vsky.gif[/image]


mrnetfellow
Novice

Nov 4, 2003, 10:13 PM

Post #7 of 24 (9468 views)
Shortcut
Re: [kriss] registerDropdown function? [In reply to] Can't Post

I wonder if there is any consideration for building similar into the final release of 3.0?


agf
User

Feb 11, 2004, 10:32 AM

Post #8 of 24 (8703 views)
Shortcut
Re: [kriss] registerDropdown function? [In reply to] Can't Post

Any way to dynamically populate the options based on an existing .css?


agf
User

Mar 26, 2004, 4:11 PM

Post #9 of 24 (8329 views)
Shortcut
Re: [mschering] registerDropdown function? [In reply to] Can't Post

sorry to ask again, but is there any way to populate the options dynamically? i have a JSP that outputs different stylesheet for each user ... that part is no prob, but I can not figure out how to load the titles in to options dynamically.


martekbiz
Novice

May 6, 2004, 8:24 AM

Post #10 of 24 (8061 views)
Shortcut
Re: [agf] registerDropdown function? [In reply to] Can't Post

BUMP.. anyone know anything about this?


agf
User

May 6, 2004, 8:33 AM

Post #11 of 24 (8058 views)
Shortcut
Re: [martekbiz] registerDropdown function? [In reply to] Can't Post

Got it working ...

What do you need?

I used a little JSP to read a client CSS into a dropdown...

Worked like a charm.

Check out this thread:
http://www.interactivetools.com/forum/gforum.cgi?post=26111;search_string=css;#26111


martekbiz
Novice

May 6, 2004, 8:40 AM

Post #12 of 24 (8057 views)
Shortcut
Re: [agf] registerDropdown function? [In reply to] Can't Post

Hi there and thanks for your reply!

First it must be said, I am a completely useless when it comes to Java anything, except the coffee! ;)

I am using Luis's editor which as I understand, it just a modified version of htmlarea.

I looked at your code but a) I have no clue what it does; and B) I don't know WHERE to put it.

See? clueless :(

Any guidance?

Thanks!!!

Aaron


agf
User

May 6, 2004, 9:01 AM

Post #13 of 24 (8056 views)
Shortcut
Re: [martekbiz] registerDropdown function? [In reply to] Can't Post

What do you want to do?

You certainly do not need to use JSP, any server side code will work ... I guess.

I know nothing about Luis' editor - do you have a URL for it?


martekbiz
Novice

May 6, 2004, 12:52 PM

Post #14 of 24 (8049 views)
Shortcut
Re: [agf] registerDropdown function? [In reply to] Can't Post

Hi there,

First off, Luis Editor is a modifiy version 2 of htmlarea. Looks to be the same setup but with more features.

What am I trying to do? Simple:

Reference a .css file that's values (styles) are displayed in a dropdown menu in the editor so that I can select them to use with my text.

Does that make sense?

Isn't that what you were trying to do?

Thanks!

Aaron


agf
User

May 6, 2004, 1:32 PM

Post #15 of 24 (8047 views)
Shortcut
Re: [martekbiz] registerDropdown function? [In reply to] Can't Post

Do you have a link for that editor?

I'd like to have a look.

I used the plugin for my CSS dropdown... you don't want to?

In the examples folder there is a HTML page that shows how to use it...


martekbiz
Novice

May 6, 2004, 1:37 PM

Post #16 of 24 (8045 views)
Shortcut
Re: [agf] registerDropdown function? [In reply to] Can't Post

I'd like to use the CSS Plugin, I guess. I didn't know it existed.

The documentation for this entire program is very suspect and hard to follow :(

Here's the Luis Editor Link:

http://www.webstationone.com/test/htmlarea/Editor/example.html

Personally, I'd like to use Luis Editor, if I could figure out how to get CSS working. It's based on version 2 though.

Aaron


agf
User

May 6, 2004, 1:52 PM

Post #17 of 24 (8041 views)
Shortcut
Re: [martekbiz] registerDropdown function? [In reply to] Can't Post

Can't help with the Luis Editor - it doesn't work in Firefox .. I don't have IE...

but if you grab the lastest copy of HTMLarea from here:
http://prdownloads.sourceforge.net/itools-htmlarea/HTMLArea-3.0-beta.zip?download

And have a look at:
HTMLArea-3.0-rc1\examples\css.html

That should help get you started.


martekbiz
Novice

May 6, 2004, 2:17 PM

Post #18 of 24 (8039 views)
Shortcut
Re: [agf] registerDropdown function? [In reply to] Can't Post

Hi there,

Actually, I already have version 3 downloaded and installed. I never saw the "examples" folder before you mentioned it.

Now I see how this works and I think it will be doable for me to use this editor but I have two problems.

Version 2 and 3 of htmlarea (not a modified version) don't produce cleanly written HTML. ALL the code is jumbled together. I really need to have written on separate lines, just like a real HTML editor would or if I had written the code by hand.

Next, I can't get Images to show up for some reason. They'll upload but no thumbnail ever shows, it's just a blank (X) image.

IF I could resolve these two issues, I'd be fine and good to go. I don't know what to do. Any suggestions?

Thanks again for your help!!

Aaron


agf
User

May 6, 2004, 2:21 PM

Post #19 of 24 (8037 views)
Shortcut
Re: [martekbiz] registerDropdown function? [In reply to] Can't Post

There are a few people looking for HTMLArea to output some cleaner code... I'm one of them ;)

The default image button uses absolute images AFAIK... so.. try this instead...

http://www.interactivetools.com/common/header_logo.gif


martekbiz
Novice

May 6, 2004, 2:24 PM

Post #20 of 24 (8036 views)
Shortcut
Re: [agf] registerDropdown function? [In reply to] Can't Post


In Reply To
There are a few people looking for htmlArea to output some cleaner code... I'm one of them ;)

The default image button uses absolute images AFAIK... so.. try this instead...

http://www.interactivetools.com/common/header_logo.gif



Yeah, cleaner code is a must, BUT that Luis Editor DOES output clean code and even the editor in something like Mambo which uses htmlarea version 2 products clean code.

I know images need absolute URLS. I was referring to when I use ImageManager, the images don't actually show up.

Aaron


agf
User

May 6, 2004, 2:38 PM

Post #21 of 24 (8034 views)
Shortcut
Re: [martekbiz] registerDropdown function? [In reply to] Can't Post

you could likely have the code in HTMLArea changed during POST to be 'cleaner'...

Sorry, not using image manager...


martekbiz
Novice

May 6, 2004, 2:56 PM

Post #22 of 24 (8029 views)
Shortcut
Re: [agf] registerDropdown function? [In reply to] Can't Post


In Reply To
you could likely have the code in htmlArea changed during POST to be 'cleaner'...



agf
User

May 6, 2004, 3:03 PM

Post #23 of 24 (8025 views)
Shortcut
Re: [martekbiz] registerDropdown function? [In reply to] Can't Post

you could likely have the code in htmlArea changed during POST to be 'cleaner'...

..what I mean is that when you hit save or whatever you do to udpate content with the text from HTMLArea, run it against a validation function on the server side...


martekbiz
Novice

May 6, 2004, 3:05 PM

Post #24 of 24 (8024 views)
Shortcut
Re: [agf] registerDropdown function? [In reply to] Can't Post


In Reply To
you could likely have the code in htmlArea changed during POST to be 'cleaner'...

..what I mean is that when you hit save or whatever you do to udpate content with the text from HTMLArea, run it against a validation function on the server side...


 
 
 


Search for (options)