Button Events / Toolbar Separation

[webPragmatist]

I have completely separated the html of the editor into my own editor but it still has the same classes (ie: wym_tools_strong) but somehow I broke the onclick events.

Is the onclick event element determined by the element that wymeditor is attached to? ie:

Code: Select all

$("#myWymEditor wym_tools_strong").click()

versus

Code: Select all

$("wym_tools_strong").click()

Anyone have any ideas I can try?

[webPragmatist]

I noticed in the wymeditor version I have there are parameters for "toolSelector." I have tried to match the default class names (just for the sake of getting it to work).

The below code looks like how wymeditor creates the click events. I am no jQuery expert so maybe someone elighten me on what exactly is happening in the code below (line 829):

Code: Select all

WYMeditor.editor.prototype.bindEvents = function() {

  //copy the instance
  var wym = this;

  //handle click event on tools buttons
  jQuery(this._box).find(this._options.toolSelector).click(function() {
    wym.exec(jQuery(this).attr(WYMeditor.NAME));
    return(false);
  });

Also, this is my toolbar which is outside of the wymeditor container:

Code: Select all

<div id="edit" class="wym_tools wym_section wym_buttons" style="left: 0px;" rel="">
   <ul>
      <li class="wym_tools_save"><a style="background-image: url(/vendor/wymeditor/wymeditor/skins/default/icons.png);" href="#" name="Save">Do something</a></li>
      <li class="wym_tools_strong"><a title="Strong" name="Bold" href="#">Strong</a></li>
      <li class="wym_tools_emphasis"><a title="Emphasis" name="Italic" href="#">Emphasis</a></li>
      <li class="wym_tools_ordered_list"><a title="Ordered List" name="InsertOrderedList" href="#">Ordered List</a></li>
      <li class="wym_tools_unordered_list"><a title="Unordered List" name="InsertUnorderedList" href="#">Unordered List</a></li>
      <li class="wym_tools_link"><a title="Link" name="CreateLink" href="#">Link</a></li>
      <li class="wym_tools_unlink"><a title="Unlink" name="Unlink" href="#">Unlink</a></li>
      <li class="wym_tools_image"><a title="Image" name="InsertImage" href="#">Image</a></li>
      <li class="wym_tools_undo"><a title="Undo" name="Undo" href="#">Undo</a></li>
      <li class="wym_tools_redo"><a title="Redo" name="Redo" href="#">Redo</a></li>
      <li class="wym_tools_paste"><a title="Paste from Word" name="Paste" href="#">Paste from Word</a></li>
   </ul>
</div>

[mr_lundis]

Hi!

The code you posted adds an event listener to all matched elements.

It works like this:
1. The jQuery(this._box)-part gets the current editor wrapper div, (wym_box).
2. .find(this._options.toolSelector) gets all buttons from the tool bar.
3. And finally .click(function() {[...]}); adds the event listeners to each of these buttons.

Hope this helps! Cheers!