Forum closed. New forum available at

Button Events / Toolbar Separation

Support forum for WYMeditor.

Button Events / Toolbar Separation

Postby webPragmatist on Mon Oct 06, 2008 11:37 pm

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()
Code: Select all

Anyone have any ideas I can try?
Posts: 6
Joined: Sun Oct 05, 2008 4:46 pm

Re: Button Events / Toolbar Separation

Postby webPragmatist on Tue Oct 07, 2008 3:49 am

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() {

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="">
      <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>
Posts: 6
Joined: Sun Oct 05, 2008 4:46 pm

Re: Button Events / Toolbar Separation

Postby mr_lundis on Wed Oct 08, 2008 2:26 pm


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!
Jonatan Lundin - designer, developer and forum moderator. You should follow me on Twitter!
Posts: 335
Joined: Sun Dec 02, 2007 10:59 am
Location: Sweden

Return to Support

Who is online

Users browsing this forum: No registered users and 1 guest