pluginTinyMCE development guide
First of all i would really like to make a dedicated button for a certain css class.
Second i need to insert 2 div's one with non editable content and one with editable content. In another topic i read that you could use the handleNodeChange() function to achieve that some content cannot be changed by the user (see: link). It should do something like the code style is doing in the editor on this site
I really don't get the comments in the _template plugin. Maybe we could use this topic to clarify that, because there are a lot of topic with people asking for support with creating plugins and almost non contain hints that people who are making a plugin for the first time could use.
(1) wrote:
/* Import plugin specific language pack */
tinyMCE.importPluginLanguagePack('template', 'en,tr,he,nb,ru,ru_KOI8-R,ru_UTF-8,nn,fi,cy,es,is,pl'); // <- Add a comma separated list of all supported languages
I think there is no need to change any of this?
(2) wrote:
/****
* Steps for creating a plugin from this template:
*
* 1. Change all "template" to the name of your plugin.
* 2. Remove all the callbacks in this file that you don't need.
* 3. Remove the popup.htm file if you don't need any popups.
* 4. Add your custom logic to the callbacks you needed.
* 5. Write documentation in a readme.txt file on how to use the plugin.
* 6. Upload it under the "Plugins" section at sourceforge.
*
****/
This is pretty straight forward, but the example online doesn't replace ALL the instances of "template", so I think it should be good do clarify which one should be changed.
(3) wrote:
// Singleton class
var TinyMCE_TemplatePlugin = {
/**
* Returns information about the plugin as a name/value array.
* The current keys are longname, author, authorurl, infourl and version.
*
* @returns Name/value array containing information about the plugin.
* @type Array
*/
getInfo : function() {
return {
longname : 'Template plugin',
author : 'Your name',
authorurl : ' http://www.yoursite.com',
infourl : 'http://www.yoursite.com/docs/template.html',
version : " 1.0"
};
},
this isnt very important and i think everyone will understand this
(4) wrote:
/**
* Gets executed when a TinyMCE editor instance is initialized.
*
* @param {TinyMCE_Control} Initialized TinyMCE editor control instance.
*/
initInstance : function(inst) {
// You can take out plugin specific parameters
alert("Initialization parameter:" + tinyMCE.getParam("template_someparam", false));
// Register custom keyboard shortcut
inst.addShortcut('ctrl', 't', 'lang_ template_desc', 'mceTemplate');
},
The alert is only for debug use and can be removed later. The other line is to register a keyboard shortcut for this plugin
(5) wrote:
/**
* Returns the HTML code for a specific control or empty string if this plugin doesn't have that control.
* A control can be a button, select list or any other HTML item to present in the TinyMCE user interface.
* The variable {$editor_id} will be replaced with the current editor instance id and {$pluginurl} will be replaced
* with the URL of the plugin. Language variables such as {$lang_somekey} will also be replaced with contents from
* the language packs.
*
* @param {string} cn Editor control/button name to get HTML for.
* @return HTML code for a specific control or empty string.
* @type string
*/
getControlHTML : function(cn) {
switch (cn) {
case "template":
return tinyMCE.getButtonHTML(cn, 'lang_template _desc', '{$pluginurl}/images/template.gif', 'mceTemplate', true);
}
return "";
},
where is the variable {$editor_id}?!? I don't really get what this doest. Does this function add a button to the GUI and I don't get the what is returns.
(6) wrote:
/**
* Executes a specific command, this function handles plugin commands.
*
* @param {string} editor_id TinyMCE editor instance id that issued the command.
* @param {HTMLElement} element Body or root element for the editor instance.
* @param {string} command Command name to be executed.
* @param {string} user_interface True/false if a user interface should be presented.
* @param {mixed} value Custom value argument, can be anything.
* @return true/false if the command was executed by this plugin or not.
* @type
*/
execCommand : function(editor_id, element, command, user_interface, value) {
// Handle commands
switch (command) {
// Remember to have the "mce" prefix for commands so they don't intersect with built in ones in the browser.
case "mce Template":
// Show UI/Popup
if (user_interface) {
// Open a popup window and send in some custom data in a window argument
var template = new Array();
template['file'] = '../../plugins/ template/popup.htm'; // Relative to theme
template['width'] = 300;
template ['height'] = 200;
tinyMCE.openWindow(template, {editor_id : editor_id, some_custom_arg : "somecustomdata"});
// Let TinyMCE know that something was modified
tinyMCE.triggerNodeChange(false);
} else {
// Do a command this gets called from the template popup
alert("execCommand: mce Template gets called from popup.");
}
return true;
}
// Pass to next handler in chain
return false;
},
I understand that this opens a popup window and that the 'changes' get saved using the triggerNodeChange() function.
(7) wrote:
/**
* Gets called ones the cursor/selection in a TinyMCE instance changes. This is useful to enable/disable
* button controls depending on where the user are and what they have selected. This method gets executed
* alot and should be as performance tuned as possible.
*
* @param {string} editor_id TinyMCE editor instance id that was changed.
* @param {HTMLNode} node Current node location, where the cursor is in the DOM tree.
* @param {int} undo_index The current undo index, if this is -1 custom undo/redo is disabled.
* @param {int} undo_levels The current undo levels, if this is -1 custom undo/redo is disabled.
* @param {boolean} visual_aid Is visual aids enabled/disabled ex: dotted lines on tables.
* @param {boolean} any_selection Is there any selection at all or is there only a cursor.
*/
handleNodeChange : function(editor_id, node, undo_index, undo_levels, visual_aid, any_selection) {
// Select template button if parent node is a strong or b
if (node.parentNode.nodeName == "STRONG" || node.parentNode.nodeName == "B") {
tinyMCE.switchClass (editor_id + '_template', 'mceButtonSelected');
return true;
}
// Deselect template button
tinyMCE.switchClass(editor_id + '_template', 'mceButtonNormal');
},
I really don't get the point of this function either.
(8) wrote:
/**
* Gets called when a TinyMCE editor instance gets filled with content on startup.
*
* @param {string} editor_id TinyMCE editor instance id that was filled with content.
* @param {HTMLElement} body HTML body element of editor instance.
* @param {HTMLDocument} doc HTML document instance.
*/
setupContent : function(editor_id, body, doc) {
},
a function to execute on page load to set some initial things.
(9) wrote:
/**
* Gets called when the contents of a TinyMCE area is modified, in other words when a undo level is
* added.
*
* @param {TinyMCE_Control} inst TinyMCE editor area control instance that got modified.
*/
onChange : function(inst) {
},
???
(10) wrote:
/**
* Gets called when TinyMCE handles events such as keydown, mousedown etc. TinyMCE
* doesn't listen on all types of events so custom event handling may be required for
* some purposes.
*
* @param {Event} e HTML editor event reference.
* @return true - pass to next handler in chain, false - stop chain execution
* @type boolean
*/
handleEvent : function(e) {
// Display event type in statusbar
top.status = "template plugin event: " + e.type;
return true; // Pass to next handler
},
an event handler. You can add some other event listeners
(11) wrote:
/**
* Gets called when HTML contents is inserted or retrived from a TinyMCE editor instance.
* The type parameter contains what type of event that was performed and what format the content is in.
* Possible valuses for type is get_from_editor, insert_to_editor, get_from_editor_dom, insert_to_editor_dom.
*
* @param {string} type Cleanup event type.
* @param {mixed} content Editor contents that gets inserted/extracted can be a string or DOM element.
* @param {TinyMCE_Control} inst TinyMCE editor instance control that performes the cleanup.
* @return New content or the input content depending on action.
* @type string
*/
cleanup : function(type, content, inst) {
switch (type) {
case "get_from_editor":
alert("[FROM] Value HTML string: " + content);
// Do custom cleanup code here
break;
case "insert_to_editor":
alert("[TO] Value HTML string: " + content);
// Do custom cleanup code here
break;
case "get_from_editor_dom":
alert("[FROM] Value DOM Element " + content.innerHTML );
// Do custom cleanup code here
break;
case "insert_to_editor_dom":
alert("[TO] Value DOM Element: " + content.innerHTML );
// Do custom cleanup code here
break;
}
return content;
},
can someone explain the use of this?!?
(12) wrote:
// Private plugin internal methods
/**
* This is just a internal plugin method, prefix all internal methods with a _ character.
* The prefix is needed so they doesn't collide with future TinyMCE callback functions.
*
* @param {string} a Some arg1.
* @param {string} b Some arg2.
* @return Some return.
* @type string
*/
_someInternalFunction : function(a, b) {
return 1;
}
a place to add internel functions
This should always be in the file. It registers the plugin with the rest of TinyMCE(13) wrote:
};
// Adds the plugin class to the list of available TinyMCE plugins
tinyMCE.addPlugin ("template", TinyMCE_TemplatePlugin);
No comments:
Post a Comment