WordPress and WYMeditor

EDIT 22/04/08:
If you use the latest versions of WordPress, Admin SSL and Simple WYMeditor, then this workaround is no longer necessary.

I currently use WordPress to publish my blog, and I recently discovered that there is a plugin () that lets you use my favourite online text editor - WYMeditor - to write blog posts.

So far so good - but I encountered a problem.  I enabled the plugin in WordPress but nothing happened.  Then I discovered that another plugin I use - Admin-SSL, which unsurprisingly secures the WordPress admin pages - was not securing pages from the /wp-content/ directory, which is where the plugins are.  The page was trying to call the WYMeditor plugin script using an unsecured link, which was causing it to break.

So I added the following code to admin-ssl.php at line 370:

370	$content_url = get_option("siteurl") . "/wp-content";371	$secure_content_url = $secure_url . "/wp-content";372	$replace_this[] = $content_url;373	$with_this[] = $secure_content_url;

This fixed the first problem.

However I noticed that the autosave function was not working either.  Apparently some people find it annoying, but I find it extremely useful while I'm writing blog posts.  After spending ages looking through the code of the WYMeditor plugin, through the WYMeditor documentation, and the autosave() function in WordPress, I found a way to fix it.

There is an HTML textarea element called 'content' which WYMeditor replaces, and which WordPress uses to get what you are writing.  When you click the 'Save' button, WYMeditor updates that textarea element with whatever you've written, and WordPress saves it.

However, the WYMeditor plugin only updates the textarea element when you click the save button, so the autosave() function doesn't work - when it looks at the 'content' textarea element, it's empty.  What we need to do, then, is automatically update the textarea element when the autosave() function is called.  Thankfully, WYMeditor has an inbuilt function to do this, called update().

Two things need to be done.  First, open simple-wymeditor.php, which is the main file for the WYMeditor plugin (it's probably in /wp-content/plugins/simple-wymeditor/).  Comment out lines 143 and 168, to look like this:

143	//jQuery( function() {...168	//});

This allows us to access the WYMeditor functions through jQuery.  Save the file and close it.  Now open the WordPress autosave.js file (in /wp-includes/js/).  At line 98 insert the following:

98	if(wym = jQuery.wymeditors(0)) wym.update();

This updates the 'content' textarea element if it can find a WYMeditor object, so the code won't break if you disable the WYMeditor plugin.

So there you have it - my WordPress now works with the WYMeditor plugin, and I'm very happy, and very tired after a couple of hours reading other people's code!

Addendum

In writing this post I used <pre></pre> tags to display the code.  Due to a bizarre filter, WordPress doesn't let you do things like have <br/> tags inside <pre></pre> tags (and many more such combinations).  So the code above, although one block of it is on four lines, WordPress was displaying it all on one long line, having stripped out the <br/> tags.

Cue much more learning of WordPress and code-reading - I now have two plugins.  The first removes the 'wpautop' filter from the 'the_content' and 'the_excerpt' tags.  This stops WordPress stripping tags that it shouldn't - now I'm using WYMeditor it is unnecessary anyway, because it creates XHTML.

The second plugin replaces all the curly quotation marks that WordPress 'helpfully' adds in with straight ones.  Sigh - at least I'm much more aware of how WordPress works than I was!  It's an absolute beast - functions and classes all over the place.  I'm sure it isn't necessary for it to be so complicated.

5 Responses to “WordPress and WYMeditor”


  1. 1 Amaury

    Great post ! and great tips !

    If you want, you can help me to improve Simple WYmeditor !
    You can integrate yours modifications into plugin.

    Contact me by email. (you can find it with this mail comment)

  2. 2 bcg

    I’ve now found a way of doing this automatically, without having to edit WordPress’s core files. Simply add a filter (’script_loader_src’), do a search for ‘autosave.js’ and replace the path with a custom one, to the plugin directory. There, have a copy of WordPress’s core autosave.js with the modifications made that I listed above.

    add_filter(”script_loader_src”,”autosave”);

    function autosave($src)
    {
    if(strpos($src,”autosave.js”))
    $src = str_replace(
    “/wp-includes/js/”,
    “/wp-content/plugins/simple-wymeditor/autosave.js”
    $src);
    return $src;
    }

  3. 3 William Eggington

    I load up this WYMeditor plugin into my Wordpress plugins folder and activate it and it doesn’t do anything. My “Write Post” page/editor looks the same as it always did.

    Can. . . you help using lay mens terms?

  4. 4 bcg

    What version of Wordpress do you use?
    And, what version of simple-wymeditor? There is a new version (I think 0.4.5) available from the wordpress site:

    http://wordpress.org/extend/plugins/simple-wymeditor/

  5. 5 Chimbles

    Good advice, helps a ton! thanks!

Leave a Reply