1. 安装和使用CKEditor

最新推荐文章于 2024-09-10 14:15:01 发布

czj4451

最新推荐文章于 2024-09-10 14:15:01 发布

阅读量161

点赞数

分类专栏： html/css/ckeditor 文章标签： html web ckeditor javascript jsp ViewUI

本文链接：https://blog.csdn.net/czj4451/article/details/84212342

版权

html/css/ckeditor 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

CKEditor是一款实用的前端编辑器，核心是用JavaScript来编写，并且提供了丰富的插件可供使用。

[size=medium]1. 下载[/size]

从官网[url]http://ckeditor.com/download[/url]下载CKEditor3.6.3包，以及支持Java的war包：

ckeditor_3.6.3.zip
ckeditor-java-3.6.2.war

[size=medium]2. 解压[/size]

解压ckeditor_3.6.3.zip到项目的Web根目录下，解压ckeditor-java-3.6.2.war并覆盖Web根目录的META-INF和WEB-INF等文件夹和文件。

[size=medium]3. 启动工程[/size]

打开浏览器访问，查看调用CKEditor的几种方式:

[size=small]a. 替换存在的textarea标签：[/size]

replace的值要和textarea的id或name相同

basePath后面要以/结尾：
basePath有两种寻址方式：
相对url路径，如: basePath="../../ckeditor/"
web根目录路径，如果ckeditor放在根目录下，则basePath="${pageContext.servletContext.contextPath}/ckeditor/"


<%@ taglib prefix="ckeditor" uri="http://ckeditor.com" %>
<html>
 <head>
  <link rel="stylesheet" type="text/css" href="ckeditor/_samples/sample.css" />
 </head>
 <body>
  <form action="assets/sample_posteddata.jsp" method="post">
    <label for="editor1">Editor1</label>
    <textarea id="editor1" rows="10" cols="80"></textarea>
  </form>
  <ckeditor:replace replace="editor1" basePath="ckeditor/" />
 </body>
</html>

[size=small]b. 替换所有存在的textarea标签：[/size]

和a类似，不同的是标签。


   ...
   <ckeditor:replaceAll basePath="ckeditor/" />
   ...

[size=small]c. 用Java代码生成：[/size]

editor属性的值不能和页面中其它的id相同


	...
	<%@ page import="java.util.Map"  import="java.util.HashMap" %>
	<%@ page import="com.ckeditor.CKEditorConfig" %>
	...
		<label for="editor1">Editor1</label>
		<%
			String value = "My first [b]CKEditor[/b] Java tag";
			Map<String, String> attr = new HashMap<String, String>();
			attr.put("rows", "8");
			attr.put("cols", "50");
			CKEditorConfig settings = new CKEditorConfig();
			settings.addConfigValue("Width", "500");
			settings.addConfigValue("Toolbar", "Default");
		%>
		<ckeditor:editor editor="editor1" basePath="ckeditor/"
			config="<%=settings %>" textareaAttributes="<%=attr %>"
			value="<%=value %>" />
	...