Word編輯的jQuery插件

時(shí)間:2010-12-29 09:15點(diǎn)擊: 124 次 【大 中 小】

在做OA或者工作流程的網(wǎng)站中，常常能夠看到一些在線Word編輯進(jìn)行文檔處理的功能，這里我開(kāi)發(fā)了一個(gè)在線Word編輯插件并且以此為例。

1．NTKO Word在線編輯器介紹：

NTKO的官方網(wǎng)站：http://www.ntko.com/
NTKO OFFICE文檔控件是擁有完全自主知識(shí)產(chǎn)權(quán)的ActiveX控件。使用NTKO Office文檔控件，能夠在瀏覽器中直接編輯Word,Excel等Office文檔，或者WPS，金山電子表等文檔并保存到web服務(wù)器。實(shí)現(xiàn)文檔和電子表格的統(tǒng)一管理。NTKO OFFICE文檔控件具有在線編輯，痕跡保留，手寫(xiě)簽名，模板套紅，安全電子印章[企業(yè)版提供]，全屏批注，保存為HTML,MHT,PDF文件等辦公自動(dòng)化系統(tǒng)必備的功能?？梢赃\(yùn)行在PHP，ASP，JSP，C#，VB.NET，DOMINO等各種web編程語(yǔ)言和服務(wù)器。
 

2．列出完整的jQuery插件的代碼清單：

jquery.ntko.js

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

        $.fn.extend(
        {
            //文件類(lèi)型
            fileType: {
                Word: "Word.Document",
                Excel: "Excel.Sheet",
                PowerPoint: "PowerPoint.Show"
            },
            //彈出窗類(lèi)型
            showDialogType: {
                New: 0,
                Open: 1,
                Save: 2,
                SaveCopy: 3,
                Print: 4,
                PageSetup: 5,
                Properties: 6
            },
            //Word信息內(nèi)容
            wordInfo: {
                Start: 0,
                End: 0,
                Text: "NDOFramer"
            },
            //表單設(shè)置
            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;
            },
            //關(guān)閉插件
            close: function() {
                this[0].close();
            },
            //打開(kāi)文檔
            open: function(url) {
                this[0].BeginOpenFromURL(url);   //第二個(gè)參數(shù)為只讀設(shè)置
            },
            //新建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);
            },
            //打開(kāi)本地文檔
            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，類(lèi)似<input type=file id=upLoadFile 中的id
                    this.formSettings.Data,             //與控件一起提交的參數(shù),savetype參數(shù)為要保存的文件格式office,html,pdf。filetype參數(shù)保存文件類(lèi)型
                    this.formSettings.FileName,         //上傳文件的名稱(chēng)，類(lèi)似<input type=file 的value
                    this.formSettings.FormId            //與控件一起提交的表單id，也可以是form的序列號(hào)，這里應(yīng)該是0.
                );
                return retHTML;
            },
            //下載遠(yuǎn)程文件
            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);
            },
            //頁(yè)面設(shè)置
            setPageSetup: function() {
                this[0].showdialog(this.showDialogType.PageSetup);
            },
            //文檔屬性設(shè)置
            setProperty: function() {
                this[0].showdialog(this.showDialogType.Properties);
            },
            //打印
            print: function() {
                //                this[0].PrintOut();
                this[0].showdialog(this.showDialogType.Print);
            },
            //打印預(yù)覽
            printPreview: function() {
                this[0].PrintPreview();
            },
            //關(guān)閉打印預(yù)覽
            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;
            },
            //獲取或設(shè)置窗口高度
            height: function(arg) {
                if (typeof (arg) !== "undefined") {
                    this.css("height",arg);
                }
                else {
                    return this.css("height"); ;
                }
            },
            //獲取或設(shè)置窗口寬度
            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;
            },
            //獲取文檔所有內(nèi)容，返回該Word文檔內(nèi)容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;
            },
            //選中文檔所有內(nèi)容，返回該Word文檔內(nèi)容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;
            },
            //取消選中內(nèi)容
            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) {
                    //賦值參數(shù)
                    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 || {};

                    //構(gòu)造插件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;
                },
                //構(gòu)造插件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格式化構(gòu)造器
                _stringFormat: function(str) {
                    var args = arguments;
                    return str.replace(/\{(\d+)\}/g,
                        function(m, i) {
                            return args[parseInt(i) + 1];
                        });
                }
            }
        );
    }
)(jQuery);

 

3．這里要注意幾個(gè)問(wèn)題，首先在保存文檔到遠(yuǎn)程服務(wù)器的時(shí)候，可以使用aspx頁(yè)面或者ashx頁(yè)面去處理。

具體調(diào)用的代碼：jqObj.save("process.aspx?action=test&data=demo", { formId: "formeditor" });
可以發(fā)現(xiàn)我這里有個(gè)formId的參數(shù)，這個(gè)是因?yàn)槲冶仨毎裌ord插件必須放在Form標(biāo)簽中，這樣在POST數(shù)據(jù)，也就是文件流的時(shí)候有用。
而在process.aspx頁(yè)面中，的具體代碼實(shí)現(xiàn)為：其中，一定要記得寫(xiě)Response.ContentEncoding = Encoding.GetEncoding("GB2312");這段代碼，如果沒(méi)有寫(xiě)，返回的中文會(huì)出現(xiàn)亂碼的情況。我們通過(guò)HttpFileCollection files = Request.Files;方式可以取得一個(gè)POST文件流。

代碼

    protected void Page_Load(object sender, EventArgs e)
    {
        Response.ContentEncoding = Encoding.GetEncoding("GB2312");
        string action = Request.QueryString["action"] ?? "";
        switch (action)
        {
            case "test":
                Test();     //測(cè)試保存數(shù)據(jù)
                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返回測(cè)試數(shù)據(jù)：{1}", fileName, data));
            }
        }
        catch
        {
            Response.Write("有異常");
        }
    }

在第一次使用該插件的時(shí)候，首先必須進(jìn)行安裝，您可以通過(guò)下載一個(gè)Word編輯器插件安裝包.rar包，來(lái)安裝插件，包里面包含相關(guān)的批處理操作，大家自己可以試試。