v1.0

只读模式
group, 分享
评论更多问题
博客标签总是存在一个

public/tinymce/plugins/autoresize/plugin.js

@@ -9,6 +9,7 @@
  */
 
 /*global tinymce:true */
+/*eslint no-nested-ternary:0 */
 
 /**
  * Auto Resize
@@ -20,6 +21,10 @@
 tinymce.PluginManager.add('autoresize', function(editor) {
 	var settings = editor.settings, oldSize = 0;
 
+	function isFullscreen() {
+		return editor.plugins.fullscreen && editor.plugins.fullscreen.isFullscreen();
+	}
+
 	if (editor.settings.inline) {
 		return;
 	}
@@ -28,15 +33,43 @@ tinymce.PluginManager.add('autoresize', function(editor) {
 	 * This method gets executed each time the editor needs to resize.
 	 */
 	function resize(e) {
-		var deltaSize, d = editor.getDoc(), body = d.body, de = d.documentElement, DOM = tinymce.DOM;
-		var resizeHeight = settings.autoresize_min_height, myHeight;
+		var deltaSize, doc, body, docElm, DOM = tinymce.DOM, resizeHeight, myHeight,
+			marginTop, marginBottom, paddingTop, paddingBottom, borderTop, borderBottom;
 
-		if ((e.type == "setcontent" && e.initial) || (editor.plugins.fullscreen && editor.plugins.fullscreen.isFullscreen())) {
+		doc = editor.getDoc();
+		if (!doc) {
 			return;
 		}
 
-		// Get height differently depending on the browser used
-		myHeight = tinymce.Env.ie ? body.scrollHeight : (tinymce.Env.webkit && body.clientHeight === 0 ? 0 : body.offsetHeight);
+		body = doc.body;
+		docElm = doc.documentElement;
+		resizeHeight = settings.autoresize_min_height;
+
+		if (!body || (e && e.type === "setcontent" && e.initial) || isFullscreen()) {
+			if (body && docElm) {
+				body.style.overflowY = "auto";
+				docElm.style.overflowY = "auto"; // Old IE
+			}
+
+			return;
+		}
+
+		// Calculate outer height of the body element using CSS styles
+		marginTop = editor.dom.getStyle(body, 'margin-top', true);
+		marginBottom = editor.dom.getStyle(body, 'margin-bottom', true);
+		paddingTop = editor.dom.getStyle(body, 'padding-top', true);
+		paddingBottom = editor.dom.getStyle(body, 'padding-bottom', true);
+		borderTop = editor.dom.getStyle(body, 'border-top-width', true);
+		borderBottom = editor.dom.getStyle(body, 'border-bottom-width', true);
+		myHeight = body.offsetHeight + parseInt(marginTop, 10) + parseInt(marginBottom, 10) +
+			parseInt(paddingTop, 10) + parseInt(paddingBottom, 10) +
+			parseInt(borderTop, 10) + parseInt(borderBottom, 10);
+
+		// Make sure we have a valid height
+		if (isNaN(myHeight) || myHeight <= 0) {
+			// Get height differently depending on the browser used
+			myHeight = tinymce.Env.ie ? body.scrollHeight : (tinymce.Env.webkit && body.clientHeight === 0 ? 0 : body.offsetHeight);
+		}
 
 		// Don't make it smaller than the minimum height
 		if (myHeight > settings.autoresize_min_height) {
@@ -47,17 +80,17 @@ tinymce.PluginManager.add('autoresize', function(editor) {
 		if (settings.autoresize_max_height && myHeight > settings.autoresize_max_height) {
 			resizeHeight = settings.autoresize_max_height;
 			body.style.overflowY = "auto";
-			de.style.overflowY = "auto"; // Old IE
+			docElm.style.overflowY = "auto"; // Old IE
 		} else {
 			body.style.overflowY = "hidden";
-			de.style.overflowY = "hidden"; // Old IE
+			docElm.style.overflowY = "hidden"; // Old IE
 			body.scrollTop = 0;
 		}
 
 		// Resize content element
 		if (resizeHeight !== oldSize) {
 			deltaSize = resizeHeight - oldSize;
-			DOM.setStyle(DOM.get(editor.id + '_ifr'), 'height', resizeHeight + 'px');
+			DOM.setStyle(editor.iframeElement, 'height', resizeHeight + 'px');
 			oldSize = resizeHeight;
 
 			// WebKit doesn't decrease the size of the body element until the iframe gets resized
@@ -68,6 +101,22 @@ tinymce.PluginManager.add('autoresize', function(editor) {
 		}
 	}
 
+	/**
+	 * Calls the resize x times in 100ms intervals. We can't wait for load events since
+	 * the CSS files might load async.
+	 */
+	function wait(times, interval, callback) {
+		setTimeout(function() {
+			resize({});
+
+			if (times--) {
+				wait(times, interval, callback);
+			} else if (callback) {
+				callback();
+			}
+		}, interval);
+	}
+
 	// Define minimum height
 	settings.autoresize_min_height = parseInt(editor.getParam('autoresize_min_height', editor.getElement().offsetHeight), 10);
 
@@ -76,14 +125,36 @@ tinymce.PluginManager.add('autoresize', function(editor) {
 
 	// Add padding at the bottom for better UX
 	editor.on("init", function() {
-		editor.dom.setStyle(editor.getBody(), 'paddingBottom', editor.getParam('autoresize_bottom_margin', 50) + 'px');
+		var overflowPadding, bottomMargin;
+
+		overflowPadding = editor.getParam('autoresize_overflow_padding', 1);
+		bottomMargin = editor.getParam('autoresize_bottom_margin', 50);
+
+		if (overflowPadding !== false) {
+			editor.dom.setStyles(editor.getBody(), {
+				paddingLeft: overflowPadding,
+				paddingRight: overflowPadding
+			});
+		}
+
+		if (bottomMargin !== false) {
+			editor.dom.setStyles(editor.getBody(), {
+				paddingBottom: bottomMargin
+			});
+		}
 	});
 
 	// Add appropriate listeners for resizing content area
-	editor.on("change setcontent paste keyup", resize);
+	editor.on("nodechange setcontent keyup FullscreenStateChanged", resize);
 
 	if (editor.getParam('autoresize_on_init', true)) {
-		editor.on('load', resize);
+		editor.on('init', function() {
+			// Hit it 20 times in 100 ms intervals
+			wait(20, 100, function() {
+				// Hit it 5 times in 1 sec intervals
+				wait(5, 1000);
+			});
+		});
 	}
 
 	// Register the command so that it can be invoked by using tinyMCE.activeEditor.execCommand('mceExample');