Question

I am using Google Closure editor and I would need to change the functionality of one button (namely Link). I thought that either I would inherit the responsible plugin (BasicTextFormatter in this case), or I would create a new plugin, whichever was easier. My assumption was, that all could be achieved via inheritance and I wouldn't need to change Google Closure files.

I was able to inherit goog.editor.Plugin and put some dummy debug info to learn about calling it.

goog.provide('project.LinkPlugin');
goog.require('goog.editor.Plugin');

project.LinkPlugin = function() {
  goog.editor.Plugin.call(this);
}
goog.inherits(project.LinkPlugin, goog.editor.Plugin);

project.LinkPlugin.prototype.getTrogClassId = function() {
  return 'projectLinkPlugin';
}

project.LinkPlugin.prototype.isSupportedCommand = function(command) {
  console.log('is supported ' + command);
  return command == 'myLink';
};

project.LinkPlugin.prototype.execCommandInternal = function(command, var_args) {
  console.log('exec command ' + command);
}

I registered the plugin.

var editor = new goog.editor.Field('rtfEditor');
editor.registerPlugin(new project.LinkPlugin());
editor.registerPlugin(new goog.editor.plugins.BasicTextFormatter());
... 

Then I was not sure, how to add my button, so I attempted to do it the ugly way (at least for now)

var buttons = [
  ...
  goog.editor.Command.FONT_SIZE,
  'myLink',
  goog.editor.Command.UNDO,
  ...
];
var toolbar = goog.ui.editor.DefaultToolbar.makeToolbar(buttons, toolbarDiv);

And then I got stuck. The info about the buttons is in defaulttoolbar.js and I haven't found a way of adding my button into BUTTONS_ array without modifying the GC code. All around is so nicely composite and inheritable, that I feel there must be a way of achieving it. Plus the concept of plugins signals that it should be rather easy and straightforward to add something.

After googling, all I found was this and this. Both approaches require changing GC code.

What have I missed?

TL;DR version: Is there a clean way of adding my own plugin into the GC editor?

And if it is easier to modify (i.e. inherit) a plugin instead of adding one, how to do that? How to specify, that my execCommandInternal should be called, not the original one?

Edit: OK, I found out, that the buttons can be array of strings, but also of goog.ui.Control. So this will probably solve this step. Anyway. I'll continue to work on that. Still if someone knows about some link, where all is nicely summarized, or someone did it recently and could summarize it here, I would be greatly grateful.

Was it helpful?

Solution

OK. As I suspected, it is done nicely and there is really no need to modify Google Closure code. In case someone would be interested in one way of adding a plugin to GC Editor, here it is.

Basically, I correctly created new plugin and I correctly registered it (as shown above). Just a goog.ui.Control was required to be added to makeToolbar array attribute, such as the following way.

var myLinkButton = goog.ui.editor.ToolbarFactory.makeButton('myLink', 'This is a tooltip', 'My Custom Link', goog.getCssName('tr-link'));

var buttons = [
  goog.editor.Command.BOLD,
  goog.editor.Command.ITALIC,
  goog.editor.Command.UNDERLINE,
  ...
  myLinkButton,
];

var toolbar = goog.ui.editor.DefaultToolbar.makeToolbar(buttons, toolbarDiv);
var toolbarController = new goog.ui.editor.ToolbarController(editor, toolbar);

(the bottom two lines remain the same)

After that, the editor plugin engine distributes the myLink command to all registered plugins and my plugin catches it and responds. If it was needed to modify a plugin instead of adding (and still something from the original plugin needs to be retained), it should be sufficient to register my modified plugin sooner than the original one.

I was banging with my head to the keyboard for a while finding out that it is this easy. Why there is no guide for that available on the internet (while there are guides for almost everything including much more primitive things) is still a mystery to me.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top