CKEditor的几种用法
1.替换一个textarea元素
步骤:
(1)添加js要的代码和文件:
<script type= "text/javascript" src="js/jquery-1.8.0.js" ></script>
<script type="text/javascript" src="ckeditor/ckeditor.js" ></script>
<script type="text/javascript" src="ckeditor/adapters/jquery.js" ></script>
<script type="text/javascript">
$(document).ready( function(){
$( '#editor1').ckeditor();
});
</script >
(2)在body中添加<textarea>元素,在这个元素中必须要提供id="editor1"或name="editor1"
< textarea rows ="100" cols ="80" id ="editor1" name ="editor" ></ textarea>
在这里一定要注意,以前的FCKeditor要注意的两个地方:
BasePth :编辑器的基路径,要以"/"结尾,默认是以/fckeditor/
2.在jsp中通过自定义标签使用CKeditor
在这个http://docs.cksource.com/CKEditor_3.x/Developers_Guide/Java/Integration页面有使用的教程
使用自定义的标签,需要使用到java类,所以需要导入CKeditor提供的jar包 ,在这个包下,包含了一些操作CKeditor的class文件
在CKeditor自定义标签中basePath路径必须有注意:前面必须要加"/"才能使用<%=basePath %>
<body> <textarea name="editor"></ textarea> <ckfinder:setupCKEditor editor="editor" basePath="/MyCKEditor/ ckfinder/" /> <ckeditor:replace replace="editor" basePath=" /MyCKEditor/ ckeditor/" ></ckeditor:replace> </body>
如上:平时的标签直接使用<%=basePath %>,而这里的ck*标签中basePath值必须以'/'开头,以'/'结尾
在jsp中使用CKEditor:
http://docs.cksource.com/CKEditor_3.x/Developers_Guide/Java/Integration
1.导入所需要的jar包,在这个jar包中包含ckeditor.tld标签库文件,同时还包括一些java类,用来在java代码中直接操作CKEditor
2.在jsp页面引入ckeditor的标签
<%@ taglib uri="http://ckeditor.com" prefix="ckeditor" %>
在ckeditor.tld标签库中有三个标签
1.ckeditor:editor 表示直接使用一个editor编辑器
2.ckeditor:replace 表示替换jsp页面中已有的指定的那个普通的<textarea>元素
3.ckeditor:replaceAll 表示替换jsp页面中所有的普通的<textarrea>元素,但必须是name值和class一样时
3.引入要使用的js和css文件
< link rel= "stylesheet" href = "ckeditor/samples/sample.css" type ="text/css" ></ link>
<script type= "text/javascript" src ="js/jquery-1.8.0.js" ></ script>
<script type= "text/javascript" src ="ckeditor/ckeditor.js" ></ script>
<script type= "text/javascript" src ="ckeditor/adapters/jquery.js" ></ script>
4.在jsp页面的<body></body>中使用ckeditor标签
(1)直接使用ckeditor标签作为页面的<textarea>
< ckeditor:editor editor ="editor1" basePath ="/ckeditor/"></ckeditor:editor >
这里必须要注意basePath路径,指的就是在项目中添加的ckeditor文件的路径,在这个文件夹下包括一系列的js,css,html,还有ckeditor的案例文件,这个文件是比较重要的。
(2)使用<ckeditor:replace>
<body>
<textarea rows="" cols= "" id ="editor"></ textarea>
<ckeditor:replace replace="editor" basePath="/ckeditor/" ></ckeditor:replace>
</body >
这里的replace的值就是普通textarea元素中的id值,也可以是name值,在这里使用replace标签后,jsp页面不会有两个textrea,因为此时下面的代替了上面的<textarea>元素,一般<ckeditor:replace>都是放到<body>标签的最后一行,即与</body>在一起
(3)使用<ckeditor:replaceAll>
<textarea rows= "" cols ="" name="editor" class="editor" ></textarea>< br>
<textarea rows="" cols= "" name ="editor" class="editor" ></textarea>
<ckeditor:replaceAll basePath="/ckeditor/" className="editor" ></ckeditor:replaceAll>
这里的普通的textarea元素的name值和class值必须同时都为editor,replaceAll标签中的className为editor时,才有效
总结上面,<ckeditor:replace>是最常用的方法