编辑“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",

==相关条目==
*[[TinyMCE]]

==参考来源==
*[http://hi.baidu.com/igoogledyou/blog/item/d1c59e2f46fdc33b1e3089d0.html 参考来源]


[[category:插件|T]]
[[category:TinyMCE|C]]