JavaWEB（CKeditor&SmartUpload）

最新推荐文章于 2023-06-02 09:27:37 发布

m0_l5z

最新推荐文章于 2023-06-02 09:27:37 发布

阅读量225

点赞数

文章标签： eclipse java

本文链接：https://blog.csdn.net/m0_64863860/article/details/124101745

版权

富文本编辑器
   概述
       富文本编辑器，Rich Text Editor, 简称 RTE, 是一种可内嵌于浏览器，所见即所得的文本编辑器，类似于 Microsoft Word 的编辑功能。
   常用的富文本编辑器
       ①ckeditor
       ②Kindeditor
       ③ueditor
       ④wangEditor
       ⑤SmartMarkUP
       ⑥Control.Editor
       ⑦EditArea
       ⑧Free Rich Text Editor
   CKeditor的使用步骤
       【步骤一】官网https://ckeditor.com/ 下载-解压-引入
       【步骤二】
   <script type="text/javascript" src = "../ckeditor/ckeditor.js"></script>
   <script type="text/javascript">
       CKEDITOR.replace("ncontent");
   </script>

web文件上传与下载
   概述
       将本地文件上传到服务器端，从服务器端下载文件到本地的过程。例如目前网站需要上传头像、上传下载图片或网盘等功能都是利用文件上传下载功能实现的。
   原理
       文件上传
           （1）客户端浏览器通过文件浏览框，选择需要上传的文件内容（其中包括文件路径及文件内容）。
           （2）客户端浏览器通过点击上传按钮，将本地文件上传到服务器端。
           （3）服务器端通过程序接收本地文件内容，并将其保存在服务器端磁盘中。
       文件下载
           （1）客户端浏览器通过点击下载按钮，将服务器端保存的文件下载到本地磁盘。
           （2）服务器端通过程序将服务器端文件响应给客户端。
   实现方式
       SmartUpload组件
       Apache CommonsFileUpload组件
       Servlet 3.0 文件上传
   SmartUpload组件使用
       核心类
           SmartUpload
               概述
                   该类完成上传下载工作。
               上传文件使用的方法
                   public final void initialize(javax.servlet.jsp.PageContext pageContext)
   （1）执行上传下载的初始化工作，必须第一个执行。
   （2）pageContext为JSP页面内置对象（页面上下文）
                   public void upload()
   （1）上传文件数据。对于上传操作，第一步执行initialize方法，第二步就要执行这个方法。
                   public int save(String destPathName)
   （1）将全部上传文件保存到指定目录下，并返回保存的文件个数。
                   public int save(String destPathName,int option)
   ** 将全部上传文件保存到指定目录下，并返回保存的文件个数。
   ** option：
       ** SAVE_PHYSICAL指示组件将文件保存到以操作系统根目录为文件根目录的目录下
       ** AVE_VIRTUAL指示组件将文件保存到以Web应用程序根目录为文件根目录的目录下
       ** SAVE_AUTO则表示由组件自动选择
                   public Files getFiles()
   ** 取全部上传文件，以Files对象形式返回，可以利用Files类的操作方法来获得上传文件的数目等信息
                   public Request getRequest()
   ** 取得Request对象，以便由此对象获得上传表单参数之值。
                   public void setAllowedFilesList(String allowedFilesList)
   ** 设定允许上传带有指定扩展名的文件，当上传过程中有文件名不允许时，组件将抛出异常
                   public void setDeniedFilesList(String deniedFilesList)
   ** 用于限制上传那些带有指定扩展名的文件。若有文件扩展名被限制，则上传时组件将抛出异常。
                   public void setMaxFileSize(long maxFileSize)
   ** 设定每个文件允许上传的最大长度。
                   public void setTotalMaxFileSize(long totalMaxFileSize)
   ** 设定允许上传的文件的总长度，用于限制一次性上传的数据量大小。
               下载文件常用的方法
                   public void setContentDisposition(String contentDisposition)
   ** 将数据追加到MIME文件头的CONTENT-DISPOSITION域。jspSmartUpload组件会在返回下载的信息时自动填写MIME文件头的CONTENT-DISPOSITION域，如果用户需要添加额外信息，请用此方法。
                   downloadFile 下载文件
                       ① public void downloadFile(String sourceFilePathName)
   ** 其中，sourceFilePathName为要下载的文件名（带目录的文件全名）
                       ② public void downloadFile(String sourceFilePathName,String contentType)
   ** 其中，sourceFilePathName为要下载的文件名（带目录的文件全名）,contentType为内容类型（MIME格式的文件类型信息，可被浏览器识别）。
                       ③ public void downloadFile(String sourceFilePathName,String contentType,String destFileName)
   ** 其中，sourceFilePathName为要下载的文件名（带目录的文件全名）,contentType为内容类型（MIME格式的文件类型信息，可被浏览器识别）,destFileName为下载后默认的另存文件名。
           Files
               概述
                   这个类表示所有上传文件的集合，通过它可以得到上传文件的数目、大小等信息。
               常用方法
                   public int getCount()
   ** 取得上传文件的数目。
                   public File getFile(int index)。其中，index为指定位移，其值在0到getCount()-1之间。
   ** 取得指定位移处的文件对象File（这是com.jspsmart.upload.File，不是java.io.File，注意区分）。
                   public long getSize()
   ** 取得上传文件的总长度，可用于限制一次性上传的数据量大小。
                   public Collection getCollection()
   ** 将所有上传文件对象以Collection的形式返回，以便其它应用程序引用，浏览上传文件信息。
                   public Enumeration getEnumeration()
   ** 将所有上传文件对象以Enumeration（枚举）的形式返回，以便其它应用程序浏览上传文件信息。
           File
               概述
                   这个类包装了一个上传文件的所有信息。通过它，可以得到上传文件的文件名、文件大小、扩展名、文件数据等信息。
               常用方法
                   public void saveAs(java.lang.String destFilePathName) 或public void saveAs(java.lang.String destFilePathName, int optionSaveAs)
   ** destFilePathName是另存的文件名
   ** optionSaveAs
       *** SAVEAS_PHYSICAL表明以操作系统的根目录为文件根目录另存文件
       *** SAVEAS_VIRTUAL表明以Web应用程序的根目录为文件根目录另存文件
       *** SAVEAS_AUTO则表示让组件决定，当Web应用程序的根目录存在另存文件的目录时，它会选择SAVEAS_VIRTUAL，否则会选择SAVEAS_PHYSICAL
                   public boolean isMissing()
   ** 这个方法用于判断用户是否选择了文件，也即对应的表单项是否有值。选择了文件时，它返回false。未选文件时，它返回true。
                   public String getFieldName()
   ** 取HTML表单中对应于此上传文件的表单项的名字。
                   public String getFileName()
   ** 取文件名（不含目录信息）
                   public String getFilePathName
   ** 取文件全名（带目录）
                   public String getFileExt()
   ** 取文件扩展名（后缀）
                   public int getSize()
   ** 取文件长度（以字节计）
                   public byte getBinaryData(int index)。其中，index表示位移，其值在0到getSize()-1之间。
   ** 取文件数据中指定位移处的一个字节，用于检测文件等处理。
           Request
               概述
                   这个类的功能等同于JSP内置的对象request。只所以提供这个类，是因为对于文件上传表单，通过request对象无法获得表单项的值，必须通过jspSmartUpload组件提供的Request对象来获取。
               常用方法
                   public String getParameter(String name)。其中，name为参数的名字。
   ** 获取指定参数之值。当参数不存在时，返回值为null。

                   public String[] getParameterValues(String name)。其中，name为参数的名字。
   ** 当一个参数可以有多个值时，用此方法来取其值。它返回的是一个字符串数组。当参数不存在时，返回值为null。
                   public Enumeration getParameterNames()
   ** 取得Request对象中所有参数的名字，用于遍历所有参数。它返回的是一个枚举型的对象
       注意事项
           （1）表单请求方式必须为POST
           （2）设置enctype="multipart/form-data"，专用于文件传输
           （3）文件标签需设置name属性

