paul bennett

eeyui – a YUI rich text editor for Expression Engine

Posted on: August 27, 2008

Being frustrated with the tinymce plugin for Expression Engine, I decided to create a rich text editor plugin for Expression Engine using the YUI library simple editor.

Due to a magic combination of:

  1. the awesomeness of the YUI library
  2. the thoroughness of the YUI documentation
  3. the simplicity of creating extensions for Expression Engine

it was surprisingly straightforward.

If you’re using Expression Engine and are either sick of fighting with tinymce or aren’t using a rich text editor, you can download it from


9 Responses to "eeyui – a YUI rich text editor for Expression Engine"


I’m really excited about this extension. I just installed it. I am having a problem which is that when I click on the images button, i get a window that just says “index.html” – it looks like there is some directory that the button is trying to access that has an index.html but shouldn’t. Do you know what this is? I’d really like to use yui editor in ee, and this seems like the way to do it. Thanks for writing the extension!

Actually, my previous comment refers to the full editor, not the simple – not sure if it matters. Thanks!

Paul, thanks for putting this together; I need something just like this. I’m trying it install it, but I’ve already deleted my default weblog field group and can’t seem to get it to show up on any of my custom fields. Is there any way around this? I tried creating a field called “body” but that didn’t seem to work.

@leemcalilly – by default, the editor script (in yui/editor-loader.js) looks for a field with the id “field_id_2” (this is the id Expression Engine generates for the default body field) and replaces it with the YUI editor.

To get it working with your field, look for the id of the custom field you created and replace this line in editor-loader.js

var Editor2 = new YAHOO.widget.Editor(‘field_id_2’, myConfig);


var Editor2 = new YAHOO.widget.Editor(‘the_id_of_your_field’, myConfig);


Thanks for the support paul, but I’m still not able to get this going. I found 3 instances of ‘field_id_2’ and replaced them all.

In editor-loader.js:

ta = document.getElementById(‘my_field’).value = html;

var Editor2 = new YAHOO.widget.SimpleEditor(‘my_field’, myConfig);

Should all of these be changed?

and in broswer.php:

myEditor = window.opener.YAHOO.widget.EditorInfo.getEditorById(‘my_field’);

@Lee. Yes, you should replace all of them – sorry if that wasn’t clear in the last comment.

If you continue to have trouble, please let me know and I’ll be happy to log into your EE install and debug it for you. It’s pretty straightforward, so it shouldn’t be a big deal to get working if something’s gone wrong.


Great! I’m brand new to EE and need a text editor for my users to update their pages.

I’ve replaced all occurrences of id_field_2 with id_field_5.

When I enter text and then click Submit, I keep seeing the error that “The following field is required: pageText”. pageText is the name of id_field_5. Any ideas there?


Hi Jeremy,

In editor-loader.js, try changing this line (24):
ta = document.getElementById(‘field_id_2’).value = html;
to this:
ta = document.getElementById(‘field_id_5’).value = html;

This grabs the content of yui editor and puts it back into the textarea before it’s submitted to EE.


Alas, I had already changed that one.


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s


%d bloggers like this: