Xinha Discussion Forum

castleberry

New member

Registered: 2006-04-05

Posts: 1

What am I missing?!?

I can not seem to get this code to work for anything other than the default configuration. I really need stylist (the plugin) to work. When I comment out the two lines under "comment the following two lines to see how customization works", the editor does not initialize (show up). And where do I put the cfg lines as noted in the stylist plugin page?

I have tried modifying the example pages, but though they list stylist in the plugins array, it doesn't actually appear in the editor (because there is no css page specified?). I migrated from HTMLArea, so maybe my code is all wrong anyway?

I'd appreciate any help. Here is my code:

<script type="text/javascript">
  //_editor_url = "includes/htmlarea/";
  _editor_url = "includes/xinha/";
  _editor_lang = "en";
</script>
<script type="text/javascript" src="includes/xinha/htmlarea.js"></script>
<script type="text/javascript">
var editor = null;
function initEditor() {
  editor = new HTMLArea("ta");

  // comment the following two lines to see how customization works
  editor.generate();
  return false;

  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

  // BEGIN: code that adds a custom button
  // uncomment it to test
  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>");
                }
  });
  */

    editor.registerPlugin(Stylist);
    cfg.stylistLoadStyles('p.red_text { color:red }');
    // Load an external stylesheet like this - NOTE : YOU MUST GIVE AN ABSOLUTE URL otherwise it won't work!
  //cfg.stylistLoadStylesheet('http://admin.theblueflameproject.com/style.css');

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\">  </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.registerButton("my-hilite", "Highlight text", "ed_custom.gif", false,
    function(editor) {
      editor.surroundHTML('<span class="hilite">', '</span>');
    }
  );
  */
  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
  // END: code that adds a custom button

  editor.generate();
}
function insertHTML() {
  var html = prompt("Enter some HTML code here");
  if (html) {
    editor.insertHTML(html);
  }
}
function highlight() {
  editor.surroundHTML('<span style="background-color: yellow">', '</span>');
}
</script>

Last edited by castleberry (2006-04-06 00:02:27)

ray

Xinha Administrator

From: Germany

Registered: 2005-03-23

Posts: 521

Website

Re: What am I missing?!?

This is the the old HTMLarea sample config, isn't it
? You have got to explicitly load the the plugins you want to use by calling HTMLArea.loadPlugin("Stylist"); etc. before you call registerPlugin().
Anyway I suggest you to have a look at the Xinha Newbie Guide and consider using the way to load xinha like it´s proposed there. I think it´s easier and more stable, esp. the plugin-loading