CKEditor

开场白:

最近用到了ckeditor网上看了好多大同小异,但是版本都比较老旧了,也许使用过程中有瑕疵,本人

自己总结了下,已经经过实测,方便大家参考,也可以提宝贵意见,互相交流。


正文:

由于Fckeditor只能用于基于ie内核的浏览器,如果要使用于chrome,safi等浏览器,必须要用ckeditor。

我这边对ckeditor的使用以及图片上传做个简单的说明。

(本人用的ckeditor是Version 4.6.2 • 12 Jan 2017  Full Package)  是在struts2框架下用的

先看一下Fckeditor的界面


再看一下ckeditor的界面


通过界面大家也能直观感受到了ckeditor的华丽转身了吧。

下面我们就介绍下怎么使用这个ckeditor


1.首先可以去ckeditor官网下载需要的ckeditor版本http://ckeditor.com/download

2.下载完成后解压,放到你项目的资源目录下,我的是WebRoot目录下。

3.要在你使用ckeditor的jsp界面中加入ckeditor.js 如:

<script type="text/javascript" src="ckeditor_full/ckeditor.js">

4.在要转换成富文本的textarea下方编写js:CKEDITOR.replace('textarea的name'),如

   <textarea name="financial.bz"></textarea>
   <script type="text/javascript">CKEDITOR.replace('financial.bz');</script>



补充:这里发现了一个比较简单的方法,前提是3要配置。

<textarea id="editor" class="ckeditor"></textarea>(注意,里面的id  class属性值一个都不能错,不能省)


这里还有个好处就是后台用struts2框架获取ckeditor的值,可以设置textarea的name为content具体要看你的action中的对象内容用的什么标签了。

这样就可以把值传递给后台action了。

例如: <textarea name="content" cols="100" id="editor" class="ckeditor" rows="10"></textarea>  这样后台就可以获取到content的值了。


补充:以上方法可以用来替换老的FCKEDITOR 无需改代码,直接用上述例子代码就可以替换,主要name要改成你之前FCKEDITOR的NAME。





代码片段

<html>
	<head>
                <script type="text/javascript" src="ckeditor_full/ckeditor.js"></script>
	</head>
	<body>	
		<textarea name="editor1"></textarea>
		<script type="text/javascript">CKEDITOR.replace('editor1');</script>
	</body>
</html>


以上你的ckeditor就可以展现出来了。



解决图片上传问题


1:上传按钮显示解决

在ckeditor/plugins/image/dialogs/文件中找到,我这里用的是full版本所以改了文件夹名字

