4 * Copyright 2009, Moxiecode Systems AB
5 * Released under LGPL License.
7 * License: http://tinymce.moxiecode.com/license
8 * Contributing: http://tinymce.moxiecode.com/contributing
12 var Dispatcher = tinymce.util.Dispatcher, each = tinymce.each;
15 * This class handles the loading of themes/plugins or other add-ons and their language packs.
17 * @class tinymce.AddOnManager
19 tinymce.create('tinymce.AddOnManager', {
20 AddOnManager : function() {
26 self.onAdd = new Dispatcher(self);
30 * Fires when a item is added.
36 * Returns the specified add on by the short name.
39 * @param {String} n Add-on to look for.
40 * @return {tinymce.Theme/tinymce.Plugin} Theme or plugin add-on instance or undefined.
44 return this.lookup[n].instance;
50 dependencies : function(n) {
53 result = this.lookup[n].dependencies;
59 * Loads a language pack for the specified add-on.
61 * @method requireLangPack
62 * @param {String} n Short name of the add-on.
64 requireLangPack : function(n) {
65 var s = tinymce.settings;
67 if (s && s.language && s.language_load !== false)
68 tinymce.ScriptLoader.add(this.urls[n] + '/langs/' + s.language + '.js');
72 * Adds a instance of the add-on by it's short name.
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.
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!');
88 * // Register plugin using the add method
89 * tinymce.PluginManager.add('test', tinymce.plugins.TestPlugin);
91 * // Initialize TinyMCE
94 * plugins : '-test' // Init the plugin but don't try to load it
97 add : function(id, o, dependencies) {
99 this.lookup[id] = {instance:o, dependencies:dependencies};
100 this.onAdd.dispatch(this, id, o);
104 createUrl: function(baseUrl, dep) {
105 if (typeof dep === "object") {
108 return {prefix: baseUrl.prefix, resource: dep, suffix: baseUrl.suffix};
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.
119 addComponents: function(pluginName, scripts) {
120 var pluginUrl = this.urls[pluginName];
121 tinymce.each(scripts, function(script){
122 tinymce.ScriptLoader.add(pluginUrl+"/"+script);
127 * Loads an add-on from a specific url.
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.
135 * // Loads a plugin from an external URL
136 * tinymce.PluginManager.load('myplugin', '/some/dir/someplugin/editor_plugin.js');
138 * // Initialize TinyMCE
141 * plugins : '-myplugin' // Don't try to load it again
144 load : function(n, u, cb, s) {
145 var t = this, url = u;
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);
157 cb.call(tinymce.ScriptLoader);
164 if (typeof u === "object")
165 url = u.prefix + u.resource + u.suffix;
167 if (url.indexOf('/') != 0 && url.indexOf('://') == -1)
168 url = tinymce.baseURL + '/' + url;
170 t.urls[n] = url.substring(0, url.lastIndexOf('/'));
175 tinymce.ScriptLoader.add(url, loadDependencies, s);
180 // Create plugin and theme managers
181 tinymce.PluginManager = new tinymce.AddOnManager();
182 tinymce.ThemeManager = new tinymce.AddOnManager();
186 * TinyMCE theme class.
188 * @class tinymce.Theme
192 * Initializes the theme.
195 * @param {tinymce.Editor} editor Editor instance that created the theme instance.
196 * @param {String} url Absolute URL where the theme is located.
200 * Meta info method, this method gets executed when TinyMCE wants to present information about the theme for example in the about/help dialog.
203 * @return {Object} Returns an object with meta information about the theme the current items are longname, author, authorurl, infourl and version.
207 * This method is responsible for rendering/generating the overall user interface with toolbars, buttons, iframe containers etc.
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.
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.
217 * @class tinymce.Plugin
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!');
229 * 'class' : 'bold' // Use the bold icon from the theme
234 * // Register plugin with a short name
235 * tinymce.PluginManager.add('example', tinymce.plugins.ExamplePlugin);
237 * // Initialize TinyMCE with the new plugin and button
240 * plugins : '-example', // - means TinyMCE will not try to load it
241 * theme_advanced_buttons1 : 'example' // Add the new example button to the toolbar
246 * Initialization function for the plugin. This will be called when the plugin is created.
249 * @param {tinymce.Editor} editor Editor instance that created the plugin instance.
250 * @param {String} url Absolute URL where the plugin is located.
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),
263 * plugin_url : url, // Plugin absolute URL
264 * some_custom_arg : 'custom arg' // Custom argument
268 * // Register example button
269 * ed.addButton('example', {
270 * title : 'example.desc',
271 * cmd : 'mceExample',
272 * image : url + '/img/example.gif'
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');
283 * tinymce.PluginManager.add('example', tinymce.plugins.ExamplePlugin);
287 * Meta info method, this method gets executed when TinyMCE wants to present information about the plugin for example in the about/help dialog.
290 * @return {Object} Returns an object with meta information about the plugin the current items are longname, author, authorurl, infourl and version.
292 * // Creates a new plugin class
293 * tinymce.create('tinymce.plugins.ExamplePlugin', {
294 * // Meta info method
295 * getInfo : function() {
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',
307 * tinymce.PluginManager.add('example', tinymce.plugins.ExamplePlugin);
309 * // Initialize TinyMCE with the new plugin
312 * plugins : '-example' // - means TinyMCE will not try to load it
317 * Gets called when a new control instance is created.
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.
324 * // Creates a new plugin class
325 * tinymce.create('tinymce.plugins.ExamplePlugin', {
326 * createControl: function(n, cm) {
329 * var mlb = cm.createListBox('mylistbox', {
330 * title : 'My list box',
331 * onselect : function(v) {
332 * tinyMCE.activeEditor.windowManager.alert('Value selected:' + v);
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');
341 * // Return the new listbox instance
350 * tinymce.PluginManager.add('example', tinymce.plugins.ExamplePlugin);
352 * // Initialize TinyMCE with the new plugin and button
355 * plugins : '-example', // - means TinyMCE will not try to load it
356 * theme_advanced_buttons1 : 'mylistbox' // Add the new mylistbox control to the toolbar