原文地址为： 分享一个在线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对象IDisToolbar:  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

转载请注明本文地址： 分享一个在线Word编辑的jQuery插件

分享一个在线Word编辑的jQuery插件相关推荐

  1. GBin1分享的10个吸引眼球的jQuery插件

    日期:2011/10/11 原文:jquery4u.com 编译:GBin1.com GBin1今天特意选取了10个非常吸引眼球的jQuery小组件和插件与大家分享,其中包括图片廊,文本功能提升,及其 ...

  2. CAD好用的是哪个版本？分享一个在线转换版本的方法

    CAD好用的是哪个版本?CAD版本越高,功能越多,越难上手,2004版之前的版本缺点太多.2004版就成为比较经典的CAD版本,使用起来流畅.对电脑配置要求不高,同样配置的电脑,04版会比高版跑的快很 ...

  3. 分享一个在线占位图制作工具

    给大家分享一个在线占位置,生成图片的一个工具 先说一下为什么需要这个? 我们在制作一个网站,或者交付前端项目时,难免会使用到图片素材,有的喜欢使用在线地址来引用图片路径,还有的比较喜欢搜图片保存之后再 ...

  4. 分享一个在线画图工具

    分享一个在线作图工具: 网址:https://www.freedgo.com/draw-index.html#O77975061465661442 第一步:输入网址后: 点击蓝色按钮 第二步:登录 登 ...

  5. 分享一个在线vim网站

    一位网名叫KJ的程序员开发了一个在线的vim( http://t.cn/zWonb55 ),得到很多网友的跟帖支持. 网站host在heroku 后端用python写, 为了支持dropbox ,前端 ...

  6. 分享一个在线的HTML5元素在线测验 : HTML5 Element Quiz

    日期:2011/12/07  来源:GBin1.com 今天在公司的网站上发现的一个在线HTML5元素的在线测试,大家有兴趣可以挑战一下,有点小BT.Enjoy! 在线测验 转载于:https://w ...

  7. 分享一个在线生成微信跳转链接实现微信内跳转浏览器打开URL的工具

    前言 现如今微信对第三方推广链接的审核是越来越严格了,域名在微信中分享转发经常会被拦截,一旦被拦截用户就只能复制链接手动打开浏览器粘贴才能访问,要不然就是换个域名再推,周而复始.无论是哪一种情况都会面 ...

  8. 分享一个在线转码工具网站 文档音视频压缩等

    开发过程中涉及到音频转码 (非专业处理音频),有时需要试听一下录音是否正常,但是找不到工具,比如我需要试听一个speex文件内容是否正常,在网上找不到 直接播放speex 格式的压缩音频,我尝试 先将 ...

  9. 推荐一个在线听全网歌曲的插件

    是不是经常为了听歌曲而找遍全网?下面就给推荐一款浏览器插件,可以听全网歌曲,一个页面集成全网音乐(网易云音乐/QQ音乐/酷狗音乐/酷我音乐/哔哩哔哩/咪咕音乐/千千音乐),免去找的烦恼,同时还支持收藏 ...

  10. 分享一个在线考试系统，练手项目用他很香

    今日推荐 推荐一款开源 Java 版的视频管理系统 推荐3个快速开发平台 前后端都有 项目经验又有着落了 14个项目 项目介绍 学之思在线考试系统是一款 java + vue 的前后端分离的考试系统. ...

最新文章

  1. 连接php的作用是什么,什么是超链接，有什么作用
  2. 网站服务器高主频还是多核心,CPU核心多好还是主频高好?核心多和主频高区别介绍...
  3. document.getElementsByTagName()方法的返回值
  4. asp.net 2.0中新增的AppendDataBoundItems
  5. php节点对象,JavaScript_JavaScript中访问节点对象的方法有哪些如何使用，JavaScript中访问节点对象的方法 - phpStudy...
  6. javascript判断是否手机设备+滑动事件
  7. [总结]FFMPEG视音频编解码零基础学习方法--转
  8. java csv 单元格格式_java导出csv格式文件的方法
  9. [zt]C++ traits
  10. 金蝶K3系统BOM批量导入操作指南
  11. 奇安信渗透测试面试题库_奇安信2020渗透测试工程师笔试题
  12. python替换ppt文本_Python操作PPT实现自动查找替换
  13. 【ctfshow】- web189
  14. 360“隐私保护器”真相
  15. 英文经典老歌列表~~~~
  16. 看完就学会系列，小小一篇文章教会你利用Python网络爬虫抓取王者荣耀图片（建议收藏）
  17. 网络设置错误造成cluster不能启动（oifcfg setif cluster_interconnect ）
  18. 以“降”为进，阿里云“被集成”
  19. 光纤布拉格光栅(FBG)笔记【2】：反射率
  20. 笔记本液晶屏改装显示器

热门文章

  1. 那些陪伴了我大学青春的网易博客也要停运啦
  2. html爱情意思,1一9爱情数字什么意思 1到9数字爱情含义
  3. 玩转Reactjs第三篇-组件(模式stateprops)
  4. 错误 C1041 无法打开程序数据库“xxx\Debug\core142.pdb”
  5. andriod获取带字母的iccid
  6. java中lifo的数组_Java 实现下压(LIFO)栈
  7. python 爬虫 403 Forbidden
  8. linux中man命令的基本用法,linux中的man命令的详细解释
  9. GitHub创建仓库
  10. java中北大学ppt总结+课后习题第三章（小宇特详解）