快速掌握FCKEditor和CKEditor-it论坛

安哥网络

快速掌握FCKEditor和CKEditor-it论坛
其一：FCKEditor
首先上官方网站：www.fckeditor.net
下载FCKeditor_2.6.3.zip，将其中的fckeditor文件夹复制到WebRoot下面，后面可以直接使用
下一步（这一步不是必须的）:
找到fckconfig.js文件进行编辑，可参考FCKConfig.ToolbarSets["Default"] =[ ]
[ ]里面的选项可根据自己喜好进行选择，然后取名FCKConfig.ToolbarSets["你取的工具条名称"]
接下来如果想在页面通过标签嵌入方式显示效果的话
必须添加java-core2.4.jar包来获取FCK的相应标签
       <%@ taglib uri="http://java.fckeditor.net" prefix="FCK" %>
        <FCK:editor instanceName="content"  value=" " width="85%" height="300px" toolbarSet="你刚才取的名字">
                <FCK:config SkinPath="skins/silver/" AutoDetectLanguage="true" />
        </FCK:editor>
当然这里面的toolbarSet可以不写就用默认的工具条布局模式
1. 标签方式话代码如下
  <%@ taglib uri="http://java.fckeditor.net" prefix="FCK" %>
  省略中间标签
  <FCK:editor  instanceName="content"  value=" " width="85%" height="300px">
                <FCK:config SkinPath="skins/silver/" AutoDetectLanguage="true" />
   </FCK:editor>
2.JavaScript方式的话不需导入标签库
  <script type="text/javascript">
   window.onload(function(){
   var oFCKeditor=new FCKeditor('MyTextarea');
   oFCKeditor.BasePath="fckeditor/";
    oFCKeditor.ReplaceTextarea();
   });
  </script>
<textarea rows="4" cols="60" name="MyTextarea"></textarea>
其二：CKEditor则更加方便快捷
   首先从官方网站上：www.fckeditor.net
   下载ckeditor_3.2.zip，将其加压，把ckeditor文件夹复制到WebRoot下面
第一种方式：通过设定textarea的类名为ckeditor即可替换：
                                        ...省略导入文件语句
     <textarea class="ckeditor" rows="10"   cols="80" name="editor1"> </textarea>
第二种方式：通过代码替换
     <script type="text/javascript" src="ckeditor/ckeditor.js"></script>
     <script type="text/javascript" src="ckeditor/_samples/sample.js"></script>
      <link rel="stylesheet" type="text/css" href="ckeditor/_samples/sample.css">
               <textarea rows="10" cols="80" name="editor1"> </textarea>
               <script type="text/javascript">
                        //<![CDATA[

                                CKEDITOR.replace( 'editor1',
                                        {
                                                fullPage : true
                                        });

                        //]]>
                </script>
                  其中：,{fullPage:true}可以省略
其三：CKEditor的皮肤更换
     (1)定制皮肤：卡马，office2003,第二版皮肤
      CKEDITOR.replace( 'editor_kama',
                                        {
                                                skin : 'kama'
                                        });
      其中eidor_kama为textera的名称，可以改变。
      skin可选的值有v2,office2003,kama
   (2)用户界面颜色选择器
                   CKEDITOR.replace( 'editor1',
                                {
                               
                                        extraPlugins : 'uicolor',
                                        uiColor: 'yellow',
                                        toolbar :
                                        [
                                                [ 'Bold', 'Italic', '-', 'NumberedList', 'BulletedList', '-', 'Link', 'Unlink' ],
                                                [ 'UIColor' ]
                                        ]
                                });
       其中uiColor的值为初始页面的颜色可以为各种颜色green,yellow,red,blue等等
      ['UIColor']为真正出现的在工具条中的颜色选择器

其他功能如添加语言分类,淘宝网的选择在飞模式。比较麻烦参考下载包中samples中的index.jsp即可
摘自：http://javacrazyer.iteye.com/blog/618139