分享一个在线Word编辑的jQuery插件

在做OA或者工作流程的网站中，常常能够看到一些在线Word编辑进行文档处理的功能，这里我开发了一个在线Word编辑插件并且以此为例。

 

1．NTKO Word在线编辑器介绍：

NTKO的官方网站：http://www.ntko.com/
NTKO OFFICE文档控件是拥有完全自主知识产权的ActiveX控件。使用NTKO Office文档控件，能够在浏览器中直接编辑Word,Excel等Office文档，或者WPS，金山电子表等文档并保存到web服务器。实现文档和电子表格的统一管理。NTKO OFFICE文档控件具有在线编辑，痕迹保留，手写签名，模板套红，安全电子印章[企业版提供]，全屏批注，保存为HTML,MHT,PDF文件等办公自动化系统必备的功能。可以运行在PHP，ASP，JSP，C#，VB.NET，DOMINO等各种web编程语言和服务器。

 

2．列出完整的jQuery插件的代码清单：

jquery.ntko.js

/*   @author: Leepy
 *  @date:  2010-12
 *  @descript:  ntko word编辑器JQ插件
  */  
(
     function ($) {
        $.ntko  =  $.ntko  ||  {};

        $.fn.extend(
        {
             // 文件类型
            fileType: {
                Word:  " Word.Document " ,
                Excel:  " Excel.Sheet " ,
                PowerPoint:  " PowerPoint.Show "
            },
             // 弹出窗类型
            showDialogType: {
                New:  0 ,
                Open:  1 ,
                Save:  2 ,
                SaveCopy:  3 ,
                Print:  4 ,
                PageSetup:  5 ,
                Properties:  6
            },
             // Word信息内容
            wordInfo: {
                Start:  0 ,
                End:  0 ,
                Text:  " NDOFramer "
            },
             // 表单设置
            formSettings: {
                UploadFileId:  " EDITFILE " ,
                Data:  " savetype=1&fileType= " ,
                FileName:  " demo.doc " ,
                FormId:  0
            },
            _doc:  null ,
            _selection:  null ,
            _range:  null ,
             // 初始化插件
            ntko:  function (parameters) {
                parameters  =  parameters  ||  {};
                 var  ndObj  =   null ;
                 this .each( function (i) {
                    ndObj  =  $.ntko.init( this , parameters);
                });
                 return  ndObj;
            },
             // 关闭插件
            close:  function () {
                 this [ 0 ].close();
            },
             // 打开文档
            open:  function (url) {
                 this [ 0 ].BeginOpenFromURL(url);    // 第二个参数为只读设置
            },
             // 新建Word文档
            newWord:  function () {
                 this [ 0 ].CreateNew( this .fileType.Word);
            },
             // 新建Excel文档
            newExcel:  function () {
                 this [ 0 ].CreateNew( this .fileType.Excel);
            },
             // 新建PowerPoint文档
            newPowerPoint:  function () {
                 this [ 0 ].CreateNew( this .fileType.PowerPoint);
            },
             // 打开本地文档
            openLocalFile:  function () {
                 this [ 0 ].showdialog( this .showDialogType.Open);
            },
             // 保存到本地
            saveLocalFile:  function () {
                 this [ 0 ].ActiveDocument.Application.Dialogs( 83 ).Show()
            },
             // 保存文档，返回是否保存成功
            save:  function (url, parameters) {

                 if  ( typeof  (parameters.formId)  !==   " undefined " )
                     this .formSettings.FormId  =  parameters.formId;
                 if  ( typeof  (parameters.data)  !==   " undefined " )
                     this .formSettings.Data  =  parameters.data;

                 var  retHTML  =   this [ 0 ].saveToURL(url,     // 提交到的url地址
                     this .formSettings.UploadFileId,      // 文件域的id，类似<input type=file id=upLoadFile 中的id
                     this .formSettings.Data,              // 与控件一起提交的参数,savetype参数为要保存的文件格式office,html,pdf。filetype参数保存文件类型
                     this .formSettings.FileName,          // 上传文件的名称，类似<input type=file 的value
                     this .formSettings.FormId             // 与控件一起提交的表单id，也可以是form的序列号，这里应该是0.
                );
                 return  retHTML;
            },
             // 下载远程文件
            downloadFile:  function (url, localPath) {
                 this [ 0 ].DownloadFile(url, localPath);
            },
             // 插入本地文档
            insertLocalFile:  function () {
                 this [ 0 ].ActiveDocument.Application.Dialogs( 164 ).Show();
            },
             // 插入文档
            insertFile:  function (url) {
                 this ._doc  =   this [ 0 ].ActiveDocument;
                 this ._doc.Activate();
                 //                 this._doc.Select();
                 //                 this._doc.Application.Selection.Select();

                 this [ 0 ].AddTemplateFromURL(url);
            },
             // 插入本地图片
            insertLocalImage:  function () {
                 this [ 0 ].ActiveDocument.Application.Dialogs( 163 ).Show();
            },
             // 插入图片
            insertImage:  function (url, type) {
                 this [ 0 ].InsertFile(url, type  +   8 );
            },
             // 插入文本
            insertText:  function (text) {
                 this ._doc  =   this [ 0 ].ActiveDocument;
                 this ._doc.Activate();
                 this ._doc.Application.Selection.InsertAfter(text);
            },
             // 页面设置
            setPageSetup:  function () {
                 this [ 0 ].showdialog( this .showDialogType.PageSetup);
            },
             // 文档属性设置
            setProperty:  function () {
                 this [ 0 ].showdialog( this .showDialogType.Properties);
            },
             // 打印
            print:  function () {
                 //                 this[0].PrintOut();
                 this [ 0 ].showdialog( this .showDialogType.Print);
            },
             // 打印预览
            printPreview:  function () {
                 this [ 0 ].PrintPreview();
            },
             // 关闭打印预览
            printExit:  function () {
                 this [ 0 ].PrintPreviewExit();
            },
             // 隐藏工具栏
            hideToolbar:  function () {
                 this [ 0 ].Activate( false );
                 this [ 0 ].Toolbars  =   false ;
            },
             // 显示工具栏
            showToolbar:  function () {
                 this [ 0 ].Activate( false );
                 this [ 0 ].Toolbars  =   true ;
            },
             // 隐藏菜单栏
            hideMenubar:  function () {
                 this [ 0 ].Activate( false );
                 this [ 0 ].Menubar  =   false ;
            },
             // 显示菜单栏
            showMenubar:  function () {
                 this [ 0 ].Activate( false );
                 this [ 0 ].Menubar  =   true ;
            },
             // 获取或设置窗口高度
            height:  function (arg) {
                 if  ( typeof  (arg)  !==   " undefined " ) {
                     this .css( " height " ,arg);
                }
                 else  {
                     return   this .css( " height " ); ;
                }
            },
             // 获取或设置窗口宽度
            width:  function (arg) {
                 if  ( typeof  (arg)  !==   " undefined " ) {
                     this .css( " width " , arg);
                }
                 else  {
                     return   this .css( " width " ); ;
                }
            },
             // 删除本地路径，如c:\\1.doc
            deleteLocalFile:  function (localPath) {
                 this [ 0 ].DeleteLocalFile(localPath);
            },
            showView:  function (showViewType) {
                 this [ 0 ].Activate( false );
                 this [ 0 ].ActiveDocument.ActiveWindow.View  =  showViewType;
            },
             // 添加本地附加文件
             //             addLocalFile: function(fileID,locaPath) {
             //                 this[0].HttpAddPostFile(fileID, locaPath);
             //             },
             //             hostName: function() {
             //                 return this[0].HostName;
             //             },
             //             documentFullName: function() {
             //                 return this[0].DocumentFullName;
             //             },
             //             caption: function() {
             //                 return this[0].Caption;
             //             },
             //             track: function() {
             //                 this[0].SetCurrUserName("liping");
             //                 this[0].SetTrackRevisions(1);
             //             },
             //             showTrack: function() {
             //                 this[0].ShowRevisions(1);
             //                 this[0].ShowView(0);
             //             },
             // 是否只读
            isReadOnly:  function () {
                 return   this [ 0 ].IsReadOnly;
            },
             // 文档是否已做修改
            isDirty:  function () {
                 return   ! this [ 0 ].ActiveDocument.Saved;
            },
             // 获取文档所有内容，返回该Word文档内容Json
            range:  function () {
                 this ._doc  =   this [ 0 ].ActiveDocument;
                 this ._doc.Activate();
                 this ._range  =   this ._doc.Range();

                 this .wordInfo.Start  =   this ._range.Start;
                 this .wordInfo.End  =   this ._range.End;
                 this .wordInfo.Text  =   this ._doc.Range( this ._range.Start,  this ._range.End).Text;

                 return   this .wordInfo;
            },
             // 选中文档所有内容，返回该Word文档内容Json
            select:  function () {
                 this ._doc  =   this [ 0 ].ActiveDocument;
                 this ._doc.Activate();
                 this ._doc.Select();
                 this ._selection  =   this ._doc.Application.Selection;

                 this .wordInfo.Start  =   this ._selection.Start;
                 this .wordInfo.End  =   this ._selection.End;
                 this .wordInfo.Text  =   this ._doc.Range( this ._selection.Start,  this ._selection.End).Text;

                 return   this .wordInfo;
            },
             // 取消选中内容
            unselect:  function () {
                 if  ( this ._selection  !=   null ) {
                     this ._selection.Start  =   0 ;
                     this ._selection.End  =   0 ;
                     this ._selection  =   null ;
                }
            },
            replace:  function (text, start, end) {

                 //                 alert(this._doc.Range(start,end).Text);
                 this ._doc.Range(start, end).Text  =  text;
                 //                 alert(this._doc.range(this.wordInfo.Starti,this.wordInfo.End).Text);
            },
             // 清除文本
            clear:  function () {
                 var  wordDoc  =   this [ 0 ].ActiveDocument;
                wordDoc.Activate();
                wordDoc.Select();
                 var  wordSelection  =  wordDoc.Application.Selection;
                wordDoc.Range(wordSelection.Start, wordSelection.End).Text  =   "" ;
            }
        });

        $.extend($.ntko,
            {
                settings:
                {
                    folder:  "" ,
                    width:  " 700px " ,
                    height:  " 500px " ,
                    id:  " OFRAMER_ "   +   new  Date().getTime(),
                    isToolbar:  true ,
                    isMenubar:  true ,
                    failed:  function () { }
                },
                init:  function (obj, parameters) {
                     // 赋值参数
                     if  ( typeof  (parameters.folder)  !==   " undefined " )
                         this .settings.folder  =  parameters.folder;
                     if  ( typeof  (parameters.width)  !==   " undefined " )
                         this .settings.width  =  parameters.width;
                     if  ( typeof  (parameters.height)  !==   " undefined " )
                         this .settings.height  =  parameters.height;
                     if  ( typeof  (parameters.id)  !==   " undefined " )
                         this .settings.id  =  parameters.id;
                     if  ( typeof  (parameters.isToolbar)  !==   " undefined " )
                         this .settings.isToolbar  =  parameters.isToolbar;
                     if  ( typeof  (parameters.isMenubar)  !==   " undefined " )
                         this .settings.isMenubar  =  parameters.isMenubar;
                     if  ( typeof  (parameters.failed)  !==   " undefined " )
                         this .settings.failed  =  parameters.failed  ||  {};

                     // 构造插件Html
                     this ._createHTML(obj);

                     var  acxId  =   this .settings.id;
                     var  acxJQjery  =   null ;
                     var  failed  =   this .settings.failed;


                     // 判断是否安装了word编辑器插件
                     try  {

                        document.getElementById(acxId).Close();
                        acxJQjery  =  $( " # "   +  acxId);
                    }
                     catch  (e) {
                        failed(e);
                    }

                     return  acxJQjery;
                },
                 // 构造插件Html
                _createHTML:  function (obj) {
                    $(obj).html(
                         this ._stringFormat( " <object classid=\ " clsid:A39F1330 - 3322 - 4a1d - 9BF0 - 0BA2BB90E970\ "  codebase=\ " { 0 } / officecontrol.cab#version=5,0,0,6\"" +
                         " id=\ " { 1 }\ "  width=\ " { 2 }\ "  height=\ " { 3 }\ " > "   +
                         " <param name=\ " wmode\ "  value=\ " transparent\ " > "   +
                         " <param name=\ " _ExtentX\ "  value=\ " 16960 \ " > "   +
                         " <param name=\ " _ExtentY\ "  value=\ " 13600 \ " > "   +
                         " <param name=\ " BorderColor\ "  value=\ " - 2147483632 \ " > "   +
                         " <param name=\ " BackColor\ "  value=\ " - 2147483643 \ " > "   +
                         " <param name=\ " ForeColor\ "  value=\ " - 2147483640 \ " > "   +
                         " <param name=\ " TitlebarColor\ "  value=\ " - 2147483635 \ " > "   +
                         " <param name=\ " TitlebarTextColor\ "  value=\ " - 2147483634 \ " > "   +
                         " <param name=\ " BorderStyle\ "  value=\ " 0 \ " > "   +
                         " <param name=\ " Titlebar\ "  value=\ " 0 \ " > "   +
                         " <param name=\ " Statusbar\ "  value=\ " 0 \ " > "   +
                         " <param name=\ " Toolbars\ "  value=\ " { 4 }\ " > "   +
                         " <param name=\ " Menubar\ "  value=\ " { 5 }\ " > "   +
                         " <param name=\ " _ExtentX\ "  VALUE=\ " 18071 \ " > "   +
                         " <param name=\ " _ExtentY\ "  VALUE=\ " 20981 \ " > "   +
                         " <param name=\ " IsShowToolMenu\ "  VALUE=\ " 1 \ " > "   +
                         " <param name=\ " IsNoCopy\ "  VALUE=\ " 0 \ " > "   +
                         " <param name=\ " IsHiddenOpenURL\ "  VALUE=\ " 0 \ " > "   +
                         " <param name=\ " MaxUploadSize\ "  VALUE=\ " 0 \ " > "   +
                         " <param name=\ " FileNew\ "  VALUE=\ " - 1 \ " > "   +
                         " <param name=\ " FileOpen\ "  VALUE=\ " - 1 \ " > "   +
                         " <param name=\ " FileClose\ "  VALUE=\ " - 1 \ " > "   +
                         " <param name=\ " FileSave\ "  VALUE=\ " - 1 \ " > "   +
                         " <param name=\ " FileSaveAs\ "  VALUE=\ " - 1 \ " > "   +
                         " <param name=\ " FilePrint\ "  VALUE=\ " - 1 \ " > "   +
                         " <param name=\ " FilePrintPreview\ "  VALUE=\ " - 1 \ " > "   +
                         " <param name=\ " FilePageSetup\ "  VALUE=\ " - 1 \ " > "   +
                         " <param name=\ " FileProperties\ "  VALUE=\ " - 1 \ " > "   +
                         " <param name=\ " IsStrictNoCopy\ "  VALUE=\ " 0 \ " > "   +
                         " <param name=\ " IsUseUTF8URL\ "  VALUE=\ " 0 \ " > "   +
                         " <param name=\ " MenubarColor\ "  VALUE=\ " - 2147483643 \ " > "   +
                         " <param name=\ " IsUseControlAgent\ "  VALUE=\ " 0 \ " > "   +
                         " <param name=\ " IsUseUTF8Data\ "  VALUE=\ " 0 \ " > "   +
                         " <param name=\ " IsSaveDocExtention\ "  VALUE=\ " 0 \ " > "   +
                         " <param name=\ " IsDirectConnect\ "  VALUE=\ " 0 \ " > "   +
                         " <param name=\ " SignCursorType\ "  VALUE=\ " 0 \ " > "   +
                         " <param name=\ " IsResetToolbarsOnOpen\ "  VALUE=\ " 0 \ " > "   +
                         " <param name=\ " IsSaveDataIfHasVDS\ "  VALUE=\ " 0 \ " > "   +
                         " </object> " ,
                         this .settings.folder,
                         this .settings.id,
                         this .settings.width,
                         this .settings.height,
                         this .settings.isToolbar  +   ""   ==   " true "   ?   " 1 "  :  " 0 " ,
                         this .settings.isMenubar  +   ""   ==   " true "   ?   " 1 "  :  " 0 "
                        ));
                },
                 // string格式化构造器
                _stringFormat:  function (str) {
                     var  args  =  arguments;
                     return  str.replace( / \{(\d+)\} / g,
                         function (m, i) {
                             return  args[parseInt(i)  +   1 ];
                        });
                }
            }
        );
    }
)(jQuery);

 

