CKEditor的基础学习

来源：互联网发布：node.js适合做网站吗编辑：程序博客网时间：2024/06/05 16:41

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值必须以'/'开头，以'/'结尾

http://docs.cksource.com/CKEditor_3.x/Developers_Guide/Java/Integration

在jsp中使用CKEditor：

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>是最常用的方法