ueditor 单独图片上传 转载
<body>
<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) {
//将地址赋值给相应的input
$("#" + keyid).val(args[0].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="2">
<input type='submit' value="提交保存"/></td>
</tr>
</tbody>
</table>
</form>
ueditor 单独图片上传 转载的更多相关文章
- 在SAE上使用Ueditor的图片上传功能
SAE上是没有文件夹读写权限的,所以要在SAE使用Ueditor的图片上传功能须要借助SAE的Storage服务. 一.开通Storage服务 在SAE控制台开通Storage服务,并新增一个doma ...
- springboot整合ueditor实现图片上传和文件上传功能
springboot整合ueditor实现图片上传和文件上传功能 写在前面: 在阅读本篇之前,请先按照我的这篇随笔完成对ueditor的前期配置工作: springboot+layui 整合百度富文本 ...
- uEditor独立图片上传
项目中.上传图片,非常希望有一款比较兼容的查件. 网上找了一些,图片上传立刻显示的js代码,还有uploadify.都会碰到这样那样的不兼容和其它头疼的问题. 后来想,干脆就用php的上传类最干脆.但 ...
- ueditor单独调用上传附件和图片的功能
javascript富文本编辑器使我们添加.编辑网站中的文章更加方便和容易.这些富文本编辑器提供了所见即所得(What You See Is What You Get - WYSIWYG)的功能,可以 ...
- 单独调用Ueditor的图片上传功能
<!DOCTYPE html> <html> <head> <title></title> <script src="/sc ...
- 百度Ueditor多图片上传控件
发现百度的Ueditor富文本编辑器中的多图片上传控件很不错,于是便想着分享出来使用,费了老劲,少不了无名朋友的帮助,也查了不少资料,终于搞定了 发代码给大家,请大家多多指正 1.首先要在html页面 ...
- C# .net Ueditor实现图片上传到阿里云OSS 对象存储
在学习的时候,项目中需要实现在Ueditor编辑器中将图片上传到云储存中,老师演示的是上传到又拍云存储,既然看了一遍,直接照搬不算本事,咱们可以依葫芦画瓢自己来动手玩玩其它的云存储服务. 现在云计算产 ...
- 对百度的UEditor多图片上传的一些补充
我已经写了一篇文章关于百度的UEditor提取多图片上传模块.如果还没有看过,请点击以下链接查看 http://www.cnblogs.com/luke1006/p/3719029.html 出差了两 ...
- asp.net 百度编辑器 UEditor 上传图片 图片上传配置 编辑器配置 网络连接错误,请检查配置后重试
1.配置ueditor/editor_config.js文件,将 //图片上传配置区 ,imageUrl:URL+"net/imageUp.ashx" //图片上传提交地址 ,im ...
随机推荐
- HDU 5573 Binary Tree 构造
Binary Tree 题目连接: http://acm.hdu.edu.cn/showproblem.php?pid=5573 Description The Old Frog King lives ...
- ASP.NET方面的一些经典文章收集
1. 在ASP.NET中执行URL重写 文章地址:https://msdn.microsoft.com/zh-cn/library/ms972974.aspx 2. 在ASP.NET中如何实现和利用U ...
- 【AngularJS】AngularJS 教程
AngularJS通过新的属性和表达式扩展了HTML.------------->扩展HTML属性 AngularJS可以构建一个单页面应用程序(SPAs: Single Page Applic ...
- php heredoc 与 nowdoc
php heredoc 与 nowdoc heredoc 结构 heredoc 句法结构:<<<.在该运算符之后要提供一个标识符,然后换行.接下来是字符串本身,最后要用前面定义的标识 ...
- LOCK TABLES
http://blog.csdn.net/zyz511919766/article/details/16342003 http://blog.csdn.net/zyz511919766/article ...
- P、NP、NP-Complete、NP-hard问题
Table of Contents 1 遇到难题怎么办? 2 什么是P.NP.NP-Complete和NP-hard 3 P = NP ???? 4 参考 1 遇到难题怎么办? 遇到一个问题,通常我们 ...
- 进程控制之exec函数
用fork函数创建子进程后,子进程往往要调用一种exec函数以执行另一个程序.当进程调用一种exec函数时,该进程执行的程序完全替换为新程序,而新程序则从其main函数开始执行.因为调用exec并不创 ...
- oracle的触发器
oracle的触发器分为语句级和行级两种类型,在视图上所创建的触发器叫做什么类型的触发器? DML触发器有三类: 1, insert触发器: 2, update触发器: 3, delete触发器: 触 ...
- 使用jmeter对ActiveMQ集群性能方案进行评估--转载
原文地址:http://www.51testing.com/html/78/23978-143163.html 1.测试概要1.1 关于这篇文档中涉及的基于JMS的消息系统能为应用程序提供可靠的,高性 ...
- 解决faststone capture在台式机上录制屏幕视频没有声音的问题
点击屏幕录像机: 在弹出的屏幕录像机窗口中选择录制音频,然后点击选项按钮: 在弹出的选项按钮中选择视频选项,将所有的多选框都选中,注:最后一个选项录制windows XP的工具提示最好也选上,我发现如 ...