include/javascript/tiny_mce/classes/AddOnManager.js

   1 /**
   2  * AddOnManager.js
   3  *
   4  * Copyright 2009, Moxiecode Systems AB
   5  * Released under LGPL License.
   6  *
   7  * License: http://tinymce.moxiecode.com/license
   8  * Contributing: http://tinymce.moxiecode.com/contributing
   9  */
  10
  11 (function(tinymce) {
  12         var Dispatcher = tinymce.util.Dispatcher, each = tinymce.each;
  13
  14         /**
  15          * This class handles the loading of themes/plugins or other add-ons and their language packs.
  16          *
  17          * @class tinymce.AddOnManager
  18          */
  19         tinymce.create('tinymce.AddOnManager', {
  20                 AddOnManager : function() {
  21                         var self = this;
  22
  23                         self.items = [];
  24                         self.urls = {};
  25                         self.lookup = {};
  26                         self.onAdd = new Dispatcher(self);
  27                 },
  28
  29                 /**
  30                  * Fires when a item is added.
  31                  *
  32                  * @event onAdd
  33                  */
  34
  35                 /**
  36                  * Returns the specified add on by the short name.
  37                  *
  38                  * @method get
  39                  * @param {String} n Add-on to look for.
  40                  * @return {tinymce.Theme/tinymce.Plugin} Theme or plugin add-on instance or undefined.
  41                  */
  42                 get : function(n) {
  43                         if (this.lookup[n]) {
  44                                 return this.lookup[n].instance;
  45                         } else {
  46                                 return undefined;
  47                         }
  48                 },
  49
  50                 dependencies : function(n) {
  51                         var result;
  52                         if (this.lookup[n]) {
  53                                 result = this.lookup[n].dependencies;
  54                         }
  55                         return result || [];
  56                 },
  57
  58                 /**
  59                  * Loads a language pack for the specified add-on.
  60                  *
  61                  * @method requireLangPack
  62                  * @param {String} n Short name of the add-on.
  63                  */
  64                 requireLangPack : function(n) {
  65                         var s = tinymce.settings;
  66
  67                         if (s && s.language && s.language_load !== false)
  68                                 tinymce.ScriptLoader.add(this.urls[n] + '/langs/' + s.language + '.js');
  69                 },
  70
  71                 /**
  72                  * Adds a instance of the add-on by it's short name.
  73                  *
  74                  * @method add
  75                  * @param {String} id Short name/id for the add-on.
  76                  * @param {tinymce.Theme/tinymce.Plugin} o Theme or plugin to add.
  77                  * @return {tinymce.Theme/tinymce.Plugin} The same theme or plugin instance that got passed in.
  78                  * @example
  79                  * // Create a simple plugin
  80                  * tinymce.create('tinymce.plugins.TestPlugin', {
  81                  *     TestPlugin : function(ed, url) {
  82                  *         ed.onClick.add(function(ed, e) {
  83                  *             ed.windowManager.alert('Hello World!');
  84                  *         });
  85                  *     }
  86                  * });
  87                  *
  88                  * // Register plugin using the add method
  89                  * tinymce.PluginManager.add('test', tinymce.plugins.TestPlugin);
  90                  *
  91                  * // Initialize TinyMCE
  92                  * tinyMCE.init({
  93                  *    ...
  94                  *    plugins : '-test' // Init the plugin but don't try to load it
  95                  * });
  96                  */
  97                 add : function(id, o, dependencies) {
  98                         this.items.push(o);
  99                         this.lookup[id] = {instance:o, dependencies:dependencies};
 100                         this.onAdd.dispatch(this, id, o);
 101
 102                         return o;
 103                 },
 104                 createUrl: function(baseUrl, dep) {
 105                         if (typeof dep === "object") {
 106                                 return dep
 107                         } else {
 108                                 return {prefix: baseUrl.prefix, resource: dep, suffix: baseUrl.suffix};
 109                         }
 110                 },
 111
 112                 /**
 113                  * Add a set of components that will make up the add-on. Using the url of the add-on name as the base url.
 114                  * This should be used in development mode.  A new compressor/javascript munger process will ensure that the
 115                  * components are put together into the editor_plugin.js file and compressed correctly.
 116                  * @param pluginName {String} name of the plugin to load scripts from (will be used to get the base url for the plugins).
 117                  * @param scripts {Array} Array containing the names of the scripts to load.
 118                  */
 119                 addComponents: function(pluginName, scripts) {
 120                         var pluginUrl = this.urls[pluginName];
 121                         tinymce.each(scripts, function(script){
 122                                 tinymce.ScriptLoader.add(pluginUrl+"/"+script);
 123                         });
 124                 },
 125
 126                 /**
 127                  * Loads an add-on from a specific url.
 128                  *
 129                  * @method load
 130                  * @param {String} n Short name of the add-on that gets loaded.
 131                  * @param {String} u URL to the add-on that will get loaded.
 132                  * @param {function} cb Optional callback to execute ones the add-on is loaded.
 133                  * @param {Object} s Optional scope to execute the callback in.
 134                  * @example
 135                  * // Loads a plugin from an external URL
 136                  * tinymce.PluginManager.load('myplugin', '/some/dir/someplugin/editor_plugin.js');
 137                  *
 138                  * // Initialize TinyMCE
 139                  * tinyMCE.init({
 140                  *    ...
 141                  *    plugins : '-myplugin' // Don't try to load it again
 142                  * });
 143                  */
 144                 load : function(n, u, cb, s) {
 145                         var t = this, url = u;
 146
 147                         function loadDependencies() {
 148                                 var dependencies = t.dependencies(n);
 149                                 tinymce.each(dependencies, function(dep) {
 150                                         var newUrl = t.createUrl(u, dep);
 151                                         t.load(newUrl.resource, newUrl, undefined, undefined);
 152                                 });
 153                                 if (cb) {
 154                                         if (s) {
 155                                                 cb.call(s);
 156                                         } else {
 157                                                 cb.call(tinymce.ScriptLoader);
 158                                         }
 159                                 }
 160                         }
 161
 162                         if (t.urls[n])
 163                                 return;
 164                         if (typeof u === "object")
 165                                 url = u.prefix + u.resource + u.suffix;
 166
 167                         if (url.indexOf('/') != 0 && url.indexOf('://') == -1)
 168                                 url = tinymce.baseURL + '/' + url;
 169
 170                         t.urls[n] = url.substring(0, url.lastIndexOf('/'));
 171
 172                         if (t.lookup[n]) {
 173                                 loadDependencies();
 174                         } else {
 175                                 tinymce.ScriptLoader.add(url, loadDependencies, s);
 176                         }
 177                 }
 178         });
 179
 180         // Create plugin and theme managers
 181         tinymce.PluginManager = new tinymce.AddOnManager();
 182         tinymce.ThemeManager = new tinymce.AddOnManager();
 183 }(tinymce));
 184
 185 /**
 186  * TinyMCE theme class.
 187  *
 188  * @class tinymce.Theme
 189  */
 190
 191 /**
 192  * Initializes the theme.
 193  *
 194  * @method init
 195  * @param {tinymce.Editor} editor Editor instance that created the theme instance.
 196  * @param {String} url Absolute URL where the theme is located.
 197  */
 198
 199 /**
 200  * Meta info method, this method gets executed when TinyMCE wants to present information about the theme for example in the about/help dialog.
 201  *
 202  * @method getInfo
 203  * @return {Object} Returns an object with meta information about the theme the current items are longname, author, authorurl, infourl and version.
 204  */
 205
 206 /**
 207  * This method is responsible for rendering/generating the overall user interface with toolbars, buttons, iframe containers etc.
 208  *
 209  * @method renderUI
 210  * @param {Object} obj Object parameter containing the targetNode DOM node that will be replaced visually with an editor instance.
 211  * @return {Object} an object with items like iframeContainer, editorContainer, sizeContainer, deltaWidth, deltaHeight.
 212  */
 213
 214 /**
 215  * Plugin base class, this is a pseudo class that describes how a plugin is to be created for TinyMCE. The methods below are all optional.
 216  *
 217  * @class tinymce.Plugin
 218  * @example
 219  * // Create a new plugin class
 220  * tinymce.create('tinymce.plugins.ExamplePlugin', {
 221  *     init : function(ed, url) {
 222  *         // Register an example button
 223  *         ed.addButton('example', {
 224  *             title : 'example.desc',
 225  *             onclick : function() {
 226  *                  // Display an alert when the user clicks the button
 227  *                  ed.windowManager.alert('Hello world!');
 228  *             },
 229  *             'class' : 'bold' // Use the bold icon from the theme
 230  *         });
 231  *     }
 232  * });
 233  *
 234  * // Register plugin with a short name
 235  * tinymce.PluginManager.add('example', tinymce.plugins.ExamplePlugin);
 236  *
 237  * // Initialize TinyMCE with the new plugin and button
 238  * tinyMCE.init({
 239  *    ...
 240  *    plugins : '-example', // - means TinyMCE will not try to load it
 241  *    theme_advanced_buttons1 : 'example' // Add the new example button to the toolbar
 242  * });
 243  */
 244
 245 /**
 246  * Initialization function for the plugin. This will be called when the plugin is created.
 247  *
 248  * @method init
 249  * @param {tinymce.Editor} editor Editor instance that created the plugin instance.
 250  * @param {String} url Absolute URL where the plugin is located.
 251  * @example
 252  * // Creates a new plugin class
 253  * tinymce.create('tinymce.plugins.ExamplePlugin', {
 254  *     init : function(ed, url) {
 255  *         // Register the command so that it can be invoked by using tinyMCE.activeEditor.execCommand('mceExample');
 256  *         ed.addCommand('mceExample', function() {
 257  *             ed.windowManager.open({
 258  *                 file : url + '/dialog.htm',
 259  *                 width : 320 + ed.getLang('example.delta_width', 0),
 260  *                 height : 120 + ed.getLang('example.delta_height', 0),
 261  *                 inline : 1
 262  *             }, {
 263  *                 plugin_url : url, // Plugin absolute URL
 264  *                 some_custom_arg : 'custom arg' // Custom argument
 265  *             });
 266  *         });
 267  *
 268  *         // Register example button
 269  *         ed.addButton('example', {
 270  *             title : 'example.desc',
 271  *             cmd : 'mceExample',
 272  *             image : url + '/img/example.gif'
 273  *         });
 274  *
 275  *         // Add a node change handler, selects the button in the UI when a image is selected
 276  *         ed.onNodeChange.add(function(ed, cm, n) {
 277  *             cm.setActive('example', n.nodeName == 'IMG');
 278  *         });
 279  *     }
 280  * });
 281  *
 282  * // Register plugin
 283  * tinymce.PluginManager.add('example', tinymce.plugins.ExamplePlugin);
 284  */
 285
 286 /**
 287  * Meta info method, this method gets executed when TinyMCE wants to present information about the plugin for example in the about/help dialog.
 288  *
 289  * @method getInfo
 290  * @return {Object} Returns an object with meta information about the plugin the current items are longname, author, authorurl, infourl and version.
 291  * @example
 292  * // Creates a new plugin class
 293  * tinymce.create('tinymce.plugins.ExamplePlugin', {
 294  *     // Meta info method
 295  *     getInfo : function() {
 296  *         return {
 297  *             longname : 'Example plugin',
 298  *             author : 'Some author',
 299  *             authorurl : 'http://tinymce.moxiecode.com',
 300  *             infourl : 'http://wiki.moxiecode.com/index.php/TinyMCE:Plugins/example',
 301  *             version : "1.0"
 302  *         };
 303  *     }
 304  * });
 305  *
 306  * // Register plugin
 307  * tinymce.PluginManager.add('example', tinymce.plugins.ExamplePlugin);
 308  *
 309  * // Initialize TinyMCE with the new plugin
 310  * tinyMCE.init({
 311  *    ...
 312  *    plugins : '-example' // - means TinyMCE will not try to load it
 313  * });
 314  */
 315
 316 /**
 317  * Gets called when a new control instance is created.
 318  *
 319  * @method createControl
 320  * @param {String} name Control name to create for example "mylistbox"
 321  * @param {tinymce.ControlManager} controlman Control manager/factory to use to create the control.
 322  * @return {tinymce.ui.Control} Returns a new control instance or null.
 323  * @example
 324  * // Creates a new plugin class
 325  * tinymce.create('tinymce.plugins.ExamplePlugin', {
 326  *     createControl: function(n, cm) {
 327  *         switch (n) {
 328  *             case 'mylistbox':
 329  *                 var mlb = cm.createListBox('mylistbox', {
 330  *                      title : 'My list box',
 331  *                      onselect : function(v) {
 332  *                          tinyMCE.activeEditor.windowManager.alert('Value selected:' + v);
 333  *                      }
 334  *                 });
 335  *
 336  *                 // Add some values to the list box
 337  *                 mlb.add('Some item 1', 'val1');
 338  *                 mlb.add('some item 2', 'val2');
 339  *                 mlb.add('some item 3', 'val3');
 340  *
 341  *                 // Return the new listbox instance
 342  *                 return mlb;
 343  *         }
 344  *
 345  *         return null;
 346  *     }
 347  * });
 348  *
 349  * // Register plugin
 350  * tinymce.PluginManager.add('example', tinymce.plugins.ExamplePlugin);
 351  *
 352  * // Initialize TinyMCE with the new plugin and button
 353  * tinyMCE.init({
 354  *    ...
 355  *    plugins : '-example', // - means TinyMCE will not try to load it
 356  *    theme_advanced_buttons1 : 'mylistbox' // Add the new mylistbox control to the toolbar
 357  * });
 358  */