{id:"Upload",hidden:!0,filebrowser:"uploadButton",  然后将hidden:!0  改成hidden:0

(此方法不推荐)

或者在config.js配置文件中加上

config.filebrowserUploadUrl="actions/ckeditorUpload";//待会要上传的action或servlet



2:预览中的英文句子显示解决。

第一种方法:打开ckeditor/plugins/image/dialogs/image.js文件,搜索“b.config.image_previewText”,(b.config.image_previewText||'')单引号中的内容全删了,注意别删多了。(由于ckeditor的很多js文件都是压缩过的,格式很难看,很容易删错,所以不推荐此种方法)
第二种方法:打开config.js文件,加入下面一句话,注意引号里面一定要有个空格,不能是空字符串。
config.image_previewText=' '; //预览区域显示内容

3:

上传功能实现

上面的只是一个上传页面。也就相当于一个HTMLform表单,要配置点击“上传到服务器上”按钮后请求的Action。可以在ckeditor/config.js中配置。

加入:

config.filebrowserUploadUrl="actions/ckeditorUpload";  用名字空间为actions的写法,目前没有调测通过。

config.filebrowserUploadUrl = "ckeditorUpload.action";  不用名字空间的写法,已经调测通过。

"ckeditorUpload"是请求的URL,也就是点击这个按钮就会post到ckeditorUpload地址进行处理,这里指向的是Struts 2的一个Action。当然,也可以用servlet或者ASPPHP等来处理请求。


在ckeditor中的config.js中配置

CKEDITOR.editorConfig = function( config ) {
	config.image_previewText=' '; //预览区域显示内容
	config.filebrowserUploadUrl = "ckeditorUpload.action";
};

在struts.xml中配置

	<package name="actions" extends="struts-default" >  
       <action name="ckeditorUpload" class="action.CkeditorUpload">                                              
    </action>  
    </package> 

    不要用名字空间之前试了不好用。这里的包名没有用到切记。

<package name="myactions" extends="struts-default" namespace="/actions">  
                   <action name="ckeditorUpload" class="action.CkeditorUpload ">  
                   </action>  
                </package>  

记得要加上CkeditorUpload的类代码:

package action;

import java.io.File;  
import java.io.FileInputStream;  
import java.io.FileOutputStream;  
import java.io.InputStream;  
import java.io.OutputStream;  
import java.io.PrintWriter;  
  
import javax.servlet.http.HttpServletResponse;  
  
import org.apache.struts2.ServletActionContext;  
  
import com.opensymphony.xwork2.ActionSupport;  
  
public class CkeditorUpload extends ActionSupport {  
  
    private File upload;  
    private String uploadContentType;  
    private String uploadFileName;  
  
  
    public File getUpload() {  
        return upload;  
    }  
  
    public void setUpload(File upload) {  
          
        this.upload = upload;  
    }  
  
    public String getUploadContentType() {  
        return uploadContentType;  
    }  
  
    public void setUploadContentType(String uploadContentType) {  
        this.uploadContentType = uploadContentType;  
    }  
  
    public String getUploadFileName() {  
        return uploadFileName;  
    }  
  
    public void setUploadFileName(String uploadFileName) {  
        this.uploadFileName = uploadFileName;  
    }  
  
    public String execute() throws Exception {  
  
        HttpServletResponse response = ServletActionContext.getResponse();  
        response.setCharacterEncoding("GBK");  
        PrintWriter out = response.getWriter();  
  
        // CKEditor提交的很重要的一个参数  
        String callback = ServletActionContext.getRequest().getParameter("CKEditorFuncNum");   
          
        String expandedName = "";  //文件扩展名  
        if (uploadContentType.equals("image/pjpeg") || uploadContentType.equals("image/jpeg")) {  
            //IE6上传jpg图片的headimageContentType是image/pjpeg,而IE9以及火狐上传的jpg图片是image/jpeg  
            expandedName = ".jpg";  
        }else if(uploadContentType.equals("image/png") || uploadContentType.equals("image/x-png")){  
            //IE6上传的png图片的headimageContentType是"image/x-png"  
            expandedName = ".png";  
        }else if(uploadContentType.equals("image/gif")){  
            expandedName = ".gif";  
        }else if(uploadContentType.equals("image/bmp")){  
            expandedName = ".bmp";  
        }else{  
            out.println("<script type=\"text/javascript\">");    
            out.println("window.parent.CKEDITOR.tools.callFunction(" + callback + ",''," + "'文件格式不正确(必须为.jpg/.gif/.bmp/.png文件)');");   
            out.println("</script>");  
            return null;  
        }  
          
        if(upload.length() > 600*1024){  
            out.println("<script type=\"text/javascript\">");    
            out.println("window.parent.CKEDITOR.tools.callFunction(" + callback + ",''," + "'文件大小不得大于600k');");   
            out.println("</script>");  
            return null;  
        }  
          
          
        InputStream is = new FileInputStream(upload);  
        String uploadPath = ServletActionContext.getServletContext()     
                .getRealPath("/img/postImg");  
        String fileName = java.util.UUID.randomUUID().toString();  //采用时间+UUID的方式随即命名  
        fileName += expandedName;  
        File toFile = new File(uploadPath, fileName);  
        OutputStream os = new FileOutputStream(toFile);     
        byte[] buffer = new byte[1024];     
        int length = 0;  
        while ((length = is.read(buffer)) > 0) {     
            os.write(buffer, 0, length);     
        }     
        is.close();  
        os.close();  
          
        // 返回“图像”选项卡并显示图片  
        out.println("<script type=\"text/javascript\">");    
        out.println("window.parent.CKEDITOR.tools.callFunction(" + callback + ",'" + "img/postImg/" + fileName + "','')");    
        out.println("</script>");  
          
        return null;  
    }  
}  



加完之后运行会发现下面的报错那就是说在你的工程下没有img\postImg这个路径在WebRoot(本人工程的)下面加上这个文件路径,重新clear一下工程,重新运行一下工程会自动重启server。

严重: Servlet.service() for servlet [default] in context with path [/forum] threw exception [java.io.FileNotFoundException: J:\tool\eclipse_mars\workspace\.metadata\.plugins\org.eclipse.wst.server.core\tmp1\wtpwebapps\forum\img\postImg\8223b424-bd11-41dd-b319-36d4b20e6075.gif (系统找不到指定的路径。)] with root cause
java.io.FileNotFoundException: J:\tool\eclipse_mars\workspace\.metadata\.plugins\org.eclipse.wst.server.core\tmp1\wtpwebapps\forum\img\postImg\8223b424-bd11-41dd-b319-36d4b20e6075.gif (系统找不到指定的路径。)


使用过程截图







补充下


Struts.xml配置中的包介绍

<package name="itcast" namespace="/test" extends="struts-default">
<action name="helloworld" class="cn.itcast.action.HelloWorldAction" method="execute" >
<result name="success">/WEB-INF/page/hello.jsp</result>
</action>
 </package>

在struts2框架中使用包来管理Action,包的作用和java中的类包是非常类似的,它主要用于管理一组业务功能相关的action。在实际应用中,我们应该把一组业务功能相关的Action放在同一个包下。
 
配置包时必须指定name属性,该name属性值可以任意取名,但必须唯一,他不对应java的类包,如果其他包要继承该包,必须通过该属性进行引用。包的namespace属性用于定义该包的命名空间,命名空间作为访问该包下的Action的路径的一部分,如访问上面例子的Action,访问路径为:/test/helloworld.action。 namespace属性可以不配置,对本例而言,如果不指定该属性,默认的命名空间为“”(空字符串)。
 
通常每个包都应该继承struts-default包, 因为Struts2很多核心的功能都是拦截器来实现。如:从请求中把请求参数封装到action、文件上传和数据验证等等都是通过拦截器实现的。 struts-default定义了这些拦截器和Result类型。可以这么说:当包继承了struts-default才能使用struts2提供的核心功能。 struts-default包是在struts2-core-2.x.x.jar文件中的struts-default.xml中定义。 struts-default.xml也是Struts2默认配置文件。 Struts2每次都会自动加载 struts-default.xml文件。
 
注意:包还可以通过abstract=“true”定义为抽象包,抽象包中不能包含action。


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

云浩舟

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值