ckeditor富文本编辑器使用

最新推荐文章于 2024-01-28 22:31:32 发布

mush_me

最新推荐文章于 2024-01-28 22:31:32 发布

阅读量207

点赞数

分类专栏：其它java技术文章标签： Chrome Java Web XML 脚本

本文链接：https://blog.csdn.net/mush_me/article/details/83951412

版权

其它java技术专栏收录该内容

80 篇文章 0 订阅

订阅专栏

说到富文本编辑器，ckeditor无疑是做的最好的。
以前一直用旧的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>

刷新下页面，刚才没有上传功能的编辑器，已经可以上传图片了，就这么简单。

mush_me

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ckeditor富文本编辑器使用

说到富文本编辑器，ckeditor无疑是做的最好的。以前一直用旧的2.3版本，不支持chrome，因为2.3那会chrome还没出来。今天在网上看到新的版本支持chrome了，试用了下，比以前的界面好看多了，配置也少了很多。和大家分享下过程1.下载ckeditor，地址请自行搜索之。2.下载完后，将ckeditor拷贝到项目目录中，然后拷贝ckeditor-java-core-...
复制链接

扫一扫