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 生成编辑按纽

1. getControlHTML : function(cn) {
2.  
3. switch (cn) {
4.  
5. case "template":
6.  
7. return tinyMCE.getButtonHTML(cn, 'lang_template_desc', '{$pluginurl}/images/template.gif', 'mceTemplate', true);
8.  
9. }
10.  
11. return "";
12.  
13. },

变更如下：其中mceUpload是execCommand调用的命令，得保持一致

1. getControlHTML : function(cn) {
2.  
3. switch (cn) {
4.  
5. case "upload":
6.  
7. return tinyMCE.getButtonHTML(cn, 'lang_upload_desc', '{$pluginurl}/images/template.gif', 'mceUpload', true);
8.  
9. }
10.  
11. return "";
12.  
13. },

1. handleNodeChange : function(editor_id, node, undo_index, undo_levels, visual_aid, any_selection) {
2.  
3. // Select template button if parent node is a strong or b
4.  
5. if (node.parentNode.nodeName == "STRONG" || node.parentNode.nodeName == "B") {
6.  
7. tinyMCE.switchClass(editor_id + '_template', 'mceButtonSelected');
8.  
9. return true;
10.  
11. }
12.  
13. // Deselect template button
14.  
15. tinyMCE.switchClass(editor_id + '_template', 'mceButtonNormal');
16.  
17. },//如果这是最后一个函数，记得去掉“,”号

这个函数的主要作用是编辑器中按纽对用户操作的响应，由于我们只做上传，不需要再编辑上传的图像。故更改如下：

1. handleNodeChange : function(editor_id, node, undo_index, undo_levels, visual_aid, any_selection) {
2.  
3. tinyMCE.switchClass(editor_id + '_upload', 'mceButtonNormal');
4.  
5. }

7　调出图形对口窗口

1. execCommand : function(editor_id, element, command, user_interface, value) {
2.  
3. switch (command) {
4.  
5. case "mceTemplate":
6.  
7. if (user_interface) {
8.  
9. var template = new Array();
10.  
11. template['file'] = 'http://www.cnblogs.com/plugins/template/popup.htm'; template['width'] = 300;
12.  
13. template['height'] = 200;
14.  
15. tinyMCE.openWindow(template, {editor_id : editor_id, some_custom_arg : "somecustomdata"});
16.  
17. tinyMCE.triggerNodeChange(false);
18.  
19. } else {
20.  
21. alert("execCommand: mceTemplate gets called from popup.");
22.  
23. }
24.  
25. return true;
26.  
27. }
28.  
29. return false;
30.  
31. },

在这个代码中，case “mceTemplate”的作用是当用户选择执行这个命令时调用，与我们在生成按纽的时候，最后设的’mceUpload’保持一致。

调用一个对话框的主要函数是：tinyMCE.openWindow，具体参数请参考随附近上传的手册

1. execCommand : function(editor_id, element, command, user_interface, value) {
2.  
3. switch (command) {
4.  
5. case "mceUpload":
6.  
7. var template = new Array();
8.  
9. template['file'] = 'http://www.cnblogs.com/plugins/upload/popup.php';
10.  
11. template['width'] = 480;
12.  
13. template['height'] = 380;
14.  
15. tinyMCE.openWindow(template, {editor_id : editor_id});
16.  
17. tinyMCE.triggerNodeChange(false);
18.  
19. return true;
20.  
21. }
22.  
23. return false;
24.  
25. },

二　制作与用户对话的对口窗口View：popup.php

1　设计页面与实现图片上传：这一步在网上有很多的数据，请大家google一下即可

2　向编辑窗口插入值：tinyMCE.execCommand(’mceInsertContent’,true,html);

html为返回内容的变量，如””

三　前台调用

1　加载插件

plugins : “upload “,

2　生成按纽

theme_advanced_buttons1_add_before : ” upload”,

结束语

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