项目中。上传图片,非常希望有一款比较兼容的查件。

网上找了一些,图片上传立刻显示的js代码,还有uploadify。都会碰到这样那样的不兼容和其它头疼的问题。

后来想,干脆就用php的上传类最干脆。但是却不美观。

觉得ueditor的图片上传不错。

于是到网上搜索了一番。发现,确实有。不过,看不太懂,就照搬了。

不过,ueditor的图片上传其实不是完全的独立。还是需要实例化ueditor这个家伙的,只不过是隐藏了而已。仅仅显示了图片功能。

网上一搜“ueditor独立图片”,很多的,我就不多说了。我只记录我自己理解的,方便以后自己使用。

因为我的是thinkphp框架开发的。所以代码如下:

<include file="Common:header" />
<js file="__ROOT__/Data/ueditor/ueditor.config.js"/>
<js file="__ROOT__/Data/ueditor/ueditor.all.min.js"/> <script type="text/javascript">
//这个是图片上传的,网上还有附件上传的
(function($) {
var image = {
editor: null,
init: function(editorid, keyid) {
var _editor = this.getEditor(editorid);
_editor.ready(function() {
_editor.setDisabled();
_editor.hide();
_editor.addListener('beforeInsertImage', function(t, args) {
$("#" + keyid).val(args[].src);
});
});
},
getEditor: function(editorid) {
this.editor = UE.getEditor(editorid);
return this.editor;
},
show: function(id) {
var _editor = this.editor;
//注意这里只需要获取编辑器,无需渲染,如果强行渲染,在IE下可能会不兼容(切记)
//和网上一些朋友的代码不同之处就在这里
$("#" + id).click(function() {
var image = _editor.getDialog("insertimage");
image.render();
image.open();
});
},
render: function(editorid) {
var _editor = this.getEditor(editorid);
_editor.render();
}
};
$(function() {
image.init("myeditor", "upload");
image.show("image");
});
})(jQuery);
</script>
<script type="text/javascript">
// 必须有这个东西,不然,图片上传没法用。如果你独立上传图片,并且需要修改图片路径的话,你就模仿下面的代码
var editor = UE.getEditor('myeditor', {
imageUrl: "{:U(GROUP_NAME.'/Cases/upload/')}",
imagePath: "__ROOT__/Uploads/",
imageManagerUrl: "{:U(GROUP_NAME.'/cases/imagesManager/')}",
imageManagerPath: "__ROOT__/",
});
</script>
<form method='post' action='{:U(GROUP_NAME."/Cases/save")}' enctype="multipart/form-data">
<table class="table">
<tbody>
<tr>
<td class="title_td">标题:</td>
<td class="input_td"><input type='text' name='title' style='width: 300px'/></td>
</tr> <tr>
<td class="title_td">图片:</td>
<td class="input_td">
<input id="upload" name='upload' type="text" style='width: 300px' value=""/>
<script id="myeditor"></script>
<input type="button" id='image' value='上传图片'/> </td>
</tr> <tr>
<td colspan=""> <input type='submit' value="提交保存"/></td> </tr> </tbody>
</table> </form>
<include file="Common:footer" />

uEditor独立图片上传的更多相关文章

  1. 在SAE上使用Ueditor的图片上传功能

    SAE上是没有文件夹读写权限的,所以要在SAE使用Ueditor的图片上传功能须要借助SAE的Storage服务. 一.开通Storage服务 在SAE控制台开通Storage服务,并新增一个doma ...

  2. springboot整合ueditor实现图片上传和文件上传功能

    springboot整合ueditor实现图片上传和文件上传功能 写在前面: 在阅读本篇之前,请先按照我的这篇随笔完成对ueditor的前期配置工作: springboot+layui 整合百度富文本 ...

  3. 对百度的UEditor多图片上传的一些补充

    我已经写了一篇文章关于百度的UEditor提取多图片上传模块.如果还没有看过,请点击以下链接查看 http://www.cnblogs.com/luke1006/p/3719029.html 出差了两 ...

  4. 单独调用Ueditor的图片上传功能

    <!DOCTYPE html> <html> <head> <title></title> <script src="/sc ...

  5. ueditor 单独图片上传 转载

    <body> <script type="text/javascript"> //这个是图片上传的,网上还有附件上传的 (function($) { var ...

  6. asp.net 百度编辑器 UEditor 上传图片 图片上传配置 编辑器配置 网络连接错误,请检查配置后重试

    1.配置ueditor/editor_config.js文件,将 //图片上传配置区 ,imageUrl:URL+"net/imageUp.ashx" //图片上传提交地址 ,im ...

  7. UEditor使用------图片上传与springMVC集成 完整实例

    UEditor是一个很强大的在线编辑软件 ,首先讲一下 基本的配置使用 ,如果已经会的同学可以直接跳过此节 ,今天篇文章重点说图片上传; 一  富文本的初始化使用: 1 首先将UEditor从官网下载 ...

  8. 百度ueditor的图片上传,前后端交互使用

    百度ueditor的使用 一个文本编辑器,看了网上很多文档写的很乱,这里拾人牙慧,整理下怎么使用. 这个东西如果不涉及到图片附件上传,其实很简单,就是几个前端文件,直接引用,然后配置下ueditor. ...

  9. Ueditor编辑器图片上传到万象优图

    最近想用typecho做一个个人博客站,typecho的文本编辑器不能上传图片,我就用Ueditor替换的了原来的文本编辑器,听说腾讯的万象优图每月有50G的免费空间和流量,我就自己改了下Uedito ...

随机推荐

  1. [转]WINDOW进程间数据通讯以及共享内存

    1.引言 在Windows程序中,各个进程之间常常需要交换数据,进行数据通讯.WIN32 API提供了许多函数使我们能够方便高效地进行进程间的通讯,通过这些函数我们可以控制不同进程间的数据交换,就如同 ...

  2. C++ 文件读写方案选型

    严格来说, 有 3 种风格. UNIX 底层读写库 c 语言 stdio 标准库 iostream 流 一般的工程中, 底层读写库封装程度太低, 需要自己处理缓存和很多通用的异常场景. 不适合. 网络 ...

  3. javascript-对象的函数(一)

    Date.prototype.Format = function(fmt) { //author: meizz var o = { "M+" : this.getMonth()+1 ...

  4. margin的BUG(2)

    继续上一次的学习,这次又发现了margin的第二个bug.既当同时对两个相邻的div盒子设置margin时,他们之间的间隙不能正常显示. 具体表述为:先建立两个div1和div2 <div cl ...

  5. Spring MVC - log4j 配置

    http://blog.csdn.net/yhqbsand/article/details/8764388

  6. location跳转和header跳转的区别

    1:header("location:url") 跳转之前不能有任何输出,如果想在header之前有输出,则要修改php.ini文件.具体 output_handler =mb_o ...

  7. HTTP的长短连接、长短轮询的区别(转载)

    引言 最近刚到公司不到一个月,正处于熟悉项目和源码的阶段,因此最近经常会看一些源码.在研究一个项目的时候,源码里面用到了HTTP的长轮询.由于之前没太接触过,因此LZ便趁着这个机会,好好了解了一下HT ...

  8. V9任何页面GET调用内容分页的说明

    如标题,很多人想要在网站首页或其他的页面实现分页效果,说明如下: 一般特殊页面实现分页是通过GET语句的(论坛很多牛人用修改PHPCMS系统函数来实现,个人不推荐,因为你改了系统文件,不利于官方下一步 ...

  9. 一个例子说明如何在DataSnap中使用FireDAC

    一.FireDAC调用DataSnap远程方法查询数据示例 1.服务端使用FDQUERY查询数据并返回TDATASET: function TServerMethods1.GetData(var sq ...

  10. Kinetic使用注意点--container

    <virtual> new Container(config) 参数: config:包含所有配置项的对象. { x: "横坐标", y: "纵坐标" ...