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);

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
彻底解决fckeditor(jsp版)上传中文图片乱码问题,我这里用的编码是utf-8的,这里用的fckeditor 是2.6的,fckeditor.java包是2.3的,经过我修改ConnectorServlet.java和SimpleUploaderServlet.java两个文件,重新生成fckeditor-java-2.3.jar包, 要解决所有的乱码问题,有3部要修改, 1.修改Web容器的字符编码,如果Web容器用的是Tomcat,则修改conf/server.xml文件,在两个Connector中添加“URIEncoding="utf-8"”,我这里用的是utf-8编码,所以修改成utf-8,若项目是gb2312编码,则设置为“URIEncoding="gb2312"”。 2.在“浏览服务器”页面中上传文件时,打开项目WebRoot中的文件/editor/filemanager/browser/default/frmupload.html,在head中加一个meta: <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />,看看该文件是不是utf-8格式的,若不是,则转换成utf-8,若你用的不是utf-8则转成你用的那种编码,上面charset也设置成你用的编码 3.修改ConnectorServlet.java和SimpleUploaderServlet.java两个文件,我在这两个文件中都是加了一个静态变量encoding,private static String encoding;保存项目中的编码, 若在web.xml文件中没有给这个变量传值的话,默认是gb2312,如下代码if(encoding.isEmpty()){encoding="gb2312";},在ConnectorServlet.java的doGet与doPost的开头部分加入request.setCharacterEncoding(encoding);将请求的字符集编码设置成项目中的编码,在ConnectorServlet.java和SimpleUploaderServlet.java两个文件中的DiskFileUpload upload = new DiskFileUpload();后面加入upload.setHeaderEncoding(encoding);告诉FileUpload组件处理时的编码为项目编码,在FileItem中,用getString(encoding),这项设置可以解决获取的表单字段为乱码的问题,所以在每个FileItem实例后面都执行一次getString(encoding),就告诉FileItem在取值时用的编码是encoding所设置的编码。如在ConnectorServlet.java和SimpleUploaderServlet.java两个文件中的 FileItem item后面加上一句item.getString(encoding);在FileItem uplFile后面加上一句uplFile.getString(encoding); 接下来就是设置web.xml了,在web.xml中给上面讲到的encoding传值,如下 <init-param> <param-name>encoding</param-name> <param-value>utf-8</param-value> </init-param> 一切都OK了,真正的解决了上传中文名图片乱码问题。 在上面的第3步中,要用到Ant产生jar,这时要注意, 把Tomcat安装目录下/server/lib里的catalina-ant.jar复制到项目的/WEB-INF/lib下。打开build.xml,修改property name="catalina.home"成Tomcat的安装目录。修改taskdef name="deploy"、taskdef name="list"、taskdef name="reload"、taskdef name="undeploy"如下: <taskdef name="deploy" classname="org.apache.catalina.ant.DeployTask"> <classpath refid="compile.classpath"></classpath> </taskdef> <taskdef name="list" classname="org.apache.catalina.ant.ListTask"> <classpath refid="compile.classpath"></classpath> </taskdef> <taskdef name="reload" classname="org.apache.catalina.ant.ReloadTask"> <classpath refid="compile.classpath"></classpath> </taskdef> <taskdef name="undeploy" classname="org.apache.catalina.ant.UndeployTask"> <classpath refid="compile.classpath"></classpath> </taskdef> 然后在Eclipse的Outline窗口中运行Ant的dist,就会生成的新的FCKeditor-2.3.jar。 绝对是真实的,共享出来与大家分享,少一个上传其它文件的,如RAR的,有添加过这个功能的朋友也拿出来共享下吧

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值