说到富文本编辑器,ckeditor无疑是做的最好的。
以前一直用旧的2.3版本,不支持chrome,因为2.3那会chrome还没出来。
今天在网上看到新的版本支持chrome了,试用了下,比以前的界面好看多了,配置也少了很多。
和大家分享下过程
1.下载ckeditor,地址请自行搜索之。
2.下载完后,将ckeditor拷贝到项目目录中,然后拷贝ckeditor-java-core-3.5.3.jar到项目的lib目录下,然后就可以使用了
当然,你也可以不适用标签,使用js脚本来加载编辑器
要使用以上js,你需要添加以下代码,引用ckeditor的js
大功告成?
no!因为你发现你的编辑器不能上传图片,这当然不是你想要的。难道ckeditor不知道么?
他们当然知道,这个功能目前已经被独立成一个项目,叫ckfinder
那么,看看ckfinder如何使用吧
1.仍然是下载,地址请自行搜索
2.拷贝ckfinder到项目根目录下,拷贝config.xml到WEB-INF下,拷贝所有的lib包到项目lib目录
3.然后还需要在web.xml里进行以下配置
4.大功告成,可以使用了
刷新下页面,刚才没有上传功能的编辑器,已经可以上传图片了,就这么简单。
以前一直用旧的2.3版本,不支持chrome,因为2.3那会chrome还没出来。
今天在网上看到新的版本支持chrome了,试用了下,比以前的界面好看多了,配置也少了很多。
和大家分享下过程
1.下载ckeditor,地址请自行搜索之。
2.下载完后,将ckeditor拷贝到项目目录中,然后拷贝ckeditor-java-core-3.5.3.jar到项目的lib目录下,然后就可以使用了
<!DOCTYPE unspecified PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<%@page pageEncoding="UTF-8" contentType="text/html; charset=UTF-8"%>
<%@ taglib uri="http://ckeditor.com" prefix="ckeditor" %>
<html>
<body>
<form action="sample_posteddata.jsp" method="get">
<p>
<textarea cols="80" id="editor1" name="editor1" rows="10"></textarea>
</p>
<p>
<input type="submit" value="Submit" />
</p>
</form>
<ckeditor:replace replace="editor1" basePath="/ckeditor/" />
</body>
</html>
当然,你也可以不适用标签,使用js脚本来加载编辑器
<script type="text/javascript">
var editor = CKEDITOR.replace( 'editor1' );
</script>
要使用以上js,你需要添加以下代码,引用ckeditor的js
<script type="text/javascript" src="ckeditor/ckeditor.js"></script>
大功告成?
no!因为你发现你的编辑器不能上传图片,这当然不是你想要的。难道ckeditor不知道么?
他们当然知道,这个功能目前已经被独立成一个项目,叫ckfinder
那么,看看ckfinder如何使用吧
1.仍然是下载,地址请自行搜索
2.拷贝ckfinder到项目根目录下,拷贝config.xml到WEB-INF下,拷贝所有的lib包到项目lib目录
3.然后还需要在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>
<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>
4.大功告成,可以使用了
<script type="text/javascript" src="ckfinder/ckfinder.js"></script>
<script type="text/javascript">
var editor = CKEDITOR.replace( 'editor1' );
CKFinder.setupCKEditor( editor, '/ckfinder/' ) ;
</script>
刷新下页面,刚才没有上传功能的编辑器,已经可以上传图片了,就这么简单。