TinyMce的插件开发(F2Blog编辑器外挂开发)

简介：
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为返回内容的变量，如”<img src=\”adsfsaf.gif\” />”

三　前台调用
1　加载插件
plugins : "upload ",

2　生成按纽
theme_advanced_buttons1_add_before : " upload",

结束语
这几天一直在看TinyMCE关于插件开发的资料，在网上却很少有开发插件方面的教程，因此也花了些时间写了一个小教程，希望对大家有帮助，也希望能与大家多交流交流。