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

时间:2022-11-28 11:13:35

在做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插件的代码清单:

分享一个在线Word编辑的jQuery插件分享一个在线Word编辑的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页面中,的具体代码实现为:

分享一个在线Word编辑的jQuery插件分享一个在线Word编辑的jQuery插件代码
     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编辑器插件显示区域

源代码下载: OnlineWordEditorDemo.rar