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:
customize toolbar


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.

 


amrigo
Novice

Jan 14, 2005, 11:22 AM

Post #1 of 10 (4700 views)
Shortcut
customize toolbar Can't Post

Hi

I would like to know how to customize the toolbar

i take the core.html from the examples folder and these lines at the bottom of the last script tag but nothintg happens where do i am wrong?

var config = new HTMLArea.Config();
config.toolbar = [
['fontname', 'space',
'fontsize', 'space',
'formatblock', 'space',
'bold', 'italic', 'underline']
];
HTMLArea.replace('id', config);


sleemanj
User

Jan 14, 2005, 6:13 PM

Post #2 of 10 (4686 views)
Shortcut
Re: [amrigo] customize toolbar [In reply to] Can't Post

Please post a URL to an example so that we may inspect it in it's entirity.


James Sleeman
PHP Programmer


amrigo
Novice

Jan 17, 2005, 3:35 AM

Post #3 of 10 (4648 views)
Shortcut
Post deleted by amrigo [In reply to]

 


amrigo
Novice

Jan 17, 2005, 4:11 AM

Post #4 of 10 (4641 views)
Shortcut
Re: [sleemanj] customize toolbar [In reply to] Can't Post

Ok now i customize the toolbar but the textarea is not editable, i can not enter text inside the textarea what can it be? the code is the same code posted in the thread!

Thank´s in advance!


sleemanj
User

Jan 17, 2005, 4:49 AM

Post #5 of 10 (4632 views)
Shortcut
Re: [amrigo] customize toolbar [In reply to] Can't Post

Please simplify your testcase (remove commented and superfluous code, trim it down to one custom button) and put it online somewhere.

Try with english instead of portugese. Is this with official htmlarea or my fork. Is it generating any errors? Have you checked in Firefox, checked for errors in Firefox?


James Sleeman
PHP Programmer


amrigo
Novice

Jan 17, 2005, 5:30 AM

Post #6 of 10 (4626 views)
Shortcut
Re: [sleemanj] customize toolbar [In reply to] Can't Post

It is the htmlare 3.0 beta i am using !

i will post it online!

Here is the code with the customized toolbar.

My problem is that the textarea do not show any text inside and also i can not type anything inside .

What can it be? thank´s in advance:

<html>
<head>
<title>edition</title>

<script type="text/javascript">
_editor_url = "../inc/htmlarearc1/";
_editor_lang = "pt_br";
</script>


<script type="text/javascript" src="../inc/htmlarearc1/htmlarea.js"></script>
<script type="text/javascript" src="../inc/htmlarearc1/lang/pt_br.js"></script>


<script type="text/javascript">
var editor = null;
function initEditor() {
editor = new HTMLArea("f_txt_descricao");

var cfg = editor.config; // this is the default configuration
cfg.registerButton({
id : "my-hilite",
tooltip : "Highlight text",
image : "ed_custom.gif",
textMode : false,
action : function(editor) {
editor.surroundHTML("<span class=\"hilite\">", "</span>");
},
context : 'table'
});

cfg.toolbar.push(["linebreak", "my-hilite"]); // add the new button to the toolbar

var cfg = editor.config; // this is the default configuration

function clickHandler(editor, buttonId) {
switch (buttonId) {
case "my-toc":
editor.insertHTML("<h1>Table Of Contents</h1>");
break;
case "my-date":
editor.insertHTML((new Date()).toString());
break;
case "my-bold":
editor.execCommand("bold");
editor.execCommand("italic");
break;
case "my-hilite":
editor.surroundHTML("<span class=\"hilite\">", "</span>");
break;
}
};
cfg.registerButton("my-toc", "Insert TOC", "ed_custom.gif", false, clickHandler);
cfg.registerButton("my-date", "Insert date/time", "ed_custom.gif", false, clickHandler);
cfg.registerButton("my-bold", "Toggle bold/italic", "ed_custom.gif", false, clickHandler);
cfg.registerButton("my-hilite", "Hilite selection", "ed_custom.gif", false, clickHandler);

cfg.registerButton("my-sample", "Class: sample", "ed_custom.gif", false,
function(editor) {
if (HTMLArea.is_ie) {
editor.insertHTML("<span class=\"sample\">&nbsp;&nbsp;</span>");
var r = editor._doc.selection.createRange();
r.move("character", -2);
r.moveEnd("character", 2);
r.select();
} else { // Gecko/W3C compliant
var n = editor._doc.createElement("span");
n.className = "sample";
editor.insertNodeAtSelection(n);
var sel = editor._iframe.contentWindow.getSelection();
sel.removeAllRanges();
var r = editor._doc.createRange();
r.setStart(n, 0);
r.setEnd(n, 0);
sel.addRange(r);
}
}
);

cfg.pageStyle = "body { background-color: #efd; } .hilite { background-color: yellow; } "+
".sample { color: green; font-family: monospace; }";
cfg.toolbar.push(["linebreak", "my-toc", "my-date", "my-bold", "my-hilite", "my-sample"]); // add the new button to the toolbar


var config = new HTMLArea.Config();
config.toolbar = [
['bold', 'italic', 'underline']
];
HTMLArea.replace('f_txt_descricao', config);

editor.generate();
}


