Word图片上传控件开发文档-JSP

版权所有 2009-2014 荆门泽优软件有限公司

保留所有权利

官方网站：http://www.ncmem.com/

产品首页：http://www.ncmem.com/webplug/wordpaster/index.asp

在线演示：FCKEditor2x示例,CKEditor3x示例,CKEditor4x示例,KindEditor3x示例,KindEditor4x示例,UEditor1x示例,tinymce3x示例,tinymce4x示例,

产品介绍：http://www.cnblogs.com/xproer/archive/2011/04/08/2009500.html

升级日志：http://www.cnblogs.com/xproer/archive/2011/04/08/2009503.html

开发文档：控件卸载教程,开发文档(ASP),开发文档(PHP),开发文档(JSP),开发文档(.NET),

整合教程：动易SiteFactory 4.7,PHPCMS 2008 sp4,PHPCMS v9,Z-Blog,CKEditor3.x,UEditor1.x,CuteEditor6.7,HDwik5.0,KesionCMS V8,KesionCMS V9,WordPress 3.4.1,dedecms5.7,

资源下载：cab安装包(x86),cab安装包(x64),crx安装包,xpi安装包,exe安装包,开发文档,VC运行库,数字证书根证书,MathType6.5,

示例下载(ASP)：FCKEditor2.x,CKEditor3.x,CKEditor4.x,CuteEditor6.6,KindEditor3.x,KindEditor4.x,tinymce3.x,tinymce4.x,ueditor1.x,xheditor1.x,

示例下载(.NET)：FCKEditor2.x，FCKEditor2.x-ExtJs，CKEditor3.x，CKEditor3.x-ExtJs，CKEditor4.x，KindEditor3.x，KindEditor4.x,UEditor1.x,jmeditor,xheditor,tinymce3x,tinymce4x,CuteEditor6.7,

示例下载(JSP)：FCKEditor2.x,CKEditor3.x,CKEditor3.x-ExtJs,CKEditor4.x,KindEditor3.x,KindEditor4.x,tinymce3x,tinymce4x,UEditor1.x,xheditor1x,

示例下载(PHP)：FCKEditor2.x,CKEditor3.x,CKEditor4.x,KindEditor3.x,KindEditor4.x,tinymce3x,tinymce4x,UEditor1.x,xheditor1x,CuteEditor,HDwiki5.0,wordpress 3.7.1,

联系信箱：[email protected]

联系QQ：1085617561

更新记录：

更新时间	描述
2012-3-3	修复集成到现有系统章节中关于地址描述的错误。
2012-3-10	增加搭建测试环境章节
2012-04-29	更新修改clsid号章节。
2012-05-25	更新JSP上传示例代码。

 

1. 搭建测试环境

1.1. WordPaster-CKEditor2.x示例

JSP

1.导入jar包

2.修改index.html页面的PostUrl地址。

 

1.2. WordPaster-CKEditor3.x示例

JSP

1.导入jar包

2.将index.html页面的PostUrl改为测试服务器地址。

 

1.3. WordPaster-CKEditor4.x示例

jsp:

1.导入jar包

2.将index.html页面的PostUrl改为测试服务器地址。

 

1.4. WordPaster-KindEditor3.x示例

JSP:

1.导入jar包

2.将index.html页面中的PostUrl改为测试服务器地址

 

1.5. WordPaster-KindEditor4.x示例

JSP:

1.导入JAR包

2.将index.html中的PostUrl改为测试服务器地址。

 

2.      集成到现有系统中

2.1.   集成到系统中-FCKEditor2.x

说明：此教程适用于没有包含FCKEditor2.x编辑器的项目。

 

主要步骤：

1.上传WordPaster文件夹

2.修改classid号。

3.修改cab文件下载地址

4.修改页面上传地址

5.在页面中引用控件

 

2.1.1. 上传控件相关文件

一般情况下，如果是在第三方系统中集成此控件，我们建议将所有相关文件上传到网站的WordPaster文件夹中。这样可为后面的集成带来许多便利。

我们已提供了jsp,php,asp,asp.net四种Web开发语言的文件上传示例页面和代码。开发人员可根据项目类型上传相应的文件夹：asp,asp.net,jsp,php

asp.net //请根据项目类型上传相应的文件夹，如果是PHP项目则上传php文件夹

WordPaster

注意：

请不要解压WordPaster.cab，将完整的WordPaster.cab文件上传到服务器中，IE浏览器会自动安装CAB。CAB文件相当于是一个自动安装控件的脚本。

 

2.1.2. 修改clsid号