3．这里要注意几个问题，首先在保存文档到远程服务器的时候，可以使用aspx页面或者ashx页面去处理。

具体调用的代码：jqObj.save("process.aspx?action=test&data=demo", { formId: "formeditor" });
可以发现我这里有个formId的参数，这个是因为我必须把Word插件必须放在Form标签中，这样在POST数据，也就是文件流的时候有用。
而在process.aspx页面中，的具体代码实现为：

代码

     protected   void  Page_Load( object  sender, EventArgs e)
    {
        Response.ContentEncoding  =  Encoding.GetEncoding( " GB2312 " );
         string  action  =  Request.QueryString[ " action " ]  ??   "" ;
         switch  (action)
        {
             case   " test " :
                Test();      // 测试保存数据
                 break ;
        }
    }

     private   void  Test()
    {
         string  data  =  Request.QueryString[ " data " ]  ??   "" ;
        HttpFileCollection files  =  Request.Files;
         try
        {
             if  (files.Count  >   0 )
            {
                HttpPostedFile file  =  files[ 0 ];

                 string  fileName  =  Server.MapPath(String.Format( " ~/output/{0}_{1}.doc " , data, Guid.NewGuid()));

                file.SaveAs(fileName);

                Response.Write(String.Format( " 保存附件“{0}”成功！\r\n返回测试数据：{1} " , fileName, data));
            }
        }
         catch
        {
            Response.Write( " 有异常 " );
        }
    }

