在JSP里使用CKEditor和CKFinder的配置

CKEditor的编辑器工具栏中有一项“图片域”,该工具可以贴上图片地址来在文本编辑器中加入图片,但是没有图片上传。

“预览”中有一大堆鸟语,看得很不爽。可以打开ckeditor/plugins/image/dialogs/image.js文件,搜索“b.config.image_previewText”就能找到这段鸟语了,(b.config.image_previewText||'')单引号中的内容全删了,注意别删多了。扫除这个障碍,下面来研究图片上传。先看看效果图

步骤一

在ckeditor官方网站下载最新版本的文件包,其中有3个选项卡,选择最后一个 里面的东西是最全的。

文件名:ckeditor_4.3.2_full.zip

步骤二:

在这个网址下载ckfinder  http://cksource.com/ckfinder/download。

这个插件是专门处理服务器端上传的。

文件名: ckfinder_java_2.4.1.zip

步骤三

解压俩个ZIP文件 拷贝到项目当中

步骤四

将ckfinder_java_2.4.1里面的jar包都拷贝到工程中,把config.xml放入到WEB-INF下面。

步骤五

修改拷贝到WEB-INF 目录下的config.xml文件

<enabled>true</enabled>
<baseDir>D:\apache-tomcat-7.0.35\webapps\MyProject\CKFinderJava</baseDir>
<baseURL>/MyProject/CKFinderJava/</baseURL>

步骤六

在WEB.XML当中添加配置

    <servlet>
<servlet-name>ConnectorServlet</servlet-name>
<servlet-class>com.ckfinder.connector.ConnectorServlet</servlet-class>
<init-param>
<param-name>XMLConfig</param-name>
<param-value>/WEB-INF/config.xml</param-value>
</init-param>
<init-param>
<param-name>debug</param-name>
<param-value>false</param-value>
</init-param>
<load-on-startup>1</load-on-startup>
</servlet>
<servlet-mapping>
<servlet-name>ConnectorServlet</servlet-name>
<url-pattern> /ckfinder/core/connector/java/connector.java </url-pattern>
</servlet-mapping>

步骤七

修改ckeditor/config.js 添加如下配置

   config.language = 'zh-cn';
config.baseFloatZIndex = 19900;
config.filebrowserBrowseUrl = 'ckfinder/ckfinder.html';
config.filebrowserImageBrowseUrl = 'ckfinder/ckfinder.html?type=Images';
config.filebrowserFlashBrowseUrl = 'ckfinder/ckfinder.html?type=Flash';
config.filebrowserUploadUrl = 'ckfinder/core/connector/java/connector.java?command=QuickUpload&type=Files';
config.filebrowserImageUploadUrl = 'ckfinder/core/connector/java/connector.java?command=QuickUpload&type=Images';
config.filebrowserFlashUploadUrl = 'ckfinder/core/connector/java/connector.java?command=QuickUpload&type=Flash';

然后再JSP当中引入如下文件:

<script type="text/javascript" src="ckeditor/ckeditor.js"></script>
<script type="text/javascript" src="ckfinder/ckfinder.js"></script>
<textarea id="editor1"></textarea>
<script type="text/javascript">
var editor = CKEDITOR.replace('editor1');
CKFinder.setupCKEditor(editor,'/ckeditor/');
</script>

http://blog.chinaunix.net/uid-17272859-id-3897737.html

JAVA里使用CKEditor和CKFinder的配置的更多相关文章

  1. 在JSP里使用CKEditor和CKFinder

    在JSP里使用CKEditor和CKFinder 最 近在做一个新闻发布平台,放弃了很早的FCKEditor,使用CKEditor和CKFinder,尽管免费的CKFinder是Demo版本,但是功 ...

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

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

  3. CKEditor与CKFinder的配置

    CKEditor与CKFinder的配置使用(一) 将CKEditor 与 CKFinder 的包含在项目中 从http://cksource.com网站上下载CKEditor与CKFinder,并将 ...

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

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

  5. php环境下ckeditor和ckfinder的配置详解

    摘要:老牌编辑器FCK的升级版CKEditor(http://ckeditor.com/) 经过重写,提供了丰富而强大的集成和互动的API.新版编辑器是完全基于插件,它可以扩展所有部件以符合需求.FC ...

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

    先来看一下最终的效果图 一.编辑器界面 二.上传图片界面 <!-------------------------------------------------------> 一.安装包下 ...

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

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

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

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

  9. 在ASP.NET MVC中使用CKEditor和CkFinder

    在你需要使用editor控件的页面头部添加: <head> ... <script type="text/javascript" src="/ckedi ...

随机推荐

  1. 架构-LAMP特级学习(网站大存储量解决方案)

    数据库采用主从.分区技术 数据库优化

  2. JavaScript-自制日历控件(只选择年月)

    <style> *{margin: 0px; padding: 0px;} </style> <input type="text" name=&quo ...

  3. cout printf 莫明奇妙的崩溃问题

    出现异常主要表现 导致异常的关键代码不是因为printf 或cout,而是因为使用栈空间超出的原因 下图试图在栈上分配1024000个char的空间,确发现崩溃 的位置是printf,这就是这个问题难 ...

  4. 利用pushState开发无刷页面切换(转)

    相关文档:https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Manipulatingthebrowser_history 实现目标 ...

  5. MyEclipse和Microsoft Visual Studio常用快捷键

    MyEclipse       Visual Studio            NOTEF5            F11                 单步执行 F6            F1 ...

  6. 将jar文件转换成exe可执行文件[转]

    将jar文件转换成exe可执行文件: exe文件使用方便,而且还可以提高源码及资源的安全性,但同时也失去了java的初衷--跨平台性. 如果你坚持要转换成exe文件,请按以下方式进行: 利用exe4j ...

  7. Error parsing XML: not well-formed (invalid token) 报错

    鼠标右键选择Source然后再选Format 就可以解决此问题

  8. http连接优化

    http连接的性能优化 并行连接(能够同一时候和多台server建立HTTP连接) 持久连接 管道化连接 复用的连接 并行连接 长处: 并行连接能够在带宽资源充足的情况下同一时候建立多个HTTP连接, ...

  9. Note for video Machine Learning and Data Mining——training vs Testing

    Here is the note for lecture five. There will be several points  1. Training and Testing  Both of th ...

  10. node 服务器开发必备神器 —— nodemon

    nodemon 官方网站:http://nodemon.io/ github地址:https://github.com/remy/nodemon/ 简介:Nodemon 是一款非常实用的工具,用来监控 ...