一、富文本编辑器

概述

富文本编辑器（Rich Text Editor，RTE）是一种可内嵌于浏览器，所见即所得的文本编辑器。它提供类似于Office Word 的编辑功能，方便那些不太懂HTML用户使用，富文本编辑器的应用非常广泛，它的历史与图文网页诞生的历史几乎一样长。

常见富文本编辑器

ckeditor（***）
Kindeditor
ueditor
wangEditor
SmartMarkUP
Control.Editor
EditArea
Free Rich Text Editor

CKeditor介绍

ckeditor是一款由javascript编写的富文本网页编辑器，它可以填写文字、插入图片、视频、Excel等富媒体信息，也可以在源码方式下填写内容，在各个网站中应用非常广泛。

快速入门

2.富文本编辑器的使用CKeditor
（1）官网下载解压
（2）解压文件复制到webContent目录下
（3）在指定的JSP页面中来引入js文件
ckeditor.js
（4）在指定的textarea标签上设置name属性和id属性
（5）通过CKEDITOR.replace(name);
#后台:发布新闻，修改新闻
#前台：发表评论

1.进入官网，下载full版本（这个代表的是使用全部功能，如果是simple或者standed，可能会有些功能不能用）

2.解压之后得到如下的文件目录【其中核心文件是ckeditor.js（必须），配置文件是config.js（可选）】

