ckeditor
ckfinder

ckeditor:html文本编辑插件，源码为javascript编写,实现对文本域的托管
下载时选择Full Package版本

解压后,去除一些不必要的文档;放置到js目录下即可

当然,也可以看看搭建案例samples

在这里可以设置需要的组件功能按钮

勾选完成后;得到配置代码

放置到config.js即可

下载ckfinder
注意解压后,将war包再次解压

取出一些不需要的文档后,同样放置到js目录下

注意需要在web.xml中进行配置

<!-- ckfinder --><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/ckfinder.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>/js/ckfinder/core/connector/java/connector.java</url-pattern></servlet-mapping>

且在WEB-INF目录下创建ckfinder.xml目录;配置图片存储地址以及访问地址

当然也需要这几个jar包的支持

就这样;在需要文本编辑的页面,为文本域标签赋予Id

然后在JS中,让CKEditor接手文本域

var editor;$(function () {//加载ckeditor,且包括ckfindereditor = CKEDITOR.replace("contentId");CKFinder.setupCKEditor(editor, '../../js/ckfinder/');}

搭建效果如下

CKFinder效果

对于上传过的图片,可以浏览服务器查看,双击选中即可

发布成功后,前台查看效果

注意,当需要获取文本域的内容时,就不能直接去选择文本域的内容了,试过了,获取的是空值,因为这块本来就是空的

那么就需要用editor.getData()获取值,editor.setData(信息)设置值;注意这里的editor是上面配置引入组件时定义的变量名