TinyMCE这个东西很多地方再用，不过我以前一直没用过，最近才接触，因为有一套现成的metro风格的皮肤，仅此而已，不过最终如何调用还是我得来实现。其他的都好说，网上的资料一大把一大把的，唯独这个本地图片上传，网上查的资料都是三言两语，不成体系，有些地方总归是没有说到，费了好大劲儿，总算是闹明白怎么弄这个了。（大牛们这次怎么就不能一起愉快的玩耍呢……）
TinyMCE中使用本地上传图片，实际上是在TinyMCE中使用了一个编写好的插件。这个插件自定义性非常大，按照你的想法，想干嘛就干嘛。
首先一点，在TinyMCE编辑器初始化时启用图片功能，这个不说了，网上资料都有，一大把一大把的。这里只举一个例子：
tinymce.init({ selector: 'textarea', mode: "textareas", theme: "advanced", plugins: "preview", theme_advanced_toolbar_location: "top", theme_advanced_toolbar_align: "left", theme_advanced_buttons1: "bold, italic, underline, strikethrough, justifyleft, justifycenter, justifyright, justifyfull, bullist, numlist, outdent, indent, undo,redo, link, unlink, hr, formatselect, fontselect, fontsizeselect, forecolor,spacer,cut,copy,paste, image,cleanup, code, myplugins,preview", theme_advanced_buttons2: "", theme_advanced_buttons3: "", }); tinymce.mceImage
然后直奔本地图片上传。
核心要关注的就是这个htm页面和image.js文件这两个。
image.htm这个里面你可以完全自己定义，不用太操心，你希望他是什么样子都可以，一般都会跟你整体项目的UI框架保持一致，当然也有特别炫酷的。当你觉得他的墨阳能够让你满意，记得在head标签区域内引用“image.js”文件。这个很重要。
这里我们还用到了jquery.form.js这个经典的插件，主要是要用它来实现ajax提交表单。
这里是我自己的代码，给大家参考下：
<head> <script src="../../../../../Scripts/jquery-1.7.1.min.js"></script> <script type="text/javascript" src="../../../jquery.form.js"></script> <script type="text/javascript" src="../../tiny_mce_popup.js"></script> <script type="text/javascript" src="../../utils/mctabs.js"></script> <script type="text/javascript" src="../../utils/form_utils.js"></script> <script type="text/javascript" src="js/image.js"></script> </head>
上面的东西除了jquery.form.js都可以在插件内部找到，这里不再一一解释作用了。往下就是html主体部分，这个大家随意，反正只要有个form标签，里面再有个<input type='file' ……>就可以了。
先说上传本身，上传本身要利用ajax提交表单，具体来说就是利用jquery.form.js中的ajaxSubmit方法，参数和Jquery的ajax一样，但是不需要传递data参数，因为表单本身在内部会处理完当做post方式传输。与此同时，对于上传文件来说，form表单中需要设置如下内容：
method="post" enctype="multipart/form-data" action="……"
method和action两个属性不解释了，如有疑问请自行百度。enctype 属性规定在发送到服务器之前应该如何对表单数据进行编码，默认值是“application/x-www-form-urlencoded”，编码所有字符，“text/plain”是指不编码特殊字符，但会将空格转换为 "+" 加号，还有一个值就是我们用到的“multipart/form-data”，该值为不对字符编码，上传文件的请求必须使用这个值。这种方式的核心在于post请求的数据在文件数据和文本数据中存在分隔符，具体的不赘述太多了。
然后是表单 提交的部分（重头戏哦）：
if (document.getElementById("upload").value == "") { alert("请选择一个图片文件，再点击上传。"); return; } $("#myForm").ajaxSubmit({ type: "POST", dataType: "text", url: "……", async: true, success: function (value) { if (value != "0") { $("#src").val(value); $("#uploadsrc").html("<img src='"+value+"' />"); } else { alert("上传失败"); } }, error: function (value) { alert("失败" + value); } });
方法里看到对于表单“myForm”使用了ajaxSubmit方法，方法跟jquery本身的ajax一样，简单明了，至于后台的代码这里不说了，如果有同学需要的话可以百度，或者联系我。在文件上传完毕之后，可以看到在例子中我是把图片显示了出来，这样主要为了方便，预览一下再确定，省的误操作，这个大家可以根据自己的用户习惯和要求来设计。
然后就是如何把图片添加到文本编辑器里了。因为TinyMCE的方式是弹出窗口，注意是窗口，不是层。对于这样的弹出窗口，一般情况下我们会有插入，取消之类的按钮来使用，这里只说插入和取消，其他的就不说了。
取消：主要功能为删除图片，关闭窗口，删除图片这个在自己后台处理就是了，用一个ajax方法，后台删除就是了，服务端代码这里不做研究了。关闭窗口我们使用TinyMCE的方法：tinyMCEPopup.close()，这样可以直接关闭弹出窗口并使焦点回到富文本编辑器本身。
插入：把刚刚上传的图片对象插入到富文本编辑器当前的光标所在处。并关闭弹出窗口，这里就要用到前文提到的image.js了。这个image.js文件，tinyMCE本身就有，但是不见得适用每个人，所以需要自行修改。
文件中有一个声明好的全局变量：ImageDialog，这里面可以做很多东西。文件本身有很多方法，大家感兴趣的可以研究下，这里只说一些我们马上就需要用到的代码。
insertAndClose: function () { var ed = tinyMCEPopup.editor, f = document.forms[0], nl = f.elements, v, args = {}, el; tinyMCEPopup.restoreSelection(); // Fixes crash in Safari if (tinymce.isWebKit) ed.getWin().focus(); if (!ed.settings.inline_styles) { args = { vspace: nl.vspace.value, hspace: nl.hspace.value, border: nl.border.value, align: getSelectValue(f, 'align') }; } else { // Remove deprecated values args = { vspace: '', hspace: '', border: '', align: '' }; } tinymce.extend(args, { src: nl.src.value.replace(/ /g, '%20'), width: 100, height: 100, alt: "", title: "", 'class': getSelectValue(f, 'class_list'), style: "", id: "", dir: "", lang: "", usemap: "", longdesc: "" }); args.onmouseover = args.onmouseout = ''; //if (f.onmousemovecheck.checked) { // if (nl.onmouseoversrc.value) // args.onmouseover = "this.src='" + nl.onmouseoversrc.value + "';"; // if (nl.onmouseoutsrc.value) // args.onmouseout = "this.src='" + nl.onmouseoutsrc.value + "';"; //} el = ed.selection.getNode(); if (el && el.nodeName == 'IMG') { ed.dom.setAttribs(el, args); } else { tinymce.each(args, function (value, name) { if (value === "") { delete args[name]; } }); ed.execCommand('mceInsertContent', false, tinyMCEPopup.editor.dom.createHTML('img', args), { skip_undo: 1 }); ed.undoManager.add(); } tinyMCEPopup.editor.execCommand('mceRepaint'); tinyMCEPopup.editor.focus(); tinyMCEPopup.close(); }
这个方法是我根绝别人的东西改改直接用的，方法是把图片添加到富文本编辑器当前光标处并关闭弹出窗口的。其中：
tinyMCEPopup是tinyMCE的弹出窗口对象,利用他可以通过tinyMCEPopup.editor操作富文本编辑器，同时，tinymce是tinymce的全局对象。
在方法中：
tinymce.extend(args, {
src: nl.src.value.replace(/ /g, '%20'),
width: 100,
height: 100,
alt: "",
title: "",
'class': getSelectValue(f, 'class_list'),
style: "",
id: "",
dir: "",
lang: "",
usemap: "",
longdesc: ""
});
这个方法我是自己改的很死，因为我的需求没有那么严格，所以这些参数我都是写死的，各位根据需要自行修改吧，这是初始化的设定。
编写完成关闭方法，还需要调用，在HTML页面中，在插入按钮对应的点击方法中，可以直接使用：ImageDialog.insertAndClose()方式调用。
以上，就是基本的tinyMCE本地图片上传功能，往下就是根据需要调整了，各位发挥才智，可以各种酷炫哦。
4138
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