3.解压后复制到工程的webContent目录下

4.在指定JSP页面引用CKEDITOR的JS文件并且替换TEXTAREA标签

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<!-- 引入ckeditor.js  -->
<script src="ckeditor/ckeditor.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
    window.onload = function(){
        //根据textarea标签的name属性替换成富文本编辑器
        CKEDITOR.replace("ncontent");
    }
</script>
</head>
<body>
    <textarea name="ncontent"></textarea>
</body>
</html>

CKEDITOR.replace()配置

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <script src="ckeditor/ckeditor.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            window.onload = function() {
                CKEDITOR.replace('ncontent', {
                    toolbar: 'Basic',
                    uiColor: '#9AB8F3',
                    language: 'zh-cn',
                    width: '800',
                    height: '200',
                    toolbar: 'Full'
                });
            }
        </script>
    </head>
    <body>
        <textarea name="ncontent" id="ncontent">12312</textarea>

        <!-- 1.点击获取被选中的内容 -->
        <button id="btn" type="button">test1</button>
    </body>
</html>

config.js文件配置

下面是config.js文件里的一些常用设置
CKEDITOR.editorConfig = function( config ) {
    // Define changes to default configuration here. For example:
    // config.language = 'fr';
    // config.uiColor = '#AADC6E';
    // 介面语言，默认为 'en'
    config.language = 'zh-cn';
    // 设置宽高
    config.width = 400;
    config.height = 400;
    // 编辑器样式，有三种：'kama'（默认）、'office2003'、'v2'
    config.skin = 'v2';
    // 背景颜色
    config.uiColor = '#FFF';


    // 工具栏（基础'Basic'、全能'Full'、自定义）plugins/toolbar/plugin.js
    config.toolbar = 'Basic';
    config.toolbar = 'Full';

    这里可以用下面方式自定义工具栏，然后用上面方式调用。参照下面config.toolbar_Full ，写一个config.toolbar_XXX=[具体工具栏配置]；

    然后就可以通过config.toolbar="XXX";调用自己配置的工具栏

    注意，自定义的工具栏名是有区分大小写的，Basic与BASIC是不一样的。

    config.toolbar_Full = [
    ['Source','-','Save','NewPage','Preview','-','Templates'],
    ['Cut','Copy','Paste','PasteText','PasteFromWord','-','Print', 'SpellChecker', 'Scayt'],
    ['Undo','Redo','-','Find','Replace','-','SelectAll','RemoveFormat'],
    ['Form', 'Checkbox', 'Radio', 'TextField', 'Textarea', 'Select', 'Button', 'ImageButton', 'HiddenField'],
    '/',
    ['Bold','Italic','Underline','Strike','-','Subscript','Superscript'],
    ['NumberedList','BulletedList','-','Outdent','Indent','Blockquote'],
    ['JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'],
    ['Link','Unlink','Anchor'],
    ['Image','Flash','Table','HorizontalRule','Smiley','SpecialChar','PageBreak'],
    '/',
    ['Styles','Format','Font','FontSize'],
    ['TextColor','BGColor']
    ];


    //工具栏是否可以被收缩
    config.toolbarCanCollapse = true;
    //工具栏的位置
    config.toolbarLocation = 'top';//可选：bottom
    //工具栏默认是否展开
    config.toolbarStartupExpanded = true;
    // 取消 “拖拽以改变尺寸”功能 plugins/resize/plugin.js
    config.resize_enabled = false;
    //改变大小的最大高度
    config.resize_maxHeight = 3000;
    //改变大小的最大宽度
    config.resize_maxWidth = 3000;
    //改变大小的最小高度
    config.resize_minHeight = 250;
    //改变大小的最小宽度
    config.resize_minWidth = 750;
    // 当提交包含有此编辑器的表单时，是否自动更新元素内的资料
    config.autoUpdateElement = true;
    // 设置是使用绝对目录还是相对目录，为空为相对目录
    config.baseHref = ''
    // 编辑器的z-index值
    config.baseFloatZIndex = 10000;
    //设置快捷键
    config.keystrokes = [
    [ CKEDITOR.ALT + 121 , 'toolbarFocus' ], //获取焦点
    [ CKEDITOR.ALT + 122 , 'elementsPathFocus' ], //元素焦点
    [ CKEDITOR.SHIFT + 121 , 'contextMenu' ], //文本功能表
    [ CKEDITOR.CTRL + 90 , 'undo' ], //撤销
    [ CKEDITOR.CTRL + 89 , 'redo' ], //重做
    [ CKEDITOR.CTRL + CKEDITOR.SHIFT + 90 , 'redo' ], //
    [ CKEDITOR.CTRL + 76 , 'link' ], //链结
    [ CKEDITOR.CTRL + 66 , 'bold' ], //粗体
    [ CKEDITOR.CTRL + 73 , 'italic' ], //斜体
    [ CKEDITOR.CTRL + 85 , 'underline' ], //下划线
    [ CKEDITOR.ALT + 109 , 'toolbarCollapse' ]
    ]
    //设置快捷键 可能与流览器快捷键冲突 plugins/keystrokes/plugin.js.
    config.blockedKeystrokes = [
    CKEDITOR.CTRL + 66 ,
    CKEDITOR.CTRL + 73 ,
    CKEDITOR.CTRL + 85
    ]
    //设置编辑内元素的背景色的取值 plugins/colorbutton/plugin.js.
    config.colorButton_backStyle = {undefined
    element : 'span',
    styles : { 'background-color' : '#(color)' }
    }
    //设置前景色的取值 plugins/colorbutton/plugin.js
    config.colorButton_colors = '000,800000,8B4513,2F4F4F,008080,000080,4B0082,696969,B22222,A52A2A,DAA520,
    006400,40E0D0,0000CD,800080,808080,F00,FF8C00,FFD700,008000,0FF,00F,EE82EE,
    A9A9A9,FFA07A,FFA500,FFFF00,00FF00,AFEEEE,ADD8E6,DDA0DD,D3D3D3,FFF0F5,
    FAEBD7,FFFFE0,F0FFF0,F0FFFF,F0F8FF,E6E6FA,FFF’
    //是否在选择颜色时显示“其他颜色”选项 plugins/colorbutton/plugin.js
    config.colorButton_enableMore = false
    //区块的前景色预设值设置 plugins/colorbutton/plugin.js
    config.colorButton_foreStyle = {undefined
    element : 'span',
    styles : { 'color' : '#(color)' }
    };
    //所需要添加的CSS档 在此添加 可使用相对路径和网站的绝对路径
    config.contentsCss = './contents.css';
    //文字方向
    config.contentsLangDirection = 'rtl'; //从左到右
    //CKeditor的配置档 若不想配置 留空即可
    CKEDITOR.replace( 'myfiled', { customConfig : './config.js' } );
    //介面编辑框的背景色 plugins/dialog/plugin.js
    config.dialog_backgroundCoverColor = 'rgb(255, 254, 253)'; //可设置参考
    config.dialog_backgroundCoverColor = 'white' //默认
    //背景的不透明度 数值应该在：0.0～1.0 之间 plugins/dialog/plugin.js
    config.dialog_backgroundCoverOpacity = 0.5
    //移动或者改变元素时 边框的吸附距离 单位：图元 plugins/dialog/plugin.js
    config.dialog_magnetDistance = 20;
    //是否拒绝本地拼写检查和提示 默认为拒绝 目前仅firefox和safari支持 plugins/wysiwygarea/plugin.js.
    config.disableNativeSpellChecker = true
    //进行表格编辑功能 如：添加行或列 目前仅firefox支持 plugins/wysiwygarea/plugin.js
    config.disableNativeTableHandles = true; //默认为不开启
    //是否开启 图片和表格 的改变大小的功能 config.disableObjectResizing = true;
    config.disableObjectResizing = false //默认为开启
    //设置HTML文档类型
    config.docType = '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd%22' ;
    //是否对编辑区域进行渲染 plugins/editingblock/plugin.js
    config.editingBlock = true;
    //编辑器中回车产生的标籤
    config.enterMode = CKEDITOR.ENTER_P; //可选：CKEDITOR.ENTER_BR或CKEDITOR.ENTER_DIV
    //是否使用HTML实体进行输出 plugins/entities/plugin.js
    config.entities = true;
    //定义更多的实体 plugins/entities/plugin.js
    config.entities_additional = '#39'; //其中#代替了&
    //是否转换一些难以显示的字元为相应的HTML字元 plugins/entities/plugin.js
    config.entities_greek = true;
    //是否转换一些拉丁字元为HTML plugins/entities/plugin.js
    config.entities_latin = true;
    //是否转换一些特殊字元为ASCII字元 如"This is Chinese: 汉语."转换为"This is Chinese: &#27721;&#35821;." plugins/entities/plugin.js
    config.entities_processNumerical = false;
    //添加新组件
    config.extraPlugins = 'myplugin'; //非默认 仅示例
    //使用搜索时的高亮色 plugins/find/plugin.js
    config.find_highlight = {
    element : 'span',
    styles : { 'background-color' : '#ff0', 'color' : '#00f' }
    };
    //默认的字体名 plugins/font/plugin.js
    config.font_defaultLabel = 'Arial';
    //字体编辑时的字元集 可以添加常用的中文字元：宋体、楷体、黑体等 plugins/font/plugin.js
    config.font_names = 'Arial;Times New Roman;Verdana';
    //文字的默认式样 plugins/font/plugin.js
    config.font_style = {
    element : 'span',
    styles : { 'font-family' : '#(family)' },
    overrides : [ { element : 'font', attributes : { 'face' : null } } ]
    };
    //字体默认大小 plugins/font/plugin.js
    config.fontSize_defaultLabel = '12px';
    //字体编辑时可选的字体大小 plugins/font/plugin.js
    config.fontSize_sizes ='8/8px;9/9px;10/10px;11/11px;12/12px;14/14px;16/16px;18/18px;20/20px;22/22px;24/24px;26/26px;28/28px;36/36px;48/48px;72/72px'
    //设置字体大小时 使用的式样 plugins/font/plugin.js
    config.fontSize_style = {
    element : 'span',
    styles : { 'font-size' : '#(size)' },
    overrides : [ { element : 'font', attributes : { 'size' : null } } ]
    };
    //是否强制複製来的内容去除格式 plugins/pastetext/plugin.js
    config.forcePasteAsPlainText =false //不去除
    //是否强制用“&”来代替“&amp;”plugins/htmldataprocessor/plugin.js
    config.forceSimpleAmpersand = false;
    //对address标籤进行格式化 plugins/format/plugin.js
    config.format_address = { element : 'address', attributes : { class : 'styledAddress' } };
    //对DIV标籤自动进行格式化 plugins/format/plugin.js
    config.format_div = { element : 'div', attributes : { class : 'normalDiv' } };
    //对H1标籤自动进行格式化 plugins/format/plugin.js
    config.format_h1 = { element : 'h1', attributes : { class : 'contentTitle1' } };
    //对H2标籤自动进行格式化 plugins/format/plugin.js
    config.format_h2 = { element : 'h2', attributes : { class : 'contentTitle2' } };
    //对H3标籤自动进行格式化 plugins/format/plugin.js
    config.format_h1 = { element : 'h3', attributes : { class : 'contentTitle3' } };
    //对H4标籤自动进行格式化 plugins/format/plugin.js
    config.format_h1 = { element : 'h4', attributes : { class : 'contentTitle4' } };
    //对H5标籤自动进行格式化 plugins/format/plugin.js
    config.format_h1 = { element : 'h5', attributes : { class : 'contentTitle5' } };
    //对H6标籤自动进行格式化 plugins/format/plugin.js
    config.format_h1 = { element : 'h6', attributes : { class : 'contentTitle6' } };
    //对P标籤自动进行格式化 plugins/format/plugin.js
    config.format_p = { element : 'p', attributes : { class : 'normalPara' } };
    //对PRE标籤自动进行格式化 plugins/format/plugin.js
    config.format_pre = { element : 'pre', attributes : { class : 'code' } };
    //用分号分隔的标籤名字 在工具栏上显示 plugins/format/plugin.js
    config.format_tags = 'p;h1;h2;h3;h4;h5;h6;pre;address;div';
    //是否使用完整的html编辑模式 如使用，其源码将包含：<html><body></body></html>等标籤
    config.fullPage = false;
    //是否忽略段落中的空字元 若不忽略 则字元将以“”表示 plugins/wysiwygarea/plugin.js
    config.ignoreEmptyParagraph = true;
    //在清除图片属性框中的链结属性时 是否同时清除两边的<a>标籤 plugins/image/plugin.js
    config.image_removeLinkByEmptyURL = true;
    //一组用逗号分隔的标籤名称，显示在左下角的层次嵌套中 plugins/menu/plugin.js.
    config.menu_groups ='clipboard,form,tablecell,tablecellproperties,tablerow,tablecolumn,table,anchor,link,image,flash,checkbox,radio,textfield,hiddenfield,imagebutton,button,select,textarea';
    //显示子功能表时的延迟，单位：ms plugins/menu/plugin.js
    config.menu_subMenuDelay = 400;
    //当执行“新建”命令时，编辑器中的内容 plugins/newpage/plugin.js
    config.newpage_html = '';
    //当从word里複製文字进来时，是否进行文字的格式化去除 plugins/pastefromword/plugin.js
    config.pasteFromWordIgnoreFontFace = true; //默认为忽略格式
    //是否使用<h1><h2>等标籤修饰或者代替从word文档中粘贴过来的内容 plugins/pastefromword/plugin.js
    config.pasteFromWordKeepsStructure = false;
    //从word中粘贴内容时是否移除格式 plugins/pastefromword/plugin.js
    config.pasteFromWordRemoveStyle = false;
    //对应后台语言的类型来对输出的HTML内容进行格式化，默认为空
    config.protectedSource.push( /<\?[\s\S]*?\?>/g ); // PHP Code
    config.protectedSource.push( //g ); // ASP Code
    config.protectedSource.push( /(]+>[\s|\S]*?<\/asp:[^\>]+>)|(]+\/>)/gi ); // ASP.Net Code
    //当输入：shift+Enter时插入的标籤
    config.shiftEnterMode = CKEDITOR.ENTER_P; //可选：CKEDITOR.ENTER_BR或CKEDITOR.ENTER_DIV
    //可选的表情替代字元 plugins/smiley/plugin.js.
    config.smiley_descriptions = [
    ':)', ':(', ';)', ':D', ':/', ':P',
    '', '', '', '', '', '',
    '', ';(', '', '', '', '',
    '', ':kiss', '' ];
    //对应的表情图片 plugins/smiley/plugin.js
    config.smiley_images = [
    'regular_smile.gif','sad_smile.gif','wink_smile.gif','teeth_smile.gif','confused_smile.gif','tounge_smile.gif',
    'embaressed_smile.gif','omg_smile.gif','whatchutalkingabout_smile.gif','angry_smile.gif','angel_smile.gif','shades_smile.gif',
    'devil_smile.gif','cry_smile.gif','lightbulb.gif','thumbs_down.gif','thumbs_up.gif','heart.gif',
    'broken_heart.gif','kiss.gif','envelope.gif'];
    //表情的地址 plugins/smiley/plugin.js
    config.smiley_path = 'plugins/smiley/images/';
    //页面载入时，编辑框是否立即获得焦点 plugins/editingblock/plugin.js plugins/editingblock/plugin.js.
    config.startupFocus = false;
    //载入时，以何种方式编辑 源码和所见即所得 "source"和"wysiwyg" plugins/editingblock/plugin.js.
    config.startupMode ='wysiwyg';
    //载入时，是否显示框体的边框 plugins/showblocks/plugin.js
    config.startupOutlineBlocks = false;
    //是否载入样式档 plugins/stylescombo/plugin.js.
    config.stylesCombo_stylesSet = 'default';
    //以下为可选
    config.stylesCombo_stylesSet = 'mystyles';
    config.stylesCombo_stylesSet = 'mystyles:/editorstyles/styles.js';
    config.stylesCombo_stylesSet = 'mystyles:http://www.example.com/editorstyles/styles.js';
    //起始的索引值
    config.tabIndex = 0;
    //当用户键入TAB时，编辑器走过的空格数，(&nbsp;) 当值为0时，焦点将移出编辑框 plugins/tab/plugin.js
    config.tabSpaces = 0;
    //默认使用的范本 plugins/templates/plugin.js.
    config.templates = 'default';
    //用逗号分隔的范本档plugins/templates/plugin.js.
    config.templates_files = [ 'plugins/templates/templates/default.js' ]
    //当使用范本时，“编辑内容将被替换”框是否选中 plugins/templates/plugin.js
    config.templates_replaceContent = true;
    //主题
    config.theme = 'default';
    //撤销的记录步数 plugins/undo/plugin.js
    config.undoStackSize =20;
    // 在 CKEditor 中集成 CKFinder，注意 ckfinder 的路径选择要正确。
    //CKFinder.SetupCKEditor(null, '/ckfinder/');
};

