Javaweb_10（CKeditor&SmartUpload）

富文本编辑器

思维导图

 

一、富文本编辑器
    1.概述
    富文本编辑器，Rich Text Editor, 简称 RTE, 是一种可内嵌于浏览器，所见即所得的文本编辑器，类似于 Microsoft Word 的编辑功能。

    2.常用富文本编辑器
    ①ckeditor------------------------------------今日选择
    ②Kindeditor
    ③ueditor
    ④wangEditor
    ⑤SmartMarkUP
    ⑥Control.Editor
    ⑦EditArea
    ⑧Free Rich Text Editor

    3.CKeditor的使用步骤

    [步骤1] 官网https://ckeditor.com/ 下载-解压-引入
    [步骤2] 
        <script type="text/javascript" src = "../ckeditor/ckeditor.js"></script>
        <script type="text/javascript">
        CKEDITOR.replace("ncontent");
        </script>

富文本编辑器原图

 

SmartUpload上传文件

思维导图： 

 

 

========================================
1.使用第三方上传插件：smartUpload
2.明确:
  a.数据库表中的列中存的是文件路径；
图片也要传到服务器上（将本地文件传到服务器项目中，然后将路径存入表字段中）
3.步骤：
  第一：在项目中导入jspsmartupload.jar文件包
  第二：在<form>表单中添加表单属性：enctype="multipart/form-data"
  第三：了解file类与smartupload类中的方法

======================================================

  表单必须用enctype属性进行封装：
    <form action="" method="post" enctype="multipart/form-data">
    //表示表单将按照二进制的方式提交

  在使用smartUpload时必须严格按照如上程序进行：
    SmartUpload smart=new SmartUpload();  //实例化SmartUpload上传组件
    smart.initialize(pageContext);    //初始化上传操作
    smart.upload();        //上传准备
    smart.save("upload");    //将上传文件保存在upload文件夹中

2.限制文件的上传类型
    允许上传类型：
    samrt.setAllowedFilesList("gif,jpg,doc,rar");
    不允许上传类型：
    samrt.setDeniedFilesList("jsp,asp,php,aspx");

3.限制文件上传的大小
    smart.setMaxFileSize(2*1024*1024);
    

4.设置字符编码
    smart.setCharset("utf-8");
    //设置字符编码（如果未设，当请求中含有中文时会报：java.lang.NullPointerException: charsetName），准备上传

5.混合表单
  当一个表单使用了enctype封装后，其他的非文件类的表单控件的内容就无法通过request内置对象取得，此时必须通过SmartUpload类中提供的getRequest()方法取得全部的请求参数。

    String uname=smart.getRequest().getParameter("uname");
    注意：该句代码一定要在执行完upload()方法之后才可以使用

6.为上传文件自动命名
  如果多个用户上传的文件名称一样，则肯定会发生覆盖的情况，为了避免这类问题，可以采用为上传文件自动命名的方式。为防止重名，自动命名可以采用如下的格式：

    IP地址 + 时间戳 + 三位随机数

    public String getIPTimeRand(){

        //实例化StringBuffer对象，用来做文件名拼接
        StringBuffer buf=new StringBuffer();
        
        //获得本机的IP地址
        InetAddress addr = InetAddress.getLocalHost();
        ip=addr.getHostAddress().toString;//获得本机IP
        address=addr.getHostName()toString;//获得本机名称 
        
        //获得当前时间戳
        SimpleDateFormat date=new SimpleDateFormat("yyyyMMddHHmmssSSS");
        date.format(new Date());

        //获得一个3位数的随机数
        Random r=new Random();
        for(int i=0; i<3; i)
        buf.append(r.nextInt(10));
        }
        
        return buf;
    }

    文件名得到了，我们需要得到上传文件的后缀名：getFileExt()

    a. 得到上传文件名：
    String file=smart.getFiles().getFile(0).getFileName();
    //获得第一个上传文件

    b. 得到上传文件的后缀名：
    String ext=smart.getFiles().getFile(0).getFileExt();
    //获得第一个上传文件的文件后缀

    c. 拼凑文件名：
    String fileName=getIPTimeRand()+"."+ext;

    d. 由于此时要用新的文件名称保存上传文件，所以要通过smart.getFiles().getFile(0).saveAs()方法进行手工保存。具体代码：

    smart.getFiles().getFile(0).saveAs(getServletContext().getRealPath("/")+"upload"+java.io.File.separator+fileName);

    
    //file.saveAs(路径,上传方式);

7.批量上传
  如要完成批量上传，则肯定需要循环的方式进行，那么就必须通过如下方法取得上传文件数量。

    smart.getFiles().getCount();

   <form>表单代码：

    <form action="smartupload.jsp" method="post" enctype="multipart/form-data">
        文件1：<input type="file" name="pic1"><br/>
        文件2：<input type="file" name="pic2"><br/>
        文件3：<input type="file" name="pic3"><br/>
        <input type="submit" value="上传" >
        <input type="reset" value="重置">
    </form>

    smartupload.jsp代码：
    <%
    SmartUpload smart=new SmartUpload();
    smart.initialize(pageContext);
    smart.upload();
    for(int i=0; i<smart.getFiles().getCount(); i++){
        smart.save("upload");
    }
    %>

================================================================
关于在servlet中写smartupload的问题：

如果fckeditor在servlet中怎么写？使用了JspFactory.getDefaultFactory()方法
<要注意抛异常>。

    PageContext context = JspFactory.getDefaultFactory().getPageContext(this, request, response, null, true, 8*1024, true);

    一共七个参数：
    第一个参数是传递一个Servlet，在servlet中传递this就可以了；
    第二个和第三个参数是request与response不多说明了；
    第四个参数是发生错误后的url路径地址，如果没有可以键入null；
    第五个参数是是否需要session，这里可以写入true；
    第六个参数是缓存大小，我用了8*1024，也可以用JspWriter.DEFAULT_BUFFER；
    第七个参数是是否需要刷新，键入ture；