引入<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. es6字符串的扩展——模板

    todo1.模板字符串 传统的 JavaScript 语言,输出模板通常是这样写的(下面使用了 jQuery 的方法). $('#result').append( 'There are <b&g ...

  2. 客户端框架-MVC

    MVC Model-View-Controller MVC是比较直观的架构模式,用户操作->View(负责接收用户的输入操作)->Controller(业务逻辑处理)->Model( ...

  3. RedisTemplate zSet的使用, 根据点赞排序,和创建时间排序2种方式

    使用Redis 对问题下的回答按点赞数排序的思路; 1根据问题id查出所有的回答列表; 2吧回答的ids添加到zset1中; key为id,value为赞的数量;(用于点赞排行); //批量添加 Lo ...

  4. ES6指北【1】——let、const

    1.如何学习ES6 1.1 js的学习顺序 ES5 -> ES6 -> ES7 -> ES8 以此类推 ES5没学好就别想学好ES6 1.2 边学边用 学了就要用 2.变量声明的方式 ...

  5. Zookeeper(六)服务器

    Zookeeper(六)服务器 zkServer.cmd中声明 首先启动QuorumPeerMain set ZOOMAIN=org.apache.zookeeper.server.quorum.Qu ...

  6. div随窗口变化设置高度

    window.onscroll = function () { sc(); }; window.onresize = function () { sc(); }; window.onload = fu ...

  7. 如何在外部获取当前A标签的ID值

    <div class="diskmain"> <ul id="folder"> <li><span class='do ...

  8. 《统计学习方法(李航)》讲义 第03章 k近邻法

    k 近邻法(k-nearest neighbor,k-NN) 是一种基本分类与回归方法.本书只讨论分类问题中的k近邻法.k近邻法的输入为实例的特征向量,对应于特征空间的点;输出为实例的类别,可以取多类 ...

  9. Git:本地项目与远程仓库的git/clone

      版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/qq_40197828/article/details/79283278 初识Git命令行将本地项 ...

  10. Why are dashes preferred for CSS selectors / HTML attributes?

    Why are dashes preferred for CSS selectors / HTML attributes? I use dashes because I don't have to h ...