<h1>文件上传演示</h1>
<hr/>
<form enctype="multipart/form-data" action="doFileDemo.jsp" method = "post">
   头像: <input type = "file" name = "nfile" id = "myFile"/>
   <input type = "submit" value = "提交"/>
   <img id = "sb"/>
</form>

   <script type="text/javascript">
      document.getElementById("myFile").onchange = function(){
          var fil = this.files;
   for (var i = 0; i < fil.length; i++) {
   reads(fil[i]);
   }

      };
      function reads(fil){
      var reader = new FileReader();
      reader.readAsDataURL(fil);
      reader.onload = function()
      {
          document.getElementById("sb").src = reader.result;
      };
      }

   </script>

二、SmartUpload插件

[问题]图片上传是到数据库还是到服务器？
文件路径保存到数据库中，而把文件上传到服务器【tomcat】的硬盘中。

[使用步骤]
①环境准备：使用SmartUpload组价需要在项目中引入jspsmartupload.jar文件
--将jspsmartupload.jar添加到web-inf\lib目录下

②需要设置表单的enctype属性--设置enctype属性后表单必须以post方式提交。
--<form enctype = "multipart/form-data" method = "post">

③jsp smartupload.jar包中的File类
--封装了单个上传文件所包含的所有信息
saveAS() | isMissing() | getFieldName() | getFileName()

3.文件上传
图片上传后，图片去哪里了？-------服务器了

   技术：组件SmartUpload IO流

准备事项：
   （1）导入依赖（smartUpload.jar）
       webContent目录下手动新建lib文件夹错误的
       webContent===web-inf==lib 正确
   （2）在文件上传标签包裹的form标签上设置2个必要属性
       enctype属性 multipart/form-data
       method属性 post
       在文件上传标签中最好设置name属性

do处理页面中：
1.创建组件（钥匙）
SmartUpload su = new SmartUpload();
2.初始化激活
su.init..(pageContext);
3.设置一些上传的限制方法（）
su.set
4.设置组件的编码
su.setCharset("utf-8");
5.upload方法上传到服务器内存上
su.upload();
6.根据组件中提供的file类获取判断所选中的文件最终保存在本地服务器中
String path = "upload";

File file = su.getFiles().getFile(0);
if(!file.isMissing()){
//获取文件名称
file.getFileName();
}
file.saveAs(path,SmartUpload.SAVE_ATUO)

--其它输入项获取方式通过组件提供的封装Request对象
Request req = su.getRequest();

----------------------------------------------------------------------------------------------------------------
案例：文件上传
<form action = "doAddFile.jsp" enctype="multipart/form-data" method = "post">
       <input type = "file" name = "file"/>
       <input type = "submit" value = "上传"/>
</form>
<%
   //声明并实例化SmartUpload对象
   SmartUpload su = new SmartUpload();
   su.initialize(pageContext);//初始化SmartUpload对象

   //定义文件上传类型
   String allowed = "gif,jpg,doc,rar";
   //定义不许上传类型
   String denied = "jsp,asp,php,aspx,html,htm,exe,bat";
   //设置上传文件大小
   int file_size = 10*1024*1024;
   File file = null;
   try{
       //定义允许上传文件类型
       su.setAllowedFilesList(allowed);
       //不允许上传文件类型
       su.setDeniedFilesList(denied);
       //单个文件最大限制
       su.setMaxFileSize(file_size);
       su.setCharset("utf-8");
       //开始文件上传
       su.upload();//服务器的内存中

       //得到第一个上传的文件
       //System.out.println(su.getFiles().getSize());
       file = su.getFiles().getFile(0);
       String path = null;
       if(!file.isMissing()){//如果上传了文件
           path = "upload\\";//文件保存的路径
           path+=file.getFileName();//加上了文件名
           file.saveAs(path, SmartUpload.SAVE_VIRTUAL);
       }
       System.out.println(path);

   }catch(Exception e){
       e.printStackTrace();
   }
%>