Hi!

I wrote a patch which allows other modules to modify and extend the editor without having to hack it. Basically it does so by:

  1. Creating a hook_yui_editor which your module must implement. When called it must add a javascript file using drupal_add_js
  2. In this file, the hook_yui_editor must also be implemented, this time as a javascript function though, which gets the editor as an argument

Example? Yes I think so. Here's a sample howto:

1. Apply the patch

2. Create a coolbutton.module file (and an info file and activate the module). Put this in the module file:

function coolbutton_yui_editor() {
	drupal_add_js(drupal_get_path('module','coolbutton').'/coolbutton.js');
}

3. Now create a coolbutton.js in the module directory and put this code in it:

function coolbutton_editor(myEditor) {	
  myEditor.on('toolbarLoaded', function() {
    var coolbuttonConfig = {
      type: 'push', label: 'Cool Button!', value: 'coolbutton'
    };
    this.toolbar.addButtonToGroup(coolbuttonConfig, 'insertitem');
    this.toolbar.on('coolbuttonClick', function() {
        myEditor.execCommand('inserthtml', '<b>COOL!</b>'); 
    });
  }, myEditor, true);
}

4. Done! I works.

Optional:

5. Now you might want to add a little css to put an icon on the button:

.yui-skin-sam .yui-toolbar-container .yui-toolbar-groupitem .yui-toolbar-<b>coolbutton</b> .yui-toolbar-icon {
  background-image: url(http://developer.yahoo.com/yui/examples/editor/assets/suit2.gif);
	background-position: 0 1px;
	left: 5px;
}
CommentFileSizeAuthor
#10 yui_editor_v2.tar_.gz25.39 KBeikes
yui_editor_hooks.patch2.47 KBeikes

Comments

eikes’s picture

eikes commented

Sorry! In step 3 the name of the function has to be:

function coolbutton_yui_editor(myEditor) {
eikes’s picture

eikes commented

What I forgot to write, is that we can then put the code-button and the plain-text button and the flickr thing in seperate modules... Wouldn't that be awesome? I'm writing a module which will allow me to link to internal pages more easily... When done, I'll post it here too!

flickerfly’s picture

flickerfly commented

Very cool, thanks! I hope to be able to test this out sometime soon.

jeffcd’s picture

jeffcd commented

This is a nice idea. But has been in the devel version for over a month now. I just haven't been around to release the devel version yet.

jeffcd’s picture

jeffcd commented
Status: Needs review » Closed (fixed)
eikes’s picture

eikes commented
Status: Closed (fixed) » Postponed (maintainer needs more info)

I see you have implemented something very similar, which is quite nice too.

I see a problem with your approach though: As you don't make use of the module system of drupal, updates of "plugins" won't be visible to the user. Also the user has to take different steps to install a "plugin" than to install a regular module.

I think it would be very nice if other developers could easily contribute modules which enhance the YUI editor. For example have I written a module which makes setting a link to an "internal" node much easier than having to copy and paste the URL, but just selecting from a dropdown box.

Maybe we should revamp the 6.2 release to make use of the drupal module system.

What do you think?

jeffcd’s picture

jeffcd commented

This is a good thought. Let me think about it for a couple days and get back.

eikes’s picture

eikes commented

I think it would be awesome! I'd be willing to help out with that. I think I'll be able to understand the 6.2 code and weave the hook calling into it.

If you would accept my help, I'll start working on a patch.

jeffcd’s picture

jeffcd commented

Go for it. I will wait for the updated patch before adding new plugins.

eikes’s picture

eikes commented
Version: 6.x-1.2-97 » 6.x-2.x-dev
Category: feature » task
Status: Postponed (maintainer needs more info) » Needs review
StatusFileSize
new yui_editor_v2.tar_.gz25.39 KB

Okay, so i did it!

I can't supply it as a patch, because "cvs diff" can't handle new files and i had to create some and moved the plugins into their own directories, just for better structure. The plugins are all modules now and prefixed with yuie_ in order to avoid collisions with existing modules like coder, flickr.

Everything is tested and works fine! Inclduing all plugins and in IE!

The image upload works again, it didn't when i started to work on it. The flickr thingy should work too, fixing this bug : http://drupal.org/node/326838

All the problems from this issue are resolved too: http://drupal.org/node/322205

There are two hooks, that any module can implement:

hook_yui_editor_settings($profile)

which returns a form element for the profile form (this could be done by hook_form_alter too but i kept it the way it was)

and

function hook_yui_editor_render($profile) {

which is called when the editor is rendered, so modules can throw in their css and js

The flickr plugin is an easy to understand example!

I removed the _yui_editor_plugin function, because, i use the hook system drupal provides, this has a couple of advantages as you will see, when you look at the code.

Like we discussed, this also enables developers to create proper modules which add their own plugins for the YUI Editor, like this one: http://drupal.org/node/324670

I got some plugins up my sleeve too, (i've done the imce integration too), but i'm also proud of a select / autocomplete box for internal links, which I'll release soon too.

I hope you like my work! (I created a little gif for the table too :-)

If you have any questions, please do post them here or via my contact form.

jeffcd’s picture

jeffcd commented

Cool. I am just getting around to this. I had to fix a bunch of the other items that came up so I could post a quick release. I'll take a look at this and try to integrate it in the next week or so.

Thanks.

eikes’s picture

eikes commented

Sweet! I figured you have lot to do, but it's nice if you'll integrate it.

also: if you want to, I can turn the many "plugin"-modules into a single one maybe called "yuieditor_extras" or something... just a thought. makes no difference to the functionality though