分享一个在线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插件的代码清单：

/*  @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"); ;

                }

            },

            //获取或设置窗口宽度

             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: "",

                     "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,//是否显示菜单栏
      "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