ckfinder的使用
引入<script type="text/javascript" src="${ctxStatic}/ckfinder/ckfinder.js"></script>
function BrowseServer(inputId){
var finder = new CKFinder() ;
finder.basePath = '${ctx}/static/ckfinder/'; //导入CKFinder的路径
finder.selectActionFunction = SetFileField; //设置文件被选中时的函数
finder.selectActionData = inputId; //接收地址的input ID
finder.popup() ;
};
//文件选中时执行
function SetFileField(fileUrl,data)
{
var NfileUrl = fileUrl.substring(fileUrl.indexOf('/',fileUrl.indexOf('/')+1));
var img = "<img src ='"+ fileUrl +"' alt='' style= 'position:absolute;left:0;top:0;bottom:0;right:0;max-width:200px;max-height:200px'>";
var imgi = "<input type='hidden' name='bannerPic' value='"+NfileUrl+"' />";
$("#imgeConId").append(imgi);
$("#imgeConId").append(img);
}
<div class="control-group">
<label class="control-label">热点图片:</label>
<%-- <div class="controls">
<form:input path="bannerPic" htmlEscape="false" maxlength="255" class="input-xlarge "/>
</div> --%>
<div class="controls">
<input type="button" value="添加" onclick="BrowseServer('image')" />
<div class="box" style="width:100%">
<ul style="overflow:hidden;margin:10px;padding:2px;list-style:none;">
<li id="imgeConId" style="float:left;width:200px; height:200px; position:relative;" >
</li>
</ul>
</div>
</div>
</div>
ckfinder的使用的更多相关文章
- MVC配置ckeditor+ckfinder
ckeditor当前使用版本:4.5.8 ckfinder当前使用版本:2.6.0 1.Ckeditor配置简单,直接使用Nuget下载就可 2.下载ckfinder https://cksource ...
- CKEditor与CKFinder整合 MVC3
今天偶然看到一篇关于 CKEditor与CKFinder整合文章,心想有一段时间没有使用这种东西了.于是乎自己动手亲自体验了一下,本以为简单但在东西编写的过程发现了很多没有遇见毛病. 所以记录一下自己 ...
- 基于MVC4+EasyUI的Web开发框架经验总结(5)--使用HTML编辑控件CKEditor和CKFinder
Web开发上有很多HTML的编辑控件,如CKEditor.kindeditor等等,很多都做的很好,本文主要介绍在MVC界面里面,CKEditor的配置和使用.CKEditor的前身是FCKEdito ...
- CKEditor与CKFinder的配置(ASP.NET环境)
CKEditor是一个专门使用在网页上的所得文字编辑器,适用于PHP.ASP.NET.Java等后端开发语言.CKEditor原名为FCKeditor,“FCK” 是这个编辑器的作者的名字Freder ...
- 单独使用CKfinder上传图片
首先引入ckfinder.js <script type="text/javascript" src="<%=request.getContextPath() ...
- .net环境下ckeditor与ckfinder中文文件链接乱码的问题
.net环境下ckeditor与ckfinder中文文件链接乱码的问题 将ckfinder.js中的getUrl:function(){return this.folder.getUrl()+enco ...
- .net_ckeditor+ckfinder的图片上传配置
CKEditor和CKFinder的最新版可以到官方网站(http://cksource.com)上下载获得. 把以上两个资源放到网站的根目录: /CKEditor 和 /CKFinder (不区分大 ...
- struts2整合CKEditor和CKFinder实现上传
上一篇文章给大家分享了CKEditor+CKFinder+JSP实现了在线编辑器上传图片的功能,这里在给大家分享一下如何在前面的基础上在struts2下实现这样的功能. 实现与Struts2的整合,整 ...
- jsp中如何整合CKEditor+CKFinder实现文件上传
最近笔者做了一个新闻发布平台,放弃了之前的FCKEditor编辑器,使用了CKEditor+CKFinder,虽然免费的CKFinder是Demo版本,但是功能完整,而且用户都是比较集中精神发新闻的人 ...
- ASP.NET版CKEditor与CKFinder的配置使用
ASP.NET版 CKEditor与CKFinder的配置使用 将CKEditor 与 CKFinder 的包含在项目中,并添加程序集的引用 从http://cksource.com网站上下载CKEd ...
随机推荐
- TCP连接数配置
一般的设置规则为: 系统最大文件数>可用端口>用户最大文件数 sysctl -a | grep file-max cat /proc/sys/fs/file-max 这表明这台Linux系 ...
- js添加删除class
添加: obj.classList.add("active"); 删除:obj.classList.remove("active");例子 <button ...
- JavaScript getClass() 函数
定义和用法 getClass() 函数可返回一个 JavaObject 的 JavaClass. 语法 getClass(javaobj) 参数 描述 javaobj 一个 JavaObject 对象 ...
- 乌班图docker版本18.04升级到19.03
# 关闭docker sudo systemctl stop docker # 卸载旧版本: sudo apt-get purge docker-ce # 安装新版本 sudo apt update ...
- emqttd学习教程(二):emqttd配置说明
一.配置文件说明emqttd消息服务器通过 etc/ 目录下配置文件进行设置,主要配置文件包括: 配置文件 说明 etc/emq.conf 消息服务器配置文件etc/acl.conf 默认ACL规则配 ...
- 关于函数中参数kwarg.setdefault()的用法
1.kwarg.setdefault() setdefault()是给字典传递一个默认值 当给字典传递数据时 setdefault()是字典默认的一个参数,当有新的数据时,就会使用新的数据
- 2019-03-19 Fiori学习笔记 Fiori开发环境
Fiori 文档 :https://experience.sap.com/fiori-design-web/ Fiori 登录:https://cloudplatform.sap.com/index. ...
- 转载 STM32 使用Cubemx 建一个USB(HID)设备下位机,实现数据收发
STM32 使用Cubemx 建一个USB(HID)设备下位机,实现数据收发 本文转载自 https://www.cnblogs.com/xingboy/p/9913963.html 这里我主要说一 ...
- Oracle 数据字典视图(V$,GV$,X$)
常用的几个数据字典: user_objects : 记录了用户的所有对象,包含表.索引.过程.视图等信息,以及创建时间,状态是否有效等信息,是非DBA用户的大本营.想知道自己有哪些对象,往这里查. u ...
- UniEAP Platform V5.0 Unable to compile class for JSP
流程设计器报错: http://127.0.0.1:8080/framework/workflow/webdesign/procmodify/procmodifydetail.jsp?isLoadDa ...