Configuring internal Xinha editor

[MrLeeh]

Hello,

I have a question concerning the internal Xinha editor. I' d like to change some buttons and enable some included plugins. But I cannot find which file to use for configuring the Xinha editor. On the Xinha homepage they are using a my_config.js for this purpose. Can someone tell me where i can make the configuration in Serendipity?

Thanks a lot
Stefan

[garvinhicking]

Hi!

Sadly I'm not that proficient with Xinha. We init that inside the file include/functions_entries_admin.inc.php in the function serendipity_emit_htmlarea_code(). Xinha itself is stored inside the /htmlarea subdirectory.

Do you maybe know what to add to our code so that you are able to easily customize what you need?

Regards,
Garvin

[MrLeeh]

Hello Garvin,

I' ve been "tüfteling" for a while and now I can use a my_config.js file for configuring Xinha. I made the following changes:

1. In the file /include/functions_entries_admin.inc.php I changed the code in line 565-567:

Code: Select all

<?php if ($xinha) { ?><script type="text/javascript" src="htmlarea/XinhaCore.js"></script><script type="text/javascript" src="htmlarea/my_config.js"></script>
    <?php } else { ?><script type="text/javascript" src="htmlarea/htmlarea.js"></script>
    <?php } ?>

And commented the lines 735, 736:

Code: Select all

        //editor<?php echo $jsname; ?>.generate();
        //editor<?php echo $jsname; ?>._textArea.className = 'serendipity_entry';

2. I added the file my_config.js to the /htmlArea folder:

Code: Select all

xinha_editors = null;
xinha_init    = null;
xinha_config  = null;
xinha_plugins = null;

// This contains the names of textareas we will make into Xinha editors
xinha_init = xinha_init ? xinha_init : function()
{
   /** STEP 1 ***************************************************************
   * First, specify the textareas that shall be turned into Xinhas. 
   * For each one add the respective id to the xinha_editors array.
   * I you want add more than on textarea, keep in mind that these 
   * values are comma seperated BUT there is no comma after the last value.
   * If you are going to use this configuration on several pages with different
   * textarea ids, you can add them all. The ones that are not found on the
   * current page will just be skipped.
   ************************************************************************/
  
  xinha_editors = xinha_editors ? xinha_editors :
  [
    'serendipity[body]',
    'serendipity[extended]'
  ];
  
  /** STEP 2 ***************************************************************
   * Now, what are the plugins you will be using in the editors on this
   * page.  List all the plugins you will need, even if not all the editors
   * will use all the plugins.
   *
   * The list of plugins below is a good starting point, but if you prefer
   * a simpler editor to start with then you can use the following 
   * 
   * xinha_plugins = xinha_plugins ? xinha_plugins : [ ];
   *
   * which will load no extra plugins at all.
   ************************************************************************/

  xinha_plugins = xinha_plugins ? xinha_plugins :
  [
   'CharacterMap',
   'ContextMenu',
   'ListType',
   'Stylist',
   'Linker',
   'SuperClean',
   'TableOperations',
   'Equation',
   'QuickTag'
  ];
  
         // THIS BIT OF JAVASCRIPT LOADS THE PLUGINS, NO TOUCHING  :)
         if(!Xinha.loadPlugins(xinha_plugins, xinha_init)) return;


  /** STEP 3 ***************************************************************
   * We create a default configuration to be used by all the editors.
   * If you wish to configure some of the editors differently this will be
   * done in step 5.
   *
   * If you want to modify the default config you might do something like this.
   *
   *   xinha_config = new Xinha.Config();
   *   xinha_config.width  = '640px';
   *   xinha_config.height = '420px';
   *
   *************************************************************************/

   xinha_config = xinha_config ? xinha_config() : new Xinha.Config();
   
        
   // To adjust the styling inside the editor, we can load an external stylesheet like this
   // NOTE : YOU MUST GIVE AN ABSOLUTE URL
  
   //xinha_config.pageStyleSheets = [ _editor_url + "examples/custom.css" ];
   xinha_config.fontsize =
	{
	  "— Size —": "",
	  "1 (8 pt)" : "1",
	  "2 (10 pt)": "2",
	  "3 (12 pt)": "3",
	  "4 (14 pt)": "4",
	  "5 (18 pt)": "5",
	  "6 (24 pt)": "6",
	  "7 (36 pt)": "7"
	};
	
  xinha_config.toolbar = [
    [ "fontname", "space",
      "fontsize", "space",
      "formatblock", "space",
      "bold", "italic", "underline", "strikethrough", "separator",
      "subscript", "superscript", "separator",],

    [ "justifyleft", "justifycenter", "justifyright", "justifyfull", "separator",
      "orderedlist", "unorderedlist", "outdent", "indent", "separator",
      "forecolor", "hilitecolor", "separator",
      "inserthorizontalrule", "createlink", "insertimage", "inserttable", "htmlmode", "separator",
      "popupeditor", "separator", "showhelp", "about" ]      
    ];

  /** STEP 4 ***************************************************************
   * We first create editors for the textareas.
   *
   * You can do this in two ways, either
   *
   *   xinha_editors   = Xinha.makeEditors(xinha_editors, xinha_config, xinha_plugins);
   *
   * if you want all the editor objects to use the same set of plugins, OR;
   *
   *   xinha_editors = Xinha.makeEditors(xinha_editors, xinha_config);
   *   xinha_editors.myTextArea.registerPlugins(['Stylist']);
   *   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   = Xinha.makeEditors(xinha_editors, xinha_config, xinha_plugins);

  /** STEP 5 ***************************************************************
   * 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.myTextArea.config.width  = '640px';
   *   xinha_editors.myTextArea.config.height = '480px';
   *
   ************************************************************************/


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

  Xinha.startEditors(xinha_editors);
}

