implementing custom buttons - need help!

Dec 8, 2010 at 2:22 PM
Edited Dec 8, 2010 at 2:45 PM

I've been using sort of a hybrid-BBcode format in my CMS for a while (text-mode only), and now i'm looking for a wysiwg implementation. Your BBCode editor is great, BUT i still need to implement a few unusual tag buttons.

Beware, JavaScript is also not my turf.

 

JitBit wysiwg uses the execCommandMethod, as it seems. This method has a limited amount of supported parameters.

For example, there is 'bold', 'italic', etc., but it does not support a 'StrikeThrough' parameter (i.e. doClick('StrikeThrough') which then translates into myeditor.execCommand(StrikeThrough, false, null) just doesn't work by specification).

This is a wysiwg mode-only problem for me. To make these new tag buttons work in the BBcode source mode is easy (you already provided the AddTag function). There is also a bit of translation html->bbcode and bbcode->html; that also is easy to comprehend.

 

So i tried, got something like this:

 

 <button title="strikethrough" onclick="doUnsupportedClick('StrikeThrough');" type="button"><s>S</s></button>

 

and this:

 

function doUnsupportedClick(command) {
  switch (command) {
  case 'StrikeThrough':
  if (editorVisible) {
  ifm.contentWindow.focus();   
  var front = (myeditor.value).substring(0,selectionStart);
  var middle = (myeditor.value).substring(selectionStart,selectionEnd);
  var back = (myeditor.value).substring(selectionEnd,myeditor.value.length);
  myeditor.value=front+'<s>'+middle+'</s>'+back;
  myeditor.focus();
  break;
  } else {
  AddTag('[s]', '[/s]'); break;
  }
  }
}

See, i dont even know how to "grab" the editor object (i presume it's the 'myeditor' thingie). Please, help me.

 

EDIT: this is how the execCommand JS class looks on the inside ... in case it inspires someone.

Dec 8, 2010 at 4:32 PM
Edited Dec 8, 2010 at 4:32 PM

Update: there is a function in the original code that looks simply enough for me derive whatever special button i need from it.

 

 function doQuote() {
  if (editorVisible) {
  ifm.contentWindow.focus();
  if (isIE) {
  textRange = ifm.contentWindow.document.selection.createRange();
  var newTxt = "[quote=]" + textRange.text + "[/quote]";
  textRange.text = newTxt;
  }
  else {
  var edittext = ifm.contentWindow.getSelection().getRangeAt(0);
  var original = edittext.toString();
  edittext.deleteContents();
  edittext.insertNode(document.createTextNode("[quote=]" + original + "[/quote]"));
  }
  }
  else {
  AddTag('[quote=]', '[/quote]');
  }
}

 

But it is broken (and so is the code snippets feature of this editor im typing into!). The doQuote() function works in Firefox, but in Opera or Chrome, it just deletes the text selected. Damn!