jsp+FCKEditor+CKEditor

一、FCKEditor 
      上官方网站：www.fckeditor.net 下载最新版本FCKeditor，将其中的fckeditor文件夹复制到WebRoot下面。找到fckconfig.js文件进行编辑，可参考FCKConfig.ToolbarSets["Default"] =[ ]
[ ]里面的选项可根据自己喜好进行选择，然后取名FCKConfig.ToolbarSets["你取的工具条名称"] 。接下来如果想在页面通过标签嵌入方式显示效果的话必须添加java-coreX.X.jar包来获取FCK的相应标签。JSP页面中使用FCKEditor，有两种方式：
       第一、标签方式
       <%@ taglib uri="http://java.fckeditor.net" prefix="FCK" %>
      在需要使用编辑器的地方加入  
        <FCK:editor id="content" width="85%" height="300px"> 
                  
       </FCK:editor> 例如
      <td></td>标签中，经过解析后生成如下代码

  <td><inputtype=hidden id="content" name="content" value="">

<INPUTtype='hidden'name="content" value=''><IFRAMEID=EditContentSRC='../Plus/Edit/edit.asp?ID=content&sMode=EDIT&Tool=Article&EditButton=NO'FRAMEBORDER=0SCROLLING=noWIDTH=600HEIGHT=450></IFRAME></td>等形式。其中content为编辑器的实例名。

      第二、JavaScript方式，这种方式不需要导入标签
      jsp页面引入<script type="text/javascript" src="ckeditor/ckeditor.js"></script>    
      <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 下载最新版本FCKeditor，将其中的fckeditor文件夹复制到WebRoot下面。
        在jsp页面引入<script type="text/javascript" src="ckeditor/ckeditor.js"></script>  
     <form method="post">
                My Editor:<br />
             <textarea id="editor1" name="editor1" class="ckeditor"></textarea>
             <script type="text/javascript">
                     CKEDITOR.replace('editor1');
             </script>
            <input type="submit" />
     </form>
    第一、CKEditor的皮肤更换，定制皮肤：卡马，office2003,第二版皮肤
         CKEDITOR.replace( 'editor_kama',
          {
             skin : 'kama'
          });
      其中eidor_kama为textera的名称，可以改变。
      skin可选的值有v2,office2003,kama
     第二、用户界面颜色选择器
        CKEDITOR.replace( 'editor1',
         {
            extraPlugins : 'uicolor',
            uiColor: 'yellow',
            toolbar :
           [
                [ 'Bold', 'Italic', '-', 'NumberedList', 'BulletedList', '-', 'Link', 'Unlink' ],
          [ 'UIColor' ]
          ]
        });
       其中uiColor的值为初始页面的颜色可以为各种颜色green,yellow,red,blue等等
      ['UIColor']为真正出现的在工具条中的颜色选择器
  三、用js给fckeditor赋值、取值的办法

            //获取编辑器中HTML内容
            function getEditorHTMLContents(EditorName) {
                 var oEditor = FCKeditorAPI.GetInstance(EditorName);
                 return(oEditor.GetXHTML(true));
            }

  
            //获取编辑器中文字内容
           function getEditorTextContents(EditorName) {
               var oEditor = FCKeditorAPI.GetInstance(EditorName);
               return(oEditor.EditorDocument.body.innerText);
           }

 
           //设置编辑器中内容
           function SetEditorContents(EditorName, ContentStr) { 
                   var oEditor = FCKeditorAPI.GetInstance(EditorName) ;  
                    oEditor.SetHTML(ContentStr) ;
           }
            赋值：
            Java代码
               var oEditor = FCKeditorAPI.GetInstance('ncontent');  
                oEditor.SetHTML(“三菱电机法拉撕开对方”);

              还有一个使用的是jquery来实现
                jQuery FCKEditor插件取值、赋值
                 第一步：导入需要的js文件（根据实际情况修改相应路径）
               Java代码
                  <script src="../js/jquery.js" type=text/javascript></script>   
                 <script src="../js/jquery.FCKEditor.js" type=text/javascript></script>  
                  <script src="../fckeditor/fckeditor.js" type="text/javascript"></script>
                  <script src="../js/jquery.js" type=text/javascript></script> 
               第二步：初始化（根据实际情况修改相应路径）
              Java代码
                  //初始化FCKEditor  
                $.fck.config = {path: '/这里是你的项目名称/fckeditor/', height: 400 ,toolbar:'Default'};  
               $('textarea#ncontent').fck();
                //初始化FCKEditor
               $.fck.config = {path: '/这里是你的项目名称/fckeditor/', height: 400 ,toolbar:'Default'};
              $('textarea#ncontent').fck();

              其中#ncontent为页面你所绑定的textArea的id或name
             第三步：取值
            Java代码
             var getcontent = $.fck.content('ncontent', ''); //其中ncontent为页面你所绑定的textarea的id或name 
            第四步：赋值（更新的时候先把原有的值赋给textarea）
           Java代码
           var oEditor = FCKeditorAPI.GetInstance('ncontent');  
           oEditor.SetHTML(data.news_add.na_newscontent);