打开WordPaster.js。找到Config配置节

     //配置信息

     this.Config = {

         "EncodeType": "UTF-8"

         , "Licensed": "北京新颖网络"

         , "PasteWordType": "JPG"    //粘贴WORD的图片格式。JPG/PNG/GIF/BMP。推荐使用JPG格式，防止图片太大。

         , "PasteImageType": ""      //粘贴文件，剪帖板的图片格式，为空表示本地图片格式。JPG/PNG/GIF/BMP

         , "ThumbWidth": 0           //缩略图宽度。0表示不使用缩略图

         , "ThumbHeight": 0          //缩略图高度。0表示不使用缩略图

         , "ClsidImagePaster": "DC4A6931-3570-44b4-842D-C13EE637BBC1"//图片粘贴上传控件

         , "ClsidUploader": "26CFEDE7-789D-4077-B49D-C7F1D7150B93"//文件上传控件

         , "ClsidParser": "1832A49E-09D5-470E-AA4B-BE8F28034218"//文档解析控件

         , "CabPath": "http://www.ncmem.com/WordPaster/WordPaster.cab#version=1,4,24,54567"

         , "IcoPath": "http://localhost:10727/WordPaster/"//信息图片文件夹

         , "PostUrl": "http://www.ncmem.com/WordPaster/upload.aspx"//图片上传地址。注意：此处必须是完整地址，不能为相对地址

     };

     this.ActiveX = {

     "Uploader": "Xproer.ImageFileUploader"//这里的Xproer要改为单独生成的名称。

         , "ImagePaster": "Xproer.ImagePaster"//这里的Xproer要改为单独生成的名称。

     };

修改ClsidImagePaster属性值，ClsidUploader属性值，ClsidParser属性值。

注意：

为了避免与其它公司的控件产生冲突，每个企业的clsid都不相同，在购买产品后，我们为每个公司单独生成序列号。

如果公司名称是QQ，则ActiveX的Clsid如下：

QQ.ImageFileUploader

QQ.ImagePaster

 

2.1.3. 修改cab文件下载地址

打开WordPaster.js。找到Config配置节

     //配置信息

     this.Config = {

         "EncodeType": "UTF-8"

         , "Licensed": "北京新颖网络"

         , "PasteWordType": "JPG"    //粘贴WORD的图片格式。JPG/PNG/GIF/BMP。推荐使用JPG格式，防止图片太大。

         , "PasteImageType": ""      //粘贴文件，剪帖板的图片格式，为空表示本地图片格式。JPG/PNG/GIF/BMP

         , "ThumbWidth": 0           //缩略图宽度。0表示不使用缩略图

         , "ThumbHeight": 0          //缩略图高度。0表示不使用缩略图

         , "ClsidImagePaster": "DC4A6931-3570-44b4-842D-C13EE637BBC1"

         , "ClsidUploader": "26CFEDE7-789D-4077-B49D-C7F1D7150B93"

         , "ClsidParser": "1832A49E-09D5-470E-AA4B-BE8F28034218"

         , "CabPath": "http://www.ncmem.com/WordPaster/WordPaster.cab#version=1,4,24,54567"

         , "IcoPath": "http://localhost:10727/WordPaster/"//信息图片文件夹

         , "PostUrl": "http://www.ncmem.com/WordPaster/upload.aspx"//图片上传地址。注意：此处必须是完整地址，不能为相对地址

     };

修改CabPath的值。

注意：

当控件升级(版本号修改)或CAB文件位置改变，必须修改WordPaster.js中的代码。否则用户的IE浏览器将无法正常加载控件。

 

2.1.4. 修改页面上传地址

打开WordPaster.js。找到Config配置节

     //配置信息

     this.Config = {

         "EncodeType": "UTF-8"

         , "Licensed": "北京新颖网络"

         , "PasteWordType": "JPG"    //粘贴WORD的图片格式。JPG/PNG/GIF/BMP。推荐使用JPG格式，防止图片太大。

         , "PasteImageType": ""      //粘贴文件，剪帖板的图片格式，为空表示本地图片格式。JPG/PNG/GIF/BMP

         , "ThumbWidth": 0           //缩略图宽度。0表示不使用缩略图

         , "ThumbHeight": 0          //缩略图高度。0表示不使用缩略图

         , "ClsidImagePaster": "DC4A6931-3570-44b4-842D-C13EE637BBC1"

         , "ClsidUploader": "26CFEDE7-789D-4077-B49D-C7F1D7150B93"

         , "ClsidParser": "1832A49E-09D5-470E-AA4B-BE8F28034218"

         , "CabPath": "http://www.ncmem.com/WordPaster/WordPaster.cab#version=1,4,24,54567"

         , "IcoPath": "http://localhost:10727/WordPaster/"//信息图片文件夹

         , "PostUrl": "http://www.ncmem.com/WordPaster/upload.aspx"//图片上传地址。注意：此处必须是完整地址，不能为相对地址

         , "AppPath": ""

     };

