TinyMCE实现简单的本地上传

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本地图片上传功能，往下就是根据需要调整了，各位发挥才智，可以各种酷炫哦。

TinyMCE实现简单的本地上传的更多相关文章

ASP.NET MVC4实现TinyMCE 4.0.20自定义上传功能
tinymce 插件不提供免费的本地图片上传功能,所以自己将uploadify这个上传插件整合到tinymce,实现本地上传,还用到了jquery.ui插件,先展示全部的代码 @model TinyM ...
window系统下，简单的FTP上传和下载操作
先假设有一FTP服务器,FTP服务器:qint.ithot.net,用户名:username 密码:user1234.在本地电脑D:盘创建一个文件夹"qint".将要上传的文件 ...
使用jsp/servlet简单实现文件上传与下载
使用JSP/Servlet简单实现文件上传与下载通过学习黑马jsp教学视频,我学会了使用jsp与servlet简单地实现web的文件的上传与下载,首先感谢黑马.好了,下面来简单了解如何通过使用 ...
简单的GIT上传
简单的GIT上传上传项目时先新建一个文件夹 mkdir test 然后在切换到test文件夹中然后把github 中的项目拷贝下来 git glone url 然后git init 查看文件然后 ...
Django 实现简单的文件上传
今天分享一下Django实现的简单的文件上传的小例子. 步骤创建Django项目,创建Django应用设计模型处理urls.py 以及views.py 设计模板,设计表单运行项目,查看数据库 ...
UEditor之实现配置简单的图片上传示例
UEditor之实现配置简单的图片上传示例原创 2016年06月11日 18:27:31 开心一笑下班后,阿华到楼下小超市买毛巾,刚买完出来,就遇到同一办公楼里另一家公司的阿菲,之前与她远远的有过 ...
maven本地上传jar包
maven本地上传jar包在命令行中输入下面指令(是一行): mvn install:install-file -Dfile=D:\mvn\spring-context-support-3.1.0. ...
Django中从本地上传excel文件并将数据存储到数据库
Django中从本地上传excel文件并将数据存储到数据库一.前端界面 <div class="page-container"> <form action=&q ...
服务器文档下载zip格式 SQL Server SQL分页查询 C#过滤html标签 EF 延时加载与死锁在JS方法中返回多个值的三种方法（转载） IEnumerable,ICollection,IList接口问题不吹不擂，你想要的Python面试都在这里了【315+道题】基于mvc三层架构和ajax技术实现最简单的文件上传事件管理
服务器文档下载zip格式刚好这次项目中遇到了这个东西,就来弄一下,挺简单的,但是前台调用的时候弄错了,浪费了大半天的时间,本人也是菜鸟一枚.开始吧.(MVC的) @using Rattan.Co ...

随机推荐

HTML5 在canvas绘制一个矩形
笔者:本笃庆军原文地址:http://blog.csdn.net/qingdujun/article/details/32930501 一.绘制矩形 canvas使用原点(0,0)在左上角的坐标系统 ...
Linux 下卸载MySQL 5
对于在Linux下通过rpm方式的mysql,我们能够通过移除这些rpm包以及删除项目的文件夹来达到卸载的目的.本文演示了在SUSE Linux 10下下载MySQL 5.5.37.详细见下文. 1. ...
wamp无法登录phpmyadmin问题
文章来源:PHP座谈会地址:http://bbs.phpthinking.com/forum.php? mod=viewthread&tid=163 第一步.用navicat确认一下,自己的 ...
DiskFileUpload类
1.2.2 DiskFileUpload类 DiskFileUpload类是Apache文件上传组件的核心类,应用程序开发者通过这个类来与Apache文件上传组件进行交互.以下介绍DiskFileUp ...
Hive自己定义函数的使用——useragent解析
想要从日志数据中分析一下操作系统.浏览器.版本号使用情况.可是hive中的函数不能直接解析useragent,于是能够写一个UDF来解析.useragent用于表示用户的当前操作系统,浏览器版本号信息 ...
玩转Web之easyui(三)-----easy ui dataGird 重新指定url以获取不同数据源信息
如果已经写了一个dataGird并且已经通过url绑定数据源,能不能在其他地方改变url使其从不同数据源获取信息,从而实现查询等操作?答案当然是肯定的,而且仅需要几行代码 $('#btnq').bin ...
Codeforces 474 E. Pillars
水太...... E. Pillars time limit per test 1 second memory limit per test 256 megabytes input standard ...
Windows 8实例教程系列 - 数据绑定高级实例
原文:Windows 8实例教程系列 - 数据绑定高级实例上篇Windows 8实例教程系列 - 数据绑定基础实例中,介绍Windows 8应用开发数据绑定基础,其中包括一些简单的数据绑定控件的使用 ...
【.NET进程通信】初探.NET中进程间通信的简单的实现
转载请注明出处:http://blog.csdn.net/xiaoy_h/article/details/26090277 废话不多说,IPC就是进程间通信. 进程间通信能够採用的方法非常多,比方创建 ...
UVa 11069 - A Graph Problem
题目:给你一个集合{1,2,..,n},计算子集的个数,子集的元素不能相邻且不能再插入元素. 分析:dp,动态规划.相邻元素间仅仅能相差3或者2. 动态方程:f(k)= f(k-2)+ f(k-3): ...

TinyMCE实现简单的本地上传

TinyMCE实现简单的本地上传的更多相关文章

随机推荐

热门专题