Legacy Config: modding the toolbar config

adam2003w · 2005-03-02 14:27:07

Ok, I've installed Xinha and I'm trying to change the layout of the toolbar. So I took this code from the htmlarea instructions:

<head>

<script type="text/javascript">
      _editor_url = "/plugins/xinha/";
      _editor_lang = "en";

</script>
<!-- load the main HTMLArea files -->

<script type="text/javascript" src="/plugins/xinha/htmlarea.js"></script>

<script type="text/javascript">
var config = new HTMLArea.Config();
config.toolbar = [
  ['fontname', 'space',
   'fontsize', 'space',
   'formatblock', 'space',
   'bold', 'italic', 'underline']
];
HTMLArea.replace('editor', config);
</script>

</head>

<body onload="HTMLArea.replace('editor')">

... and I can't get it to work. Any ideas?

anzenews · 2005-03-02 15:17:40

Here are some thoughts what could be wrong:

1) the textarea with id="editor" exists, right?
2) you call replace twice (which is wrong)
3) when HTMLArea.replace() is called the textarea does not exist (yet)
4) are the paths ("/plugins/...") right?

So:
- erase onload="..." from body tag
- move the third <script> part to the bottom of the page (just before </body>)
- check (and fix if necessary) the paths

I use:
editor = new HTMLArea('editor',config);
editor.generate();
instead of HTMLArea.replace(), but I figure your way should work too.

Let us know how it goes.

Anze

Last edited by anzenews (2005-03-02 15:19:58)

adam2003w · 2005-03-03 01:33:42

Ok. I'm not sure how cool this solution is. Maybe it's totally backwards, but here's my solution to modifying the toolbar:

1. I want to create differnt toolbars for so that when admins, editors and clients log in to exchange messaage with each other they get different menus.

2. My backwards way of doing it is to duplicate the htmlarea.js file into htmlarea-admin.js, htmlarea-editor.js and htmlarea-client.js and modify the editors toolbars individually.

3. This way I can use one single php include to house all my user var testing and htmlarea call up information.

There's is probably a better way. I just don't know what it is and this works for me now. thanks.

gea · 2005-03-03 07:56:19

hello

for me, it workes like this:

<script type="text/javascript" src="/xinha/htmlarea.js"></script>

// This contains the names of textareas we will make into Xinha editors
xinha_init = xinha_init ? xinha_init : function()
{

/** STEP 1
*******************
* load plugins
**************/
xinha_plugins = xinha_plugins ? xinha_plugins :
[
'CharacterMap',
'ContextMenu',
'ListType',
'TableOperations'
];

// THIS BIT OF JAVASCRIPT LOADS THE PLUGINS, NO TOUCHING
if(!HTMLArea.loadPlugins(xinha_plugins, xinha_init)) return;

/** STEP 2
****************************************
* example 'TextArea1','TextArea2'
********************************/
xinha_editors = xinha_editors ? xinha_editors :
[
'area1','area2'
];

/** STEP 3
***************************************************************
* create a default configuration to be used by all the editor
*************************************************************/

//xinha_config = new HTMLArea.Config();
xinha_config = xinha_config ? xinha_config : new HTMLArea.Config();

xinha_config.width = 670;
xinha_config.height = 480;

xinha_config.toolbar =
[
//["popupeditor","separator"],
["formatblock","fontname","fontsize","bold","italic","underline","strikethrough","separator"],
["forecolor","hilitecolor","textindicator","separator"],
["subscript","superscript"],
["linebreak","justifyleft","justifycenter","justifyright","justifyfull","separator"],
["insertorderedlist","insertunorderedlist","outdent","indent","separator"],
["inserthorizontalrule","createlink","insertimage","inserttable","separator"],
["killword","removeformat","toggleborders","lefttoright", "righttoleft", "separator","htmlmode"]
];

xinha_config.formatblock = {
"— Überschrift —" : '',
"Absatz gross/h1": 'h1',
"Absatz mittel/h2": 'h2',
"Absatz grau/h3": 'h3',
"Normal" : 'p'
};

xinha_config.fontsize = {
"— Grösse —" : '',
"1 (8 pt)" : '1',
"2 (10 pt)": '2',
"3 (12 pt)": '3',
"4 (14 pt)": '4'
};

xinha_config.fontname = {
"— Schriftart —" : '',
"Arial/ Helvetica" : 'arial,helvetica,sans-serif',
"Courier New" : 'courier new,courier,monospace',
"Verdana" : 'verdana,arial,helvetica,sans-serif'
};

//xinha_config = xinha_config ? xinha_config : new HTMLArea.Config();

/** STEP 3
***************************************************************
* We first create editors for the textareas.
*
* You can do this in two ways, either
*
* xinha_editors = HTMLArea.makeEditors(xinha_editors,xinha_config, xinha_plugins);
*
* if you want all the editor objects to use the same set of plugins, OR;
*
* xinha_editors = HTMLArea.makeEditors(xinha_editors, xinha_config);
* xinha_editors['myTextArea'].registerPlugins(['Stylist','FullScreen']);
* xinha_editors['anotherOne'].registerPlugins(['CSS','SuperClean']);
*
* if you want to use a different set of plugins for one or more of the
* editors.
************************************************************************/

xinha_editors = HTMLArea.makeEditors(xinha_editors, xinha_config, xinha_plugins);

/** STEP 4
***************************************************************
* If you want to change the configuration variables of any of the
* editors, this is the place to do that, for example you might want to
* change the width and height of one of the editors, like this...
*
* xinha_editors.config.myTextArea.width = 640;
* xinha_editors.config.myTextArea.height = 480;
*
************************************************************************/

/** STEP 5
***************************************************************
* Finally we "start" the editors, this turns the textareas into
* Xinha editors.
************************************************************************/

HTMLArea.startEditors(xinha_editors);
}

window.onload = xinha_init;
</script>

</head>

anzenews · 2005-03-03 20:48:18

Great! Nice to see how other people do it!

adam2003w: I did something similar with htmlarea2 but had big problem maintaining it. Whenever the Xinha source changes you have to re-apply your changes - a lot of work and easy to introduce bugs in your code.

Why not just change toolbars using HTMLArea.config (as you did in the first post) but instead of using inline JavaScript just use JavaScript include for config-admin.js, config-editor.js and config-client.js:
<script type="text/javascript" src="/path/to/config/js/config-whatever.js" />

It will be much easier for you to maintain your code in the future if you do not change Xinha code directly (unless you get the changes incorporated in the Xinha core of course ).

But there are many ways to skin a proverbial cat...

Enjoy!

Last edited by anzenews (2005-03-03 20:54:04)

adam2003w · 2005-03-04 11:32:07

I'll definitely have to look into this. I don't want to make more trouble for myself by mucking around with the Xinha core.

Xinha Discussion Forum

Announcement

#1 2005-03-02 14:27:07

Legacy Config: modding the toolbar config

#2 2005-03-02 15:17:40

Re: Legacy Config: modding the toolbar config

#3 2005-03-03 01:33:42

Re: Legacy Config: modding the toolbar config

#4 2005-03-03 07:56:19

Re: Legacy Config: modding the toolbar config

#5 2005-03-03 20:48:18

Re: Legacy Config: modding the toolbar config

#6 2005-03-04 11:32:07

Re: Legacy Config: modding the toolbar config

Board footer