Xinha._addEvent(window,'load', xinha_init); // this executes the xinha_init function on page load 
                                            // and does not interfere with window.onload properties set by other scripts

Now you are able to use this config-file for customizing Xinha (see the following link for available options: http://xinha.raimundmeyer.de/JSdoc/Xinh ... onfig.html).
What I don' t like now is that there is no more Serendipity-button for inserting pictures from the library. But maybe there is a way to include them.

Best regards
Stefan

[garvinhicking]

Hi!

Great stuff; but I believe there could be problems when using xinha for HTML Nuggets and staticpages now, as they have different names. The editor<?$jsname;?> is important for that, so we'd need to find a way to supply those somehow. I'll see if I can work out something for this...

Regards,
Garvin

[seetext]

Hallo, Garvin and mrleeh ...

In principle I agree with Garvin that wysiwyg-editors are bad for coding.
Nevertheless it's often more comfortable to drive than to walk.

Xinha would be a nice solution for sy9 if it would be possible to use the xinha plugins, which allow much better output than by default, e.g. the DynamicCSS plugin or things alike. And if it would be possible to remove waste buttons like the font style settings. Xinha itself offers much more power than you can access in the default s9y xinha installation. Im not a programmer, but I tried to find a way to activate the plugins. The xinha docs say it is easy to do. But I did not find a way in s9y.

So I took the hint of mrleeh and played a little bit around.
Maybe he was on the right path. Why not use the xinha way to integrate the editor?

You're right with the naming problems in static pages and Html nuggets. But the only thing xinha needs to know is the id of each textfield. And static pages and other textareas do all have their id (ok. "nugget3" and "nugget9" for example are not very self explaining, but can be used for xinha as well). If we follow mrleehs path and add these ids to a xinha config file like this

Code: Select all

 xinha_editors = xinha_editors ? xinha_editors :
  [
    'serendipity[body]',
    'serendipity[extended]'
    'nugget3'
    'nugget9'
  ];

the $jsname stuff can possibly be omitted and xinha will run in s9y as it does in other systems. With all possibilities to extend and reduce functions as needed.

And if in addition xinha is linked with a stripped version of the css file(s) which is used in the active template, (just edit line 178 in XinhaCore.js)

Code: Select all

this.pageStyle="";
this.pageStyleSheets=["/de/templates/bulletproof_v1_2/xinha_seetext.css"];
this.baseHref=null;

we have a nice (almost) true wysiwyg editor that produces fine code. For example see the following shot of a static page in s9y admin mode:


IMHO the way of xinha integration should be reconsidered, shouldn't it?

regards and kudos to the s9y team from a wp tortured guy

Martin

[garvinhicking]

Hi!

Oh, i completely forgot about this one. I'll have a look next week and try to figure a good way for dynamic spawning, if possible. Static versions are much easier to fix than our dynamic approach. Cusdton staticpage templkates could have a multitude of nuggets, even named differently...

Regards,
Garvin

[seetext]

Hi Garvin,
You're the best. A way that combines the full power of s9y and the real possibilities of xinha's plugins would lift s9y to a new level of user-friendliness (which is already far ahead to other systems). By the way, I really like the clean concept of s9y. Therefor, if a better xinha integration would lead to bloated code in s9y, please forget what I asked for.

Martin

[yellowled]

Do I get this right? We'll be able to have some sort of customized flavour of Xinha, maybe even be able to remove some of the unnecessary buttons from it's menu?

YL

[seetext]

Yep. At least I hope so. I'm not a programmer, just a stupid technical writer with nearly no experience in PHP programming. But maybe I can plant visions in a programmers brain. It seems not to be very easy to fully integrate Xinha in sy9 for Xinha requires the ids of each textarea. But since I found Raimund Meyers Xinha Demo page:

http://xinha.raimundmeyer.de/x_examples ... ample.html

I can imagine, what a proper integration of Xinha may mean for s9y.
If a personalized script file can be used (as mrleeh suggested), it's also very simple to remove waste buttons/functions from Xinha.

Maybe Raimund Meyer, who seems to have profound knowledge about Xinha can help?
I found his adress at http://raimundmeyer.de/Kontakt/
- and it seems, he's nearly a neighbour of Garvin

greetings from germanys south

Martin

[garvinhicking]

Hi!

Thanks for your help here. I'm not a Xinha expert, so I'm learning on the fly here.

Why I committed right now is an approach a bit different, with less breakage. Instead of doing the whole initialization with a my_config.js file we will be needing to hook a custom user function call after the usual s9y proceedings. This ensures, that all plugins and custom toolbar buttons will react as usual, if a user does NOT use a my_config.js file, and to save us some trouble of migrating a lot of javascript.

So, a file "my_custom.js" is now loaded, which can either be part of a template directory, or the default htmlarea/my_custom.js. It specifies a function "s9y_xinha" that passes the Xinha editor object, with the default s9y routines already applied.

You can then overwrite the toolbar specifiction, register/unregister plugins, change CSS, font-sizes etc. through that file. The best way is to supply this inside your template directory, as it will then not be overwritten by s9y updates.

Some basic documentation and example usages is contained in htmlarea/my_custom.js.

Please tell me what you think about it:

http://svn.berlios.de/viewcvs/serendipi ... ision=2558

Regards,
Garvin

[seetext]

Wow. Garvin, you're the greatest, as I said before.
I just took your my_config.js script and modified it with the info from
http://xinha.webfactional.com/wiki/NewbieGuide
and added a style_fallback.css to my template directory.

Your solution runs like a charm. Tested it with FF3, IE6. Opera 9.63 and SRWare_Iron (=Chrome).

Then I stole the whole toolbar button list from NewbieGuide, slightly reordered the buttons and added the 'image_selector', so that it shall be possible to customize the toolbar to everyone without any knowledge of scripting.

Code: Select all

function s9y_xinha(xinha_editor) {
   
    xinha_editor.config.pageStyleSheets = [ _editor_url + 'custom.css' ];
    xinha_editor.config.fontsize = { 
        "1 (8 pt)" : "1",
        "2 (10 pt)": "2",
        "3 (12 pt)": "3",
        "4 (14 pt)": "4",
        "5 (18 pt)": "5",
        "6 (24 pt)": "6",
        "7 (36 pt)": "7"
    }
 
    xinha_editor.config.toolbar = 
  [
    ["popupeditor"],
    ["separator","textindicator"],   ["separator","formatblock","space","fontname","space","fontsize","space","bold","italic","underline","strikethrough"],
    ["separator","forecolor","hilitecolor"],
    ["separator","subscript","superscript"],
    ["linebreak","separator","justifyleft","justifycenter","justifyright","justifyfull"],
    ["separator","insertorderedlist","insertunorderedlist","outdent","indent"],   ["separator","inserthorizontalrule","createlink","insertimage","image_selector","inserttable","toggleborders"],
    ["linebreak","separator","undo","redo","selectall","print"], (Xinha.is_gecko ? [] : ["cut","copy","paste","overwrite","saveas"]),
    ["separator","killword","clearfonts","removeformat","splitblock","lefttoright", "righttoleft"],
    ["separator","htmlmode","showhelp","about"]
  ];
}

But alas a problem is still present: The xinha plugins do not load even if I try to register them via

Code: Select all

xinha_editor.registerPlugin('PluginName');

It seems that the plugins need to be loaded prior to be "registered". For I'm everything but a programmer, I do not understand where and why, but maybe you can figure it out by taking a look at step3 two of the xinha NewbieGuide http://xinha.webfactional.com/wiki/NewbieGuide and the source of XinhaCore.js http://svn.xinha.org/trunk/XinhaCore.js
Without the plugins Xinha is just half the thing it could be.

Thanks for you help.
Martin

[garvinhicking]

Hi!

Great, thanks for letting me know. I'll try to find the issue; can you tell me an easy plugin that I could use for testing? I've never played with xinha plugins, so I'd need to use one where I can easily see if it works or if it doesn't, and best, a small plugin

Regards,
Garvin

[seetext]

Hallo Garvin,
I do not have much experience myself, but HorizontalRule should be fine for testing.
This plugin just adds a button to the toolbar to insert a horizonal line into the text ...
nomen est omen
The most interesting plugins for s9y are IMHO those who allow using predefined
css styles instead of using hardcoded font tags e.g. DynamicCSS.

An almost complete list of plugins with explanations can be found at:

http://trac.xinha.org/wiki/Plugins

Good luck ...

[garvinhicking]

Hi!

Okay, I've fixed & committed the my_custom.js example code to properly load a plugin! You were right, prior to using registerPlugin, a loader needed to be called, and only the callback routine of that is allowed to "really" register a plugin.

Regards,
Garvin

[seetext]

Bingo!

I'll do some tests on various browsers and systems and will tell you the results.
btw. (if someone else likes to test): Garvins new my_config.js is here:
http://svn.berlios.de/viewcvs/serendipi ... ision=2560

Thanks a lot

Martin