分享一个在线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，类似
                     this .formSettings.Data,              // 与控件一起提交的参数,savetype参数为要保存的文件格式office,html,pdf。filetype参数保存文件类型
                     this .formSettings.FileName,          // 上传文件的名称，类似
                     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( " " clsid:A39F1330 - 3322 - 4a1d - 9BF0 - 0BA2BB90E970\ "  codebase=\ " { 0 } / officecontrol.cab#version=5,0,0,6\"" +
                         " id=\ " { 1 }\ "  width=\ " { 2 }\ "  height=\ " { 3 }\ " > "   +
                         " " wmode\ "  value=\ " transparent\ " > "   +
                         " " _ExtentX\ "  value=\ " 16960 \ " > "   +
                         " " _ExtentY\ "  value=\ " 13600 \ " > "   +
                         " " BorderColor\ "  value=\ " - 2147483632 \ " > "   +
                         " " BackColor\ "  value=\ " - 2147483643 \ " > "   +
                         " " ForeColor\ "  value=\ " - 2147483640 \ " > "   +
                         " " TitlebarColor\ "  value=\ " - 2147483635 \ " > "   +
                         " " TitlebarTextColor\ "  value=\ " - 2147483634 \ " > "   +
                         " " BorderStyle\ "  value=\ " 0 \ " > "   +
                         " " Titlebar\ "  value=\ " 0 \ " > "   +
                         " " Statusbar\ "  value=\ " 0 \ " > "   +
                         " " Toolbars\ "  value=\ " { 4 }\ " > "   +
                         " " Menubar\ "  value=\ " { 5 }\ " > "   +
                         " " _ExtentX\ "  VALUE=\ " 18071 \ " > "   +
                         " " _ExtentY\ "  VALUE=\ " 20981 \ " > "   +
                         " " IsShowToolMenu\ "  VALUE=\ " 1 \ " > "   +
                         " " IsNoCopy\ "  VALUE=\ " 0 \ " > "   +
                         " " IsHiddenOpenURL\ "  VALUE=\ " 0 \ " > "   +
                         " " MaxUploadSize\ "  VALUE=\ " 0 \ " > "   +
                         " " FileNew\ "  VALUE=\ " - 1 \ " > "   +
                         " " FileOpen\ "  VALUE=\ " - 1 \ " > "   +
                         " " FileClose\ "  VALUE=\ " - 1 \ " > "   +
                         " " FileSave\ "  VALUE=\ " - 1 \ " > "   +
                         " " FileSaveAs\ "  VALUE=\ " - 1 \ " > "   +
                         " " FilePrint\ "  VALUE=\ " - 1 \ " > "   +
                         " " FilePrintPreview\ "  VALUE=\ " - 1 \ " > "   +
                         " " FilePageSetup\ "  VALUE=\ " - 1 \ " > "   +
                         " " FileProperties\ "  VALUE=\ " - 1 \ " > "   +
                         " " IsStrictNoCopy\ "  VALUE=\ " 0 \ " > "   +
                         " " IsUseUTF8URL\ "  VALUE=\ " 0 \ " > "   +
                         " " MenubarColor\ "  VALUE=\ " - 2147483643 \ " > "   +
                         " " IsUseControlAgent\ "  VALUE=\ " 0 \ " > "   +
                         " " IsUseUTF8Data\ "  VALUE=\ " 0 \ " > "   +
                         " " IsSaveDocExtention\ "  VALUE=\ " 0 \ " > "   +
                         " " IsDirectConnect\ "  VALUE=\ " 0 \ " > "   +
                         " " SignCursorType\ "  VALUE=\ " 0 \ " > "   +
                         " " IsResetToolbarsOnOpen\ "  VALUE=\ " 0 \ " > "   +
                         " " IsSaveDataIfHasVDS\ "  VALUE=\ " 0 \ " > "   +
                         " " ,
                         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