editor.js

来自「Hippo CMS是一个以信息为中心的开源内容管理系统。Hippo CMS目标是」· JavaScript 代码 · 共 391 行

JS
391
字号
/*
	Copyright (c) 2004-2006, The Dojo Foundation
	All Rights Reserved.

	Licensed under the Academic Free License version 2.1 or above OR the
	modified BSD license. For more information on Dojo licensing, see:

		http://dojotoolkit.org/community/licensing.shtml
*/



dojo.provide("dojo.widget.Editor");
dojo.deprecated("dojo.widget.Editor", "is replaced by dojo.widget.Editor2", "0.5");
dojo.require("dojo.io.*");
dojo.require("dojo.widget.*");
dojo.require("dojo.widget.Toolbar");
dojo.require("dojo.widget.RichText");
dojo.require("dojo.widget.ColorPalette");
dojo.require("dojo.string.extras");
dojo.widget.tags.addParseTreeHandler("dojo:Editor");
dojo.widget.Editor = function () {
	dojo.widget.HtmlWidget.call(this);
	this.contentFilters = [];
	this._toolbars = [];
};
dojo.inherits(dojo.widget.Editor, dojo.widget.HtmlWidget);
dojo.widget.Editor.itemGroups = {textGroup:["bold", "italic", "underline", "strikethrough"], blockGroup:["formatBlock", "fontName", "fontSize"], justifyGroup:["justifyleft", "justifycenter", "justifyright"], commandGroup:["save", "cancel"], colorGroup:["forecolor", "hilitecolor"], listGroup:["insertorderedlist", "insertunorderedlist"], indentGroup:["outdent", "indent"], linkGroup:["createlink", "insertimage", "inserthorizontalrule"]};
dojo.widget.Editor.formatBlockValues = {"Normal":"p", "Main heading":"h2", "Sub heading":"h3", "Sub sub heading":"h4", "Preformatted":"pre"};
dojo.widget.Editor.fontNameValues = {"Arial":"Arial, Helvetica, sans-serif", "Verdana":"Verdana, sans-serif", "Times New Roman":"Times New Roman, serif", "Courier":"Courier New, monospace"};
dojo.widget.Editor.fontSizeValues = {"1 (8 pt)":"1", "2 (10 pt)":"2", "3 (12 pt)":"3", "4 (14 pt)":"4", "5 (18 pt)":"5", "6 (24 pt)":"6", "7 (36 pt)":"7"};
dojo.widget.Editor.defaultItems = ["commandGroup", "|", "blockGroup", "|", "textGroup", "|", "colorGroup", "|", "justifyGroup", "|", "listGroup", "indentGroup", "|", "linkGroup"];
dojo.widget.Editor.supportedCommands = ["save", "cancel", "|", "-", "/", " "];
dojo.lang.extend(dojo.widget.Editor, {widgetType:"Editor", saveUrl:"", saveMethod:"post", saveArgName:"editorContent", closeOnSave:false, items:dojo.widget.Editor.defaultItems, formatBlockItems:dojo.lang.shallowCopy(dojo.widget.Editor.formatBlockValues), fontNameItems:dojo.lang.shallowCopy(dojo.widget.Editor.fontNameValues), fontSizeItems:dojo.lang.shallowCopy(dojo.widget.Editor.fontSizeValues), getItemProperties:function (name) {
	var props = {};
	switch (name.toLowerCase()) {
	  case "bold":
	  case "italic":
	  case "underline":
	  case "strikethrough":
		props.toggleItem = true;
		break;
	  case "justifygroup":
		props.defaultButton = "justifyleft";
		props.preventDeselect = true;
		props.buttonGroup = true;
		break;
	  case "listgroup":
		props.buttonGroup = true;
		break;
	  case "save":
	  case "cancel":
		props.label = dojo.string.capitalize(name);
		break;
	  case "forecolor":
	  case "hilitecolor":
		props.name = name;
		props.toggleItem = true;
		props.icon = this.getCommandImage(name);
		break;
	  case "formatblock":
		props.name = "formatBlock";
		props.values = this.formatBlockItems;
		break;
	  case "fontname":
		props.name = "fontName";
		props.values = this.fontNameItems;
	  case "fontsize":
		props.name = "fontSize";
		props.values = this.fontSizeItems;
	}
	return props;
}, validateItems:true, focusOnLoad:true, minHeight:"1em", _richText:null, _richTextType:"RichText", _toolbarContainer:null, _toolbarContainerType:"ToolbarContainer", _toolbars:[], _toolbarType:"Toolbar", _toolbarItemType:"ToolbarItem", buildRendering:function (args, frag) {
	var node = frag["dojo:" + this.widgetType.toLowerCase()]["nodeRef"];
	var trt = dojo.widget.createWidget(this._richTextType, {focusOnLoad:this.focusOnLoad, minHeight:this.minHeight}, node);
	var _this = this;
	setTimeout(function () {
		_this.setRichText(trt);
		_this.initToolbar();
		_this.fillInTemplate(args, frag);
	}, 0);
}, setRichText:function (richText) {
	if (this._richText && this._richText == richText) {
		dojo.debug("Already set the richText to this richText!");
		return;
	}
	if (this._richText && !this._richText.isClosed) {
		dojo.debug("You are switching richTexts yet you haven't closed the current one. Losing reference!");
	}
	this._richText = richText;
	dojo.event.connect(this._richText, "close", this, "onClose");
	dojo.event.connect(this._richText, "onLoad", this, "onLoad");
	dojo.event.connect(this._richText, "onDisplayChanged", this, "updateToolbar");
	if (this._toolbarContainer) {
		this._toolbarContainer.enable();
		this.updateToolbar(true);
	}
}, initToolbar:function () {
	if (this._toolbarContainer) {
		return;
	}
	this._toolbarContainer = dojo.widget.createWidget(this._toolbarContainerType);
	var tb = this.addToolbar();
	var last = true;
	for (var i = 0; i < this.items.length; i++) {
		if (this.items[i] == "\n") {
			tb = this.addToolbar();
		} else {
			if ((this.items[i] == "|") && (!last)) {
				last = true;
			} else {
				last = this.addItem(this.items[i], tb);
			}
		}
	}
	this.insertToolbar(this._toolbarContainer.domNode, this._richText.domNode);
}, insertToolbar:function (tbNode, richTextNode) {
	dojo.html.insertBefore(tbNode, richTextNode);
}, addToolbar:function (toolbar) {
	this.initToolbar();
	if (!(toolbar instanceof dojo.widget.Toolbar)) {
		toolbar = dojo.widget.createWidget(this._toolbarType);
	}
	this._toolbarContainer.addChild(toolbar);
	this._toolbars.push(toolbar);
	return toolbar;
}, addItem:function (item, tb, dontValidate) {
	if (!tb) {
		tb = this._toolbars[0];
	}
	var cmd = ((item) && (!dojo.lang.isUndefined(item["getValue"]))) ? cmd = item["getValue"]() : item;
	var groups = dojo.widget.Editor.itemGroups;
	if (item instanceof dojo.widget.ToolbarItem) {
		tb.addChild(item);
	} else {
		if (groups[cmd]) {
			var group = groups[cmd];
			var worked = true;
			if (cmd == "justifyGroup" || cmd == "listGroup") {
				var btnGroup = [cmd];
				for (var i = 0; i < group.length; i++) {
					if (dontValidate || this.isSupportedCommand(group[i])) {
						btnGroup.push(this.getCommandImage(group[i]));
					} else {
						worked = false;
					}
				}
				if (btnGroup.length) {
					var btn = tb.addChild(btnGroup, null, this.getItemProperties(cmd));
					dojo.event.connect(btn, "onClick", this, "_action");
					dojo.event.connect(btn, "onChangeSelect", this, "_action");
				}
				return worked;
			} else {
				for (var i = 0; i < group.length; i++) {
					if (!this.addItem(group[i], tb)) {
						worked = false;
					}
				}
				return worked;
			}
		} else {
			if ((!dontValidate) && (!this.isSupportedCommand(cmd))) {
				return false;
			}
			if (dontValidate || this.isSupportedCommand(cmd)) {
				cmd = cmd.toLowerCase();
				if (cmd == "formatblock") {
					var select = dojo.widget.createWidget("ToolbarSelect", {name:"formatBlock", values:this.formatBlockItems});
					tb.addChild(select);
					var _this = this;
					dojo.event.connect(select, "onSetValue", function (item, value) {
						_this.onAction("formatBlock", value);
					});
				} else {
					if (cmd == "fontname") {
						var select = dojo.widget.createWidget("ToolbarSelect", {name:"fontName", values:this.fontNameItems});
						tb.addChild(select);
						dojo.event.connect(select, "onSetValue", dojo.lang.hitch(this, function (item, value) {
							this.onAction("fontName", value);
						}));
					} else {
						if (cmd == "fontsize") {
							var select = dojo.widget.createWidget("ToolbarSelect", {name:"fontSize", values:this.fontSizeItems});
							tb.addChild(select);
							dojo.event.connect(select, "onSetValue", dojo.lang.hitch(this, function (item, value) {
								this.onAction("fontSize", value);
							}));
						} else {
							if (dojo.lang.inArray(cmd, ["forecolor", "hilitecolor"])) {
								var btn = tb.addChild(dojo.widget.createWidget("ToolbarColorDialog", this.getItemProperties(cmd)));
								dojo.event.connect(btn, "onSetValue", this, "_setValue");
							} else {
								var btn = tb.addChild(this.getCommandImage(cmd), null, this.getItemProperties(cmd));
								if (cmd == "save") {
									dojo.event.connect(btn, "onClick", this, "_save");
								} else {
									if (cmd == "cancel") {
										dojo.event.connect(btn, "onClick", this, "_close");
									} else {
										dojo.event.connect(btn, "onClick", this, "_action");
										dojo.event.connect(btn, "onChangeSelect", this, "_action");
									}
								}
							}
						}
					}
				}
			}
		}
	}
	return true;
}, enableToolbar:function () {
	if (this._toolbarContainer) {
		this._toolbarContainer.domNode.style.display = "";
		this._toolbarContainer.enable();
	}
}, disableToolbar:function (hide) {
	if (hide) {
		if (this._toolbarContainer) {
			this._toolbarContainer.domNode.style.display = "none";
		}
	} else {
		if (this._toolbarContainer) {
			this._toolbarContainer.disable();
		}
	}
}, _updateToolbarLastRan:null, _updateToolbarTimer:null, _updateToolbarFrequency:500, updateToolbar:function (force) {
	if (!this._toolbarContainer) {
		return;
	}
	var diff = new Date() - this._updateToolbarLastRan;
	if (!force && this._updateToolbarLastRan && (diff < this._updateToolbarFrequency)) {
		clearTimeout(this._updateToolbarTimer);
		var _this = this;
		this._updateToolbarTimer = setTimeout(function () {
			_this.updateToolbar();
		}, this._updateToolbarFrequency / 2);
		return;
	} else {
		this._updateToolbarLastRan = new Date();
	}
	var items = this._toolbarContainer.getItems();
	for (var i = 0; i < items.length; i++) {
		var item = items[i];
		if (item instanceof dojo.widget.ToolbarSeparator) {
			continue;
		}
		var cmd = item._name;
		if (cmd == "save" || cmd == "cancel") {
			continue;
		} else {
			if (cmd == "justifyGroup") {
				try {
					if (!this._richText.queryCommandEnabled("justifyleft")) {
						item.disable(false, true);
					} else {
						item.enable(false, true);
						var jitems = item.getItems();
						for (var j = 0; j < jitems.length; j++) {
							var name = jitems[j]._name;
							var value = this._richText.queryCommandValue(name);
							if (typeof value == "boolean" && value) {
								value = name;
								break;
							} else {
								if (typeof value == "string") {
									value = "justify" + value;
								} else {
									value = null;
								}
							}
						}
						if (!value) {
							value = "justifyleft";
						}
						item.setValue(value, false, true);
					}
				}
				catch (err) {
				}
			} else {
				if (cmd == "listGroup") {
					var litems = item.getItems();
					for (var j = 0; j < litems.length; j++) {
						this.updateItem(litems[j]);
					}
				} else {
					this.updateItem(item);
				}
			}
		}
	}
}, updateItem:function (item) {
	try {
		var cmd = item._name;
		var enabled = this._richText.queryCommandEnabled(cmd);
		item.setEnabled(enabled, false, true);
		var active = this._richText.queryCommandState(cmd);
		if (active && cmd == "underline") {
			active = !this._richText.queryCommandEnabled("unlink");
		}
		item.setSelected(active, false, true);
		return true;
	}
	catch (err) {
		return false;
	}
}, supportedCommands:dojo.widget.Editor.supportedCommands.concat(), isSupportedCommand:function (cmd) {
	var yes = dojo.lang.inArray(cmd, this.supportedCommands);
	if (!yes) {
		try {
			var richText = this._richText || dojo.widget.HtmlRichText.prototype;
			yes = richText.queryCommandAvailable(cmd);
		}
		catch (E) {
		}
	}
	return yes;
}, getCommandImage:function (cmd) {
	if (cmd == "|") {
		return cmd;
	} else {
		return dojo.uri.moduleUri("dojo.widget", "templates/buttons/" + cmd + ".gif");
	}
}, _action:function (e) {
	this._fire("onAction", e.getValue());
}, _setValue:function (a, b) {
	this._fire("onAction", a.getValue(), b);
}, _save:function (e) {
	if (!this._richText.isClosed) {
		if (this.saveUrl.length) {
			var content = {};
			content[this.saveArgName] = this.getHtml();
			dojo.io.bind({method:this.saveMethod, url:this.saveUrl, content:content});
		} else {
			dojo.debug("please set a saveUrl for the editor");
		}
		if (this.closeOnSave) {
			this._richText.close(e.getName().toLowerCase() == "save");
		}
	}
}, _close:function (e) {
	if (!this._richText.isClosed) {
		this._richText.close(e.getName().toLowerCase() == "save");
	}
}, onAction:function (cmd, value) {
	switch (cmd) {
	  case "createlink":
		if (!(value = prompt("Please enter the URL of the link:", "http://"))) {
			return;
		}
		break;
	  case "insertimage":
		if (!(value = prompt("Please enter the URL of the image:", "http://"))) {
			return;
		}
		break;
	}
	this._richText.execCommand(cmd, value);
}, fillInTemplate:function (args, frag) {
}, _fire:function (eventName) {
	if (dojo.lang.isFunction(this[eventName])) {
		var args = [];
		if (arguments.length == 1) {
			args.push(this);
		} else {
			for (var i = 1; i < arguments.length; i++) {
				args.push(arguments[i]);
			}
		}
		this[eventName].apply(this, args);
	}
}, getHtml:function () {
	this._richText.contentFilters = this._richText.contentFilters.concat(this.contentFilters);
	return this._richText.getEditorContent();
}, getEditorContent:function () {
	return this.getHtml();
}, onClose:function (save, hide) {
	this.disableToolbar(hide);
	if (save) {
		this._fire("onSave");
	} else {
		this._fire("onCancel");
	}
}, onLoad:function () {
}, onSave:function () {
}, onCancel:function () {
}});

⌨️ 快捷键说明

复制代码Ctrl + C
搜索代码Ctrl + F
全屏模式F11
增大字号Ctrl + =
减小字号Ctrl + -
显示快捷键?