TinyMCE插件开发
TinyMCE 是一个基于浏览器（例如MSIE或Mozilla）的强大的所见即所得的编辑器，它使用户可以方便的编辑HTML内容。它非常灵活并且是为系统集成而设计的，比如在Intranets、CMS、LMS等系统中应用。
而在官方的TinyMCE版本上，一直没有图片上传的功能，由于项目需要，需要对在线编辑器增加上传模块。
文件结构[ ]
css TinyMCE样式表文件
images 存放按纽等图像文件
langs TinyMCE语言包
editor_plugin.js TinyMCE插件调用时的主文件
popup.php TinyMCE上传插件的用户对口框
popup.script.php 处理popup.php的脚本文件
开发概述[ ]
对于TinyMCE插件的开发，我觉得用MVC的观点描述是十分合适的，M层是TinyMCE的核心文件，我们只是调用即可；C层如editor_plugin.js、对话框的JS逻辑，V层应该就是用户对口框的设计。
开发步骤[ ]
一 制作与tinymce通讯的连接器：editor_plugin.js
1 、复制插件开发模版
在tiny_mce/plugins里面有一个_template的文件夹，它可以说是插件开发的一个通用的模版文件，将它复制到tiny_mce/plugins文件夹，并命名为你的插件名称如upload
2、 选择需要的回调函数
打开editor_plugin.js文件，保留tinyMCE.importPluginLanguagePack,及 TinyMCE_TemplatePlugin类的getInfo、getControlHTML、execCommand、 handleNodeChange函数，以及最后的tinyMCE.addPlugin函数，以上函数的作用分别是：
tinyMCE.importPluginLanguagePack：加载语言包（Line：11）
getInfo：插件版本信息（Line：34）
getControlHTML与handleNodeChange：生成按纽（Line：68 130）
execCommand：当TinyMCE加载此插件时，执行此函数，在这里主要是找开一个对话窗口（Line：88）
tinyMCE.addPlugin：增加一个插件（Line：238）
3 、修改插件名称
将里面所有小写的late改成你刚才命名的插件名，注意，原98-102行只须更改98行template['file']后的路径。
第二个要修改的是：var TinyMCE_TemplatePlugin（原26行）与tinyMCE.addPlugin（原238行），这里的作用是生成一个插件，名字一致即可
4 、加载语言包 tinyMCE.importPluginLanguagePack：与lang文件夹对应，根据需要选择
5 、创建版本信息 这个主要是为后期插件升级做的备注，主要作用就是***到此一游，做个记号
6 、生成编辑按纽
getControlHTML : function(cn) {
switch (cn) {
case "template":
return tinyMCE.getButtonHTML(cn, 'lang_template_desc', '{$pluginurl}/images/template.gif', 'mceTemplate', true);
}
return "";
},
变更如下：其中mceUpload是execCommand调用的命令，得保持一致
getControlHTML : function(cn) {
switch (cn) {
case "upload":
return tinyMCE.getButtonHTML(cn, 'lang_upload_desc', '{$pluginurl}/images/template.gif', 'mceUpload', true);
}
return "";
},
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');
},//如果这是最后一个函数，记得去掉“,”号
这个函数的主要作用是编辑器中按纽对用户操作的响应，由于我们只做上传，不需要再编辑上传的图像。故更改如下：
handleNodeChange : function(editor_id, node, undo_index, undo_levels, visual_aid, any_selection) {
tinyMCE.switchClass(editor_id + '_upload', 'mceButtonNormal');
}
7 、调出图形对口窗口
execCommand : function(editor_id, element, command, user_interface, value) {
switch (command) {
case "mceTemplate":
if (user_interface) {
var template = new Array();
template['file'] = '../../plugins/template/popup.htm'; template['width'] = 300;
template['height'] = 200;
tinyMCE.openWindow(template, {editor_id : editor_id, some_custom_arg : "somecustomdata"});
tinyMCE.triggerNodeChange(false);
} else {
alert("execCommand: mceTemplate gets called from popup.");
}
return true;
}
return false;
},
在这个代码中，case "mceTemplate"的作用是当用户选择执行这个命令时调用，与我们在生成按纽的时候，最后设的'mceUpload'保持一致。
调用一个对话框的主要函数是：tinyMCE.openWindow，具体参数请参考手册
execCommand : function(editor_id, element, command, user_interface, value) {
switch (command) {
case "mceUpload":
var template = new Array();
template['file'] = '../../plugins/upload/popup.php';
template['width'] = 480;
template['height'] = 380;
tinyMCE.openWindow(template, {editor_id : editor_id});
tinyMCE.triggerNodeChange(false);
return true;
}
return false;
},
二 制作与用户对话的对口窗口View：popup.php
1、设计页面与实现图片上传：这一步在网上有很多的资料，请大家google一下即可
2、向编辑窗口插入值：tinyMCE.execCommand('mceInsertContent',true,html); html为返回内容的变量，如””
三 前台调用
1、加载插件 plugins : "upload ",
2、生成按纽 theme_advanced_buttons1_add_before : " upload",