其中，一定要记得写Response.ContentEncoding = Encoding.GetEncoding("GB2312");这段代码，如果没有写，返回的中文会出现乱码的情况。我们通过HttpFileCollection files = Request.Files;方式可以取得一个POST文件流。

在第一次使用该插件的时候，首先必须进行安装，您可以通过下载一个Word编辑器插件安装包.rar包，来安装插件，包里面包含相关的批处理操作，大家自己可以试试。

下面演示下DEMO（保存操作大家可以下代码下来看看吧）

 

Word编辑器插件显示区域

初始化插件 新建文档 打开本地文档 打开指定文档 保存文档到本地 保存文档到Web 显示工具栏 隐藏工具栏 显示普通视图 显示页面视图 设置窗口高度 获取窗口高度 设置窗口宽度 获取窗口宽度 插入指定文本 插入本地图片 插入本地文档 清空文本

---

jqObj = $("#WordEditor").ntko(

{

folder:   "Scripts/",

id:         "WordEditorControl",//命名ActiveX对象ID

isToolbar:  false,//是否显示工具栏

isMenubar:  false,//是否显示菜单栏

width:      "710px",

height:     "600px"

});

（注：这里 WordEditor 为插件容器的ID）

jqObj.newWord();

jqObj.openLocalFile();

jqObj.open("template/demo.doc");

（注：url可以用 .aspx, .ashx 来替代，采用文件流读取的方式）

jqObj.saveLocalFile();

var result = jqObj.save("process.aspx?action=test&data=demo", { formId: "formeditor" });

（注：其中formId为form的ID）

jqObj.showToolbar();

jqObj.hideToolbar();

jqObj.showView(1);

jqObj.showView(3);

jqObj.height("800");

jqObj.height();

jqObj.width("1000");

jqObj.width();

jqObj.insertText("O(∩_∩)O哈哈哈~");

jqObj.insertLocalImage();

jqObj.insertLocalFile();

jqObj.clear();

源代码下载： OnlineWordEditorDemo.rar