引入<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的使用的更多相关文章

  1. MVC配置ckeditor+ckfinder

    ckeditor当前使用版本:4.5.8 ckfinder当前使用版本:2.6.0 1.Ckeditor配置简单,直接使用Nuget下载就可 2.下载ckfinder https://cksource ...

  2. CKEditor与CKFinder整合 MVC3

    今天偶然看到一篇关于 CKEditor与CKFinder整合文章,心想有一段时间没有使用这种东西了.于是乎自己动手亲自体验了一下,本以为简单但在东西编写的过程发现了很多没有遇见毛病. 所以记录一下自己 ...

  3. 基于MVC4+EasyUI的Web开发框架经验总结(5)--使用HTML编辑控件CKEditor和CKFinder

    Web开发上有很多HTML的编辑控件,如CKEditor.kindeditor等等,很多都做的很好,本文主要介绍在MVC界面里面,CKEditor的配置和使用.CKEditor的前身是FCKEdito ...

  4. CKEditor与CKFinder的配置(ASP.NET环境)

    CKEditor是一个专门使用在网页上的所得文字编辑器,适用于PHP.ASP.NET.Java等后端开发语言.CKEditor原名为FCKeditor,“FCK” 是这个编辑器的作者的名字Freder ...

  5. 单独使用CKfinder上传图片

    首先引入ckfinder.js <script type="text/javascript" src="<%=request.getContextPath() ...

  6. .net环境下ckeditor与ckfinder中文文件链接乱码的问题

    .net环境下ckeditor与ckfinder中文文件链接乱码的问题 将ckfinder.js中的getUrl:function(){return this.folder.getUrl()+enco ...

  7. .net_ckeditor+ckfinder的图片上传配置

    CKEditor和CKFinder的最新版可以到官方网站(http://cksource.com)上下载获得. 把以上两个资源放到网站的根目录: /CKEditor 和 /CKFinder (不区分大 ...

  8. struts2整合CKEditor和CKFinder实现上传

    上一篇文章给大家分享了CKEditor+CKFinder+JSP实现了在线编辑器上传图片的功能,这里在给大家分享一下如何在前面的基础上在struts2下实现这样的功能. 实现与Struts2的整合,整 ...

  9. jsp中如何整合CKEditor+CKFinder实现文件上传

    最近笔者做了一个新闻发布平台,放弃了之前的FCKEditor编辑器,使用了CKEditor+CKFinder,虽然免费的CKFinder是Demo版本,但是功能完整,而且用户都是比较集中精神发新闻的人 ...

  10. ASP.NET版CKEditor与CKFinder的配置使用

    ASP.NET版 CKEditor与CKFinder的配置使用 将CKEditor 与 CKFinder 的包含在项目中,并添加程序集的引用 从http://cksource.com网站上下载CKEd ...

随机推荐

  1. Link Script 学习

    最后更新 2019-06-27 概述 当使用 C 或者 C++ 编写代码实现某种功能时,需要将源代码进行编译以及链接.链接是将一系列目标文件(.o)以及归档文件(.a)组合起来,重新定位各个文件数据并 ...

  2. R_Studio(癌症)以等宽类别值、自定义类别值、等频类别值(分为5类)

    对“癌症.csv”中的肾细胞癌组织内微血管数进行连续属性的离散化处理 增加“微血管数分类1”属性,取值为等宽类别值(分为5类),增加“微血管数分类2”属性,取值为自定义类别值(0~40,41~60,6 ...

  3. 一致性Hash 分析和实现

    一致性Hash 分析和实现 ---title: 1.一致性Hashdate: 2018-02-05 12:03:22categories:- 一致性Hash--- 一下分析来源于网络总结:算法参照自己 ...

  4. Kotlin的高阶函数和常用高阶函数

    Kotlin的高阶函数和常用高阶函数 文章来源:企鹅号 - Android先生 高阶函数的定义 将函数当做参数或者是返回值的函数 什么是高阶函数 可以看看我们常用的 函数: 首先我们可以知道, 是 的 ...

  5. maven 配置国内镜像仓库加速获取jar包的配置方法

    在 maven 的 conf/settings.xml 中配置 <mirrors> <!-- mirror | Specifies a repository mirror site ...

  6. .slideUp()

    .slideUp() Effects > Sliding .slideUp( [duration ] [, complete ] )Returns: jQuery Description: Hi ...

  7. CAN波特率设置

    通过对CAN位定时寄存器CANBIT以及CAN波特率预分频扩展寄存器CANBRPE的设置可以得到需要的CAN通信波特率. CAN的位定时配置不当,将使得CAN模块无法按照目标波特率接入CAN网络,将导 ...

  8. Ubuntu 16.04安装、卸载mysql及怎么使用SQL常用操作语句

    以前都是在window上操作,连接数据库,最近转Ubuntu系统,故此,记下安装过程 一,安装mysql,Ctrl+Alt+T打开终端,一步步分别输入命令 //安装mysql服务 sudo apt-g ...

  9. nodejs之express静态路由、ejs

    1.静态路由与ejs使用 /** *1.安装ejs npm install ejs --save-dev * *2.express 里面使用ejs ,安装以后就可以用,不需要引入 * *3.配置exp ...

  10. etcd节点扩容至两个节点

    本篇已经安装了单个etcd,然后进行扩容etcd节点至2个,安装单节点请参照:https://www.cnblogs.com/effortsing/p/10295261.html 实验架构 test1 ...