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>

时间: 2024-10-12 18:44:58

ckfinder的使用的相关文章

UI标签库专题十三:JEECG智能开发平台 ckfinder(ckfinder插件标签)

1. ckfinder(ckfinder插件标签) 1.1. 参数 属性名 类型 描述 是否必须 默认值 name string 属性名称 是 null value string 默认值 否 null width string 显示图片宽(上传类型为Images时) 否 null height string 显示图片高(上传类型为Images时) 否 null buttonClass string 按钮样式 否 null buttonValue string 按钮文本 否 null upload

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

Web开发上有很多HTML的编辑控件,如CKEditor.kindeditor等等,很多都做的很好,本文主要介绍在MVC界面里面,CKEditor的配置和使用.CKEditor的前身是FCKEditor,随着它的更新,上传图片的功能被分离出去了,现在如果需要实现上传图片,要么自己写代码或者采用其他上传控件(如Uploadify),还有一种方法是使用CKFinder,这两者的合并使用,能给我们带来更多的方便. 1.CKEditor的使用 CKEditor的下载地址是http://ckeditor.

spring mvc 集成 ckfinder

下载ckfinder : http://cksource.com/ckfinder/download 下载下来 war包 放到tomcat 的webapps 下面运行一下,然后拿到ckfinder 文件夹 放到项目中 将tomcat 中 ckfinder下的 WEB-INF中 config.xml 拷贝到项目的WEB-INF 中 说下config.xml 的设置 <enabled>true</enabled><!-- 是否启动CKFinder,默认是false,需要手动改成t

jeesite ckfinder mac/linux 文件上传路径设置

背景: 如果你使用的是Mac 或者 Ubuntu 这种 Unix系统的话,你一定知道Unix系统的文件路径分隔符是 / 而Windows系统文件分隔符是 \ 当你设置了jeesite.properties 中的 userfiles.basedir= D\:\\workspace\\jeesite 如果不设置,上传的路径会是:dir = ServletContextFactory.getServletContext().getRealPath("/"); 在如果你使用的是Windows操

ckeditor+ckfinder

官方地址:http://ckeditor.com/ 复制ckeditor和ckfinder的文件夹到项目根路径下 拷贝ckfinder的config.xml到WEB-INF下 <config> <!-- CKFinder : Configuration File - Basic Instructions In a generic usage case, the following tasks must be done to configure CKFinder: 1. Check the

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

Web开发上有很多HTML的编辑控件,如CKEditor.kindeditor等等,很多都做的很好,本文主要介绍在MVC界面里面,CKEditor的配置和使用.CKEditor的前身是FCKEditor,随着它的更新,上传图片的功能被分离出去了,现在如果需要实现上传图片,要么自己写代码或者采用其他上传控件(如Uploadify),还有一种方法是使用CKFinder,这两者的合并使用,能给我们带来更多的方便. 1.CKEditor的使用 CKEditor的下载地址是http://ckeditor.

MVC富文本编辑器CKEditor配置CKFinder

富文本编辑器CKEditor的使用 *:first-child { margin-top: 0 !important; } body>*:last-child { margin-bottom: 0 !important; } /* BLOCKS =============================================================================*/ p, blockquote, ul, ol, dl, table, pre { margin:

Ckeditor与Ckfinder(java)整合实现富媒体内容编辑(支持文件上传)

先来看一下最终的效果图 一.编辑器界面 二.上传图片界面 <!-------------------------------------------------------> 一.安装包下载,我使用的安装包是ckfinder_java_2.3.zip和ckeditor_3.6.3.zip,这两个文件可以分别到http://ckfinder.com/download和http://ckeditor.com/download下载,注意我使用的开发语言是java,所以下载cfinder的时候需要选择

PHP ckeditor富文本编辑器 结合ckfinder实现图片上传功能

一:前端页面代码 <script src="/www/res/ckeditor/ckeditor.js"></script> <textarea id="articlecontent" ><?php echo $request['content']; ?></textarea> <script type="text/javascript"> $('#articleconten

MVC配置ckeditor+ckfinder

ckeditor当前使用版本:4.5.8 ckfinder当前使用版本:2.6.0 1.Ckeditor配置简单,直接使用Nuget下载就可 2.下载ckfinder https://cksource.com/ckfinder/download 选择Asp.net版本下载并放在相同的目录下:‘Scripts' 3.添加js引用: @Scripts.Render("~/Scripts/ckeditor/ckeditor.js") @Scripts.Render("~/Scrip