在线Word编辑的jQuery插件时间:2010-12-29 09:15点击:122 次 【大 中 小】 在做OA或者工作流程的网站中，常常能够看到一些在线Word编辑进行文档处理的功能，这里我开发了

在线Word编辑的jQuery插件

时间:2010-12-29 09:15点击: 122 次 【大
中 小】

在做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.代码

/* @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页面中，的具体代码实现为：其中，一定要记得写Response.ContentEncoding = Encoding.GetEncoding("GB2312");这段代码，如果没有写，返回的中文会出现乱码的情况。我们通过HttpFileCollection files = Request.Files;方式可以取得一个POST文件流。




代码