overview-summary-tinymce_control.class.js.html

tinyMCE在线编辑器使用手册

	getBody : <span class="reserved">function</span>() {
		<span class="reserved">return</span> <span class="reserved">this</span>.getDoc().body;
	},

	<span class="comment">/**
	 * Returns the DOM document of a editor instance.
	 *
	 * <span class="attrib">@return</span> DOM document of a editor instance.
	 * <span class="attrib">@type</span> DOMDocument
	 */</span>
	getDoc : <span class="reserved">function</span>() {
		<span class="reserved">return</span> <span class="reserved">this</span>.contentWindow.document;
	},

	<span class="comment">/**
	 * Returns the window of a editor instance.
	 *
	 * <span class="attrib">@return</span> Window of a editor instance.
	 * <span class="attrib">@type</span> Window
	 */</span>
	getWin : <span class="reserved">function</span>() {
		<span class="reserved">return</span> <span class="reserved">this</span>.contentWindow;
	},

	<span class="comment">/**
	 * Adds a keyboard shortcut to a specific command. These shortcuts can for example be added
	 * at the initInstance callback of a plugin. The shortcut description can be a language variable name
	 * or a string describing the function. If you don't specify a command, the shortcut will simply be a blocker
	 * shortcut. This enables you to remove built in shortcuts or remove theme specific shortcuts from a plugin.&lt;br /&gt;
	 * Example shortcut inst.addShortcut('ctrl,alt', 'k', 'mceSomeCommand', false, 'somevalue');
	 * Example blocker inst.addShortcut('ctrl,alt', 'k');
	 *
	 * <span class="attrib">@param</span> {string} m List of shortcut modifiers keys, for example "ctrl,alt".
	 * <span class="attrib">@param</span> {Object} k Shortcut key char for example "s" or a keycode value "13".
	 * <span class="attrib">@param</span> {string} d Optional Shortcut description, this will be presented in the about dialog.
	 * <span class="attrib">@param</span> {string} cmd Optional Command name to execute, for example mceLink or Bold.
	 * <span class="attrib">@param</span> {boolean} ui Optional True/false state if a UI (dialog) should be presented or not.
	 * <span class="attrib">@param</span> {Object} va Optional command value, this can be anything.
	 * <span class="attrib">@return</span> true/false if the shortcut was added or not
	 * <span class="attrib">@type</span> boolean
	 */</span>
	addShortcut : <span class="reserved">function</span>(m, k, d, cmd, ui, va) {
		var n = typeof(k) == <span class="literal">"number"</span>, ie = tinyMCE.isMSIE, c, sc, i;
		var scl = <span class="reserved">this</span>.shortcuts;

		<span class="reserved">if</span> (!tinyMCE.getParam(<span class="literal">'custom_shortcuts'</span>))
			<span class="reserved">return</span> false;

		m = m.toLowerCase();
		k = ie &amp;&amp; !n ? k.toUpperCase() : k;
		c = n ? null : k.charCodeAt(0);
		d = d &amp;&amp; d.indexOf(<span class="literal">'lang_'</span>) == 0 ? tinyMCE.getLang(d) : d;

		sc = {
			alt : m.indexOf(<span class="literal">'alt'</span>) != -1,
			ctrl : m.indexOf(<span class="literal">'ctrl'</span>) != -1,
			shift : m.indexOf(<span class="literal">'shift'</span>) != -1,
			charCode : c,
			keyCode : n ? k : (ie ? c : null),
			desc : d,
			cmd : cmd,
			ui : ui,
			val : va
		};

		<span class="reserved">for</span> (i=0; i&lt;scl.length; i++) {
			<span class="reserved">if</span> (sc.alt == scl[i].alt &amp;&amp; sc.ctrl == scl[i].ctrl &amp;&amp; sc.shift == scl[i].shift
				&amp;&amp; sc.charCode == scl[i].charCode &amp;&amp; sc.keyCode == scl[i].keyCode) {
				<span class="reserved">return</span> false;
			}
		}

		scl[scl.length] = sc;

		<span class="reserved">return</span> true;
	},

	<span class="comment">/**
	 * Executes shortcuts based on the event information.
	 *
	 * <span class="attrib">@param</span> {DOMEvent} e Keyboard event to handle.
	 * <span class="attrib">@return</span> true/false if the shortcut was found and executed or not.
	 * <span class="attrib">@type</span> boolean
	 */</span>
	handleShortcut : <span class="reserved">function</span>(e) {
		var i, s = <span class="reserved">this</span>.shortcuts, o;

		<span class="reserved">for</span> (i=0; i&lt;s.length; i++) {
			o = s[i];
			<span class="reserved">if</span> (o.alt == e.altKey &amp;&amp; o.ctrl == e.ctrlKey &amp;&amp; (o.keyCode == e.keyCode || o.charCode == e.charCode)) {
				<span class="reserved">if</span> (o.cmd &amp;&amp; (e.type == <span class="literal">"keydown"</span> || (e.type == <span class="literal">"keypress"</span> &amp;&amp; !tinyMCE.isOpera)))
					tinyMCE.execCommand(o.cmd, o.ui, o.val);

				tinyMCE.cancelEvent(e);
				<span class="reserved">return</span> true;
			}
		}

		<span class="reserved">return</span> false;
	},

	<span class="comment">/**
	 * Auto resets the design mode of the document if it gets lost.
	 * This is a Gecko specific function since it's a workaround for a bug where Gecko browsers
	 * loose the designMode state if the editor is hidden and shown in a tab or div.
	 */</span>
	autoResetDesignMode : <span class="reserved">function</span>() {
		<span class="comment">// Add fix for tab/style.display none/block problems in Gecko</span>
		<span class="reserved">if</span> (!tinyMCE.isMSIE &amp;&amp; tinyMCE.settings[<span class="literal">'auto_reset_designmode'</span>] &amp;&amp; <span class="reserved">this</span>.isHidden())
			eval(<span class="literal">'try { this.getDoc().designMode = "On"; } catch(e) {}'</span>);
	},

	<span class="comment">/**
	 * Returns if the instance is hidden or not. This is a Gecko specific function
	 * other browsers will always return false. This function is used to workaround the lost
	 * designMode bug in Gecko browsers.
	 *
	 * <span class="attrib">@return</span> Returns if the instance is hidden or not.
	 * <span class="attrib">@type</span> boolean
	 */</span>
	isHidden : <span class="reserved">function</span>() {
		<span class="reserved">if</span> (tinyMCE.isMSIE)
			<span class="reserved">return</span> false;

		var s = <span class="reserved">this</span>.getSel();

		<span class="comment">// Weird, wheres that cursor selection?</span>
		<span class="reserved">return</span> (!s || !s.rangeCount || s.rangeCount == 0);
	},

	<span class="comment">/**
	 * Returns true/false if the editor instance is dirty or not. In other words if it has been modified
	 * or not.
	 *
	 * <span class="attrib">@return</span> Editor instance dirty state.
	 * <span class="attrib">@type</span> boolean
	 */</span>
	isDirty : <span class="reserved">function</span>() {
		<span class="comment">// Is content modified and not in a submit procedure</span>
		<span class="reserved">return</span> <span class="reserved">this</span>.startContent != tinyMCE.trim(<span class="reserved">this</span>.getBody().innerHTML) &amp;&amp; !tinyMCE.isNotDirty;
	},

	<span class="comment">/**
	 * ..
	 *
	 * <span class="attrib">@private</span>
	 */</span>
	_mergeElements : <span class="reserved">function</span>(scmd, pa, ch, override) {
		<span class="reserved">if</span> (scmd == <span class="literal">"removeformat"</span>) {
			pa.className = <span class="literal">""</span>;
			pa.style.cssText = <span class="literal">""</span>;
			ch.className = <span class="literal">""</span>;
			ch.style.cssText = <span class="literal">""</span>;
			<span class="reserved">return</span>;
		}

		var st = tinyMCE.parseStyle(tinyMCE.getAttrib(pa, <span class="literal">"style"</span>));
		var stc = tinyMCE.parseStyle(tinyMCE.getAttrib(ch, <span class="literal">"style"</span>));
		var className = tinyMCE.getAttrib(pa, <span class="literal">"class"</span>);

		className += <span class="literal">" "</span> + tinyMCE.getAttrib(ch, <span class="literal">"class"</span>);

		<span class="reserved">if</span> (override) {
			<span class="reserved">for</span> (var n in st) {
				<span class="reserved">if</span> (typeof(st[n]) == <span class="literal">'function'</span>)
					continue;

				stc[n] = st[n];
			}
		} <span class="reserved">else</span> {
			<span class="reserved">for</span> (var n in stc) {
				<span class="reserved">if</span> (typeof(stc[n]) == <span class="literal">'function'</span>)
					continue;

				st[n] = stc[n];
			}
		}

		tinyMCE.setAttrib(pa, <span class="literal">"style"</span>, tinyMCE.serializeStyle(st));
		tinyMCE.setAttrib(pa, <span class="literal">"class"</span>, tinyMCE.trim(className));
		ch.className = <span class="literal">""</span>;
		ch.style.cssText = <span class="literal">""</span>;
		ch.removeAttribute(<span class="literal">"class"</span>);
		ch.removeAttribute(<span class="literal">"style"</span>);
	},

	<span class="comment">/**
	 * Sets the useCSS mode in Gecko browsers. This will also remove the build in
	 * inline table editing controls since they are buggy when it comes to col/rowspans.
	 *
	 * <span class="attrib">@param</span> {boolean} b UseCSS state true/false.
	 * <span class="attrib">@private</span>
	 */</span>
	_setUseCSS : <span class="reserved">function</span>(b) {
		var d = <span class="reserved">this</span>.getDoc();

		try {d.execCommand(<span class="literal">"useCSS"</span>, false, !b);} catch (ex) {}
		try {d.execCommand(<span class="literal">"styleWithCSS"</span>, false, b);} catch (ex) {}

		<span class="reserved">if</span> (!tinyMCE.getParam(<span class="literal">"table_inline_editing"</span>))
			try {d.execCommand(<span class="literal">'enableInlineTableEditing'</span>, false, <span class="literal">"false"</span>);} catch (ex) {}

		<span class="reserved">if</span> (!tinyMCE.getParam(<span class="literal">"object_resizing"</span>))
			try {d.execCommand(<span class="literal">'enableObjectResizing'</span>, false, <span class="literal">"false"</span>);} catch (ex) {}
	},

	<span class="comment">/**
	 * Executes a command on the current instance. These commands can be TinyMCE internal commands prefixed with "mce" or
	 * they can be build in browser commands such as "Bold". A compleate list of browser commands is available on MSDN or Mozilla.org.
	 * This function will dispatch the execCommand function on each plugin, theme or the execcommand_callback option if none of these
	 * return true it will handle the command as a internal browser command.
	 *
	 * <span class="attrib">@param</span> {string} command Command name to execute, for example mceLink or Bold.
	 * <span class="attrib">@param</span> {boolean} user_interface True/false state if a UI (dialog) should be presented or not.
	 * <span class="attrib">@param</span> {mixed} value Optional command value, this can be anything.
	 */</span>
	execCommand : <span class="reserved">function</span>(command, user_interface, value) {
		var doc = <span class="reserved">this</span>.getDoc();
		var win = <span class="reserved">this</span>.getWin();
		var focusElm = <span class="reserved">this</span>.getFocusElement();

		<span class="comment">// Is non udno specific command</span>
		<span class="reserved">if</span> (!new RegExp(<span class="literal">'mceStartTyping|mceEndTyping|mceBeginUndoLevel|mceEndUndoLevel|mceAddUndoLevel'</span>, <span class="literal">'gi'</span>).test(command))
			<span class="reserved">this</span>.undoBookmark = null;

		<span class="reserved">if</span> (<span class="reserved">this</span>.lastSafariSelection &amp;&amp; !new RegExp(<span class="literal">'mceStartTyping|mceEndTyping|mceBeginUndoLevel|mceEndUndoLevel|mceAddUndoLevel'</span>, <span class="literal">'gi'</span>).test(command)) {
			<span class="reserved">this</span>.selection.moveToBookmark(<span class="reserved">this</span>.lastSafariSelection);
			tinyMCE.selectedElement = <span class="reserved">this</span>.lastSafariSelectedElement;
		}

		<span class="comment">// Mozilla issue</span>
		<span class="reserved">if</span> (!tinyMCE.isMSIE &amp;&amp; !<span class="reserved">this</span>.useCSS) {
			<span class="reserved">this</span>._setUseCSS(false);
			<span class="reserved">this</span>.useCSS = true;
		}

		<span class="comment">//debug("command: " + command + ", user_interface: " + user_interface + ", value: " + value);</span>
		<span class="reserved">this</span>.contentDocument = doc; <span class="comment">// &lt;-- Strange, unless this is applied Mozilla 1.3 breaks</span>

		<span class="reserved">if</span> (tinyMCE.execCommandCallback(<span class="reserved">this</span>, <span class="literal">'execcommand_callback'</span>, <span class="literal">'execCommand'</span>, <span class="reserved">this</span>.editorId, <span class="reserved">this</span>.getBody(), command, user_interface, value))
			<span class="reserved">return</span>;

		<span class="comment">// Fix align on images</span>
		<span class="reserved">if</span> (focusElm &amp;&amp; focusElm.nodeName == <span class="literal">"IMG"</span>) {
			var align = focusElm.getAttribute(<span class="literal">'align'</span>);
			var img = command == <span class="literal">"JustifyCenter"</span> ? focusElm.cloneNode(false) : focusElm;

			switch (command) {
				case <span class="literal">"JustifyLeft"</span>:
					<span class="reserved">if</span> (align == <span class="literal">'left'</span>)
						img.removeAttribute(<span class="literal">'align'</span>);
					<span class="reserved">else</span>
						img.setAttribute(<span class="literal">'align'</span>, <span class="literal">'left'</span>);

					<span class="comment">// Remove the div</span>
					var div = focusElm.parentNode;
					<span class="reserved">if</span> (div &amp;&amp; div.nodeName == <span class="literal">"DIV"</span> &amp;&amp; div.childNodes.length == 1 &amp;&amp; div.parentNode)
						div.parentNode.replaceChild(img, div);

					<span class="reserved">this</span>.selection.selectNode(img);
					<span class="reserved">this</span>.repaint();
					tinyMCE.triggerNodeChange();
					<span class="reserved">return</span>;

				case <span class="literal">"JustifyCenter"</span>:
					img.removeAttribute(<span class="literal">'align'</span>);