</script>

</head>
<body onload="initEditor()">
</div>

<form name="frm" action="salve.php" method="POST" target="control">
Descrição: <textarea cols='50' rows='6' name='f_txt_description' id='f_txt_description'>$bd_txt_description</textarea>

?>
</body>
</html>



sleemanj
User

Jan 17, 2005, 11:02 AM

Post #7 of 10 (4600 views)
Shortcut
Re: [amrigo] customize toolbar [In reply to] Can't Post

 
Here you are creating the editor


Code
editor = new HTMLArea("f_txt_descricao");


Then you do some changes to the config.

But then you do this.


Code
var config = new HTMLArea.Config();  
config.toolbar = [
['bold', 'italic', 'underline']
];
HTMLArea.replace('f_txt_descricao', config);


so you are now using the defaults again. Instead of that you just want


Code
cfg.toolbar = [['bold', 'italic', 'underline']];



Also your field is called f_txt_description, not f_txt_descricao.


Code
<textarea cols='50' rows='6' name='f_txt_description' id='f_txt_description'>$bd_txt_description</textarea>


vs


Code
editor = new HTMLArea("f_txt_descricao");



James Sleeman
PHP Programmer


amrigo
Novice

Jan 18, 2005, 9:48 AM

Post #8 of 10 (4565 views)
Shortcut
Re: [sleemanj] customize toolbar [In reply to] Can't Post

Now is it working ! thanks, i am using your fork of the project
sometimes when i try submit the textarea is submitted empty, when this occur i switch to html mode and the post variables are posted. i attach my file in this thread .

I get this error :

this._doc.body


(This post was edited by amrigo on Jan 18, 2005, 10:05 AM)


amrigo
Novice

Jan 19, 2005, 5:45 AM

Post #9 of 10 (4530 views)
Shortcut
Re: [amrigo] customize toolbar [In reply to] Can't Post

I am using your fork of the htmlarea project


Sometimes after typing the text that i want to submit , when i try submit the entire form, the textarea using htmlarea is submitted with empty value, or no value as if i haven´t typed anything.

What can be wrong?

Switching to html mode the post variables are posted.


sleemanj
User

Jan 19, 2005, 10:43 PM

Post #10 of 10 (4504 views)
Shortcut
Re: [amrigo] customize toolbar [In reply to] Can't Post


In Reply To
I am using your fork of the htmlarea project


Sometimes after typing the text that i want to submit , when i try submit the entire form, the textarea using htmlarea is submitted with empty value, or no value as if i haven´t typed anything.

What can be wrong?

Switching to html mode the post variables are posted.


Can you post this bug report in the thread about my fork so I remember to come back to it. Thanks muchly.


James Sleeman
PHP Programmer

 
 
 


Search for (options)