CKEditor用法目前分为两类,一种是纯前端的替换Textarea标签实现,第二种则是使用自定义tag实现,这种方式需要导入JAR包和添加tag说明(JSP)。
使用textarea替换,其实有三种。第一种是替换CSS样式,修改class。第二种是自己现在网页里面写好textarea,然后调用JS完成替换,第三种则就是直接生成textarea标签。
记得引入JS。
<script type="text/javascript" src="ckeditor/ckeditor.js"></script> <!--这里根据实际情况来写路径,可以加上项目绝对路径,request.getContextPath()--> <textarea class="ckeditor" name="editor1"></textarea> <!--这是使用class方式实现--> <textarea cols="80" id="editor1" name="editor1" rows="10"></textarea> <script type="text/javascript">CKEDITOR.replace( 'editor1' );</script> <!--这是使用JS替换方式,如果这段代码要放到header里面的话,记得在body的onload里面调用--> <script type="text/javascript"> var editor01 = new FCKeditor(editor01); editor.BasePath = "/test/fckeditor/" Editor01.create(); </script> <!--这是使用JS生成方式,代码是老版本的代码,在新版里面已经看不到demo了所以建议不使用-->
注意:这两种实现方式要求ckeditor的目录必须在webapp下,也就是跟WEB--INF一个级别!否则无法生成!
第二类方式仅限JSP中使用,TAG方式不仅可以自己生成一个,也可以替换当前的textarea来实现。需要一个jar包,这个jar包在其官网上是可以下载到的,然后在页面里面使用如下代码:
<% String value = "My first <strong>CKEditor</strong> 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", "Basic"); %> <ckeditor:editor textareaAttributes="<%=attr %>" basePath="../ckeditor/" config="<%=settings %>" editor="editor1" value="<%= value %>"/>
使用替换textarea方式:
<%@ taglib uri="http://ckeditor.com" prefix="ckeditor" %> <textarea cols="80" id="editor1" name="editor1" rows="10"></textarea> <ckeditor:replace replace="editor1" basePath="../ckeditor/" />