修改PostUrl的值。

 

说明：

如果需要在多个编辑器中使用Word图片上传功能，可以通过修改WordPaster.js，然后在多个页面中引用。

引用代码如下：

     <script language="javascript" type="text/javascript">

         var pasterMgr = new PasterManager();

 

         var oFCKeditor = new FCKeditor('FCKeditor1');

         oFCKeditor.BasePath = "fckeditor/";

         oFCKeditor.ToolbarSet = "Basic";

         oFCKeditor.Height = 300;

         oFCKeditor.Value = '';

         oFCKeditor.Create();

 

         //初始化编辑器

         function FCKeditor_OnComplete(editorInstance)

         {

              pasterMgr.Init(editorInstance);

         }

     </script>

 

2.1.5. 在页面中引用控件

1.添加头文件

2.添加引用代码

 

在<head></head>标签中间添加下列代码

    <link type="text/css" rel="Stylesheet" href="/WordPaster/css/WordPaster.css"/>

    <link type="text/css" rel="stylesheet" href="/WordPaster/css/ui-lightness/jquery-ui-1.8.11.custom.css" />

    <script type="text/javascript" src="/WordPaster/js/jquery.min.js"></script>

    <script type="text/javascript" src="/WordPaster/js/jquery-ui-1.8.11.custom.min.js"></script>

    <script type="text/javascript" src="/WordPaster/js/WordPaster.js" charset="utf-8"></script>

 

在<body></body>标签中间的适当位置添加下列代码：

     <script language="javascript" type="text/javascript">

         var pasterMgr = new PasterManager();

         pasterMgr.Load();//加载控件

 

         var oFCKeditor = new FCKeditor('FCKeditor1');

         oFCKeditor.BasePath = "fckeditor/";

         oFCKeditor.ToolbarSet = "Basic";

         oFCKeditor.Height = 300;

         oFCKeditor.Value = '';

         oFCKeditor.Create();

 

         //初始化调协编辑器

         function FCKeditor_OnComplete(editorInstance)

         {

              pasterMgr.Init(editorInstance);

         }

     </script>

 

2.2.   集成到现有FCKEditor2.x编辑器中

说明：此教程适用于已经包含FCKEditor2.x编辑器的项目。

 

主要步骤：

1.上传文件

2.配置WordPaster插件(整合到FCKEditor编辑器中)

3.修改cab文件地址

4.修改页面上传地址及编码

 

1.上传文件

WordPaster文件夹可上传到服务器的根目录。

fckeditor\editor\plugins\imagepaster文件夹上传到服务器中FCK编辑器的对应目录。

fckeditor\editor\plugins\imagepaster

 

2.配置WordPaster插件(整合到FCKEditor2.x编辑器中)

2.1添加插件

打开fckeditor\fckconfig.js文件，

找到代码：

FCKConfig.AutoGrowMax = 400 ;

在找到的代码上面添加下列语句

FCKConfig.Plugins.Add('imagepaster', 'zh-cn');

完整代码类似于下面：

FCKConfig.Plugins.Add('imagepaster', 'zh-cn');

// FCKConfig.Plugins.Add( 'dragresizetable' );

FCKConfig.AutoGrowMax = 400 ;

 

2.2显示到编辑器工具栏

打开fckeditor/fckconfig.js，将Word图片上传插件添加到默认工具栏中

FCKConfig.ToolbarSets["Default"] = [

     ['Source','DocProps','-','Save','NewPage','Preview','-','Templates'],

     ['Cut','Copy','Paste','PasteText','imagepaster','-','Print','SpellCheck'],

     ['Undo','Redo','-','Find','Replace','-','SelectAll','RemoveFormat'],

     ['Form','Checkbox','Radio','TextField','Textarea','Select','Button','ImageButton','HiddenField'],

     '/',

     ['Bold','Italic','Underline','StrikeThrough','-','Subscript','Superscript'],

     ['OrderedList','UnorderedList','-','Outdent','Indent','Blockquote','CreateDiv'],

     ['JustifyLeft','JustifyCenter','JustifyRight','JustifyFull'],

     ['Link','Unlink','Anchor'],

     ['Image','Flash','Table','Rule','Smiley','SpecialChar','PageBreak'],

     '/',

     ['Style','FontFormat','FontName','FontSize'],

     ['TextColor','BGColor'],

     ['FitWindow', 'ShowBlocks', '-', 'About'],     // No comma for the last row.

];

 

添加到基本工具栏中

FCKConfig.ToolbarSets["Basic"] = [

     ['Bold','Italic','-','OrderedList','UnorderedList','-','Link','Unlink','-','About','imagepaster']

];

 

3修改cab文件地址

打开js\WordPaster.js

将codebase中的地址改为公司服务器的地址。例如：http://www.xxxx.com/WordPaster.cab

注意：

     每个公司的classid号码都不一样，不同的序列号是为了避免与其它公司的控件产生冲突破。在购买产品后我们会为每个公司单独生成序列号。

     //配置信息

     this.Config = {

         "EncodeType": "UTF-8"

         , "Licensed": "北京新颖网络"

         , "PasteWordType": "JPG"    //粘贴WORD的图片格式。JPG/PNG/GIF/BMP。推荐使用JPG格式，防止图片太大。

         , "PasteImageType": ""      //粘贴文件，剪帖板的图片格式，为空表示本地图片格式。JPG/PNG/GIF/BMP

         , "ThumbWidth": 0           //缩略图宽度。0表示不使用缩略图

         , "ThumbHeight": 0          //缩略图高度。0表示不使用缩略图

         , "ClsidImagePaster": "DC4A6931-3570-44b4-842D-C13EE637BBC1"

         , "ClsidUploader": "26CFEDE7-789D-4077-B49D-C7F1D7150B93"

         , "ClsidParser": "1832A49E-09D5-470E-AA4B-BE8F28034218"

         , "CabPath": "http://www.ncmem.com/WordPaster/WordPaster.cab#version=1,4,24,54567"

         , "IcoPath": "http://localhost:10727/WordPaster/"//信息图片文件夹

         , "PostUrl": "http://www.ncmem.com/WordPaster/upload.aspx"//图片上传地址。注意：此处必须是完整地址，不能为相对地址

     };

 

4.修改页面上传地址及编码

将PostUrl改为实际的上传地址。

ImagePaster.Config["PostUrl"] = "http://localhost:10727/asp.net/upload.aspx";

ImagePaster.Config["EncodeType"] = "GB2312";

 

说明：

如果需要在多个编辑器中使用Word图片上传功能，可以通过修改WordPaster.js，然后在多个页面中引用。

引用代码如下：

     <script language="javascript" type="text/javascript">

         var pasterMgr = new PasterManager();

         pasterMgr.Load();

 

         var oFCKeditor = new FCKeditor('FCKeditor1');

         oFCKeditor.BasePath = "fckeditor/";

         oFCKeditor.ToolbarSet = "Basic";

         oFCKeditor.Height = 300;

         oFCKeditor.Value = '';

         oFCKeditor.Create();

 

         //初始化编辑器

         function FCKeditor_OnComplete(editorInstance)

         {

              pasterMgr.Init(editorInstance);

         }

     </script>

 

3.      自动拼接路径

如果域名会经常变动不是固定域名，可以使用自动拼接路径函数InitPath()来简化控件布署。InitPath()函数的主要作用就是帮助开发人员拼接字符串。开发人员也可以根据自已的业务逻辑情况来修改此函数。

以下示例演示如何使用自动拼接路径

修改WordPaster.js中的路径

     this.Config = {

         "EncodeType": "UTF-8"

         ,"CompanyLicensed":"北京新颖网络"

         , "FileFilter": "*"//文件类型

         , "AppPath": ""//网站虚拟目录名称。子文件夹 web

         , "CabPath": "WordPaster/WordPaster.cab#version=2,4,11,45688"//CAB文件地址。使用自动拼接路径时只写CAB地址的相对路径。

         , "PostUrl": "upload.aspx"//文件上传路径，使用自动拼接路径时只写上传地址的相对路径

         , "ClsidDroper": "4D2454F8-EB25-465f-B867-C2A3E9F3D4B4"//拖拽控件

         , "ClsidUploader": "7AAE6FD3-C2F2-49d5-A790-1103848B3531"//文件上传控件

         , "ClsidPartition": "6F3EB4AF-FC9C-4570-A686-88B4B427C6FE"//文件选择控件

     };

在Load函数中调用InitPath

     //在外部调用。

     this.Load = function()

     {

        this.InitPath();//自动拼接路径

    }

 

在页面引用代码中设置AppPath值

<script type="text/javascript" language="javascript">

    var imgUploader = new ImageUploader();

    imgUploader.Config["AppPath"] = "/www/";//设置网站目录

     imgUploader.Load();

 

     window.onload = function()

     {

         imgUploader.Init();

     };

</script>

 

调用InitPath()后，PostUrl和CabPath将会被自动拼接成下列字符串

PostUrl = http://www.ncmem.com/upload.aspx

CabPath = http://www.ncmem.com/HttpUploader/HttpUploader.cab#version=2,4,11,45688