From: Alexander Ebert <ebert@woltlab.com>
Date: Mon, 6 Jun 2016 10:31:53 +0000 (+0200)
Subject: Using head.js to load Redactor
X-Git-Tag: 3.0.0_Beta_1~1518
X-Git-Url: https://git.stricted.de/?a=commitdiff_plain;h=0de19b4f3afe4a914ffc504f3b347879e5848b81;p=GitHub%2FWoltLab%2FWCF.git

Using head.js to load Redactor

Using simple script tags caused some issues because redactor.js was
executed again if loaded via AJAX and thus cause the internal uuid to be
reset. This led to major issues including duplicate ids being generated.
---

diff --git a/com.woltlab.wcf/templates/wysiwyg.tpl b/com.woltlab.wcf/templates/wysiwyg.tpl
index bba558da81..d7fbcb59fb 100644
--- a/com.woltlab.wcf/templates/wysiwyg.tpl
+++ b/com.woltlab.wcf/templates/wysiwyg.tpl
@@ -8,73 +8,90 @@
 	}
 </style>
 
-{if ENABLE_DEBUG_MODE}
-	{* Imperavi *}
-	<script data-relocate="true" src="{@$__wcf->getPath()}js/3rdParty/redactor2/redactor.js?v={@LAST_UPDATE_TIME}"></script>
-	<script data-relocate="true" src="{@$__wcf->getPath()}js/3rdParty/redactor2/plugins/alignment.js?v={@LAST_UPDATE_TIME}"></script>
-	<script data-relocate="true" src="{@$__wcf->getPath()}js/3rdParty/redactor2/plugins/source.js?v={@LAST_UPDATE_TIME}"></script>
-	<script data-relocate="true" src="{@$__wcf->getPath()}js/3rdParty/redactor2/plugins/table.js?v={@LAST_UPDATE_TIME}"></script>
-	
-	{* WoltLab *}
-	<script data-relocate="true" src="{@$__wcf->getPath()}js/3rdParty/redactor2/plugins/WoltLabAttachment.js?v={@LAST_UPDATE_TIME}"></script>
-	<script data-relocate="true" src="{@$__wcf->getPath()}js/3rdParty/redactor2/plugins/WoltLabButton.js?v={@LAST_UPDATE_TIME}"></script>
-	<script data-relocate="true" src="{@$__wcf->getPath()}js/3rdParty/redactor2/plugins/WoltLabColor.js?v={@LAST_UPDATE_TIME}"></script>
-	<script data-relocate="true" src="{@$__wcf->getPath()}js/3rdParty/redactor2/plugins/WoltLabDropdown.js?v={@LAST_UPDATE_TIME}"></script>
-	<script data-relocate="true" src="{@$__wcf->getPath()}js/3rdParty/redactor2/plugins/WoltLabEvent.js?v={@LAST_UPDATE_TIME}"></script>
-	<script data-relocate="true" src="{@$__wcf->getPath()}js/3rdParty/redactor2/plugins/WoltLabLink.js?v={@LAST_UPDATE_TIME}"></script>
-	<script data-relocate="true" src="{@$__wcf->getPath()}js/3rdParty/redactor2/plugins/WoltLabMedia.js?v={@LAST_UPDATE_TIME}"></script>
-	<script data-relocate="true" src="{@$__wcf->getPath()}js/3rdParty/redactor2/plugins/WoltLabMention.js?v={@LAST_UPDATE_TIME}"></script>
-	<script data-relocate="true" src="{@$__wcf->getPath()}js/3rdParty/redactor2/plugins/WoltLabQuote.js?v={@LAST_UPDATE_TIME}"></script>
-	<script data-relocate="true" src="{@$__wcf->getPath()}js/3rdParty/redactor2/plugins/WoltLabSize.js?v={@LAST_UPDATE_TIME}"></script>
-	<script data-relocate="true" src="{@$__wcf->getPath()}js/3rdParty/redactor2/plugins/WoltLabSmiley.js?v={@LAST_UPDATE_TIME}"></script>
-{else}
-	<script data-relocate="true" src="{@$__wcf->getPath()}js/3rdParty/redactor2/redactor.min.js?v={@LAST_UPDATE_TIME}"></script>
-	<script data-relocate="true" src="{@$__wcf->getPath()}js/3rdParty/redactor2/plugins/combined.min.js?v={@LAST_UPDATE_TIME}"></script>
-{/if}
-
 <script data-relocate="true">
-require(['WoltLab/WCF/Ui/Redactor/Metacode'], function(UiRedactorMetacode) {
-	(function() {
-		var buttons = [], buttonOptions = [];
-		{include file='wysiwygToolbar'}
-		
-		// TODO: Should the media stuff be here?
-		{include file='mediaJavaScript'}
-		
-		var element = elById('{if $wysiwygSelector|isset}{$wysiwygSelector|encodeJS}{else}text{/if}');
-		UiRedactorMetacode.convert(element);
-		
-		var autosave = elData(element, 'autosave') || '';
-		if (autosave) {
-			element.removeAttribute('data-autosave');
-		}
-		
-		var config = {
-			buttons: buttons,
-			minHeight: 200,
-			plugins: ['alignment', 'source', 'table', 'WoltLabAttachment', 'WoltLabColor', 'WoltLabDropdown', 'WoltLabEvent', 'WoltLabLink', 'WoltLabQuote', 'WoltLabSize', 'WoltLabSmiley'],
-			toolbarFixed: false,
-			woltlab: {
-				autosave: autosave,
-				buttons: buttonOptions
-			}
-		};
-		
-		// user mentions
-		if (elDataBool(element, 'support-mention')) {
-			config.plugins.push('WoltLabMention');
-		}
-		
-		// media
-		{if $__wcf->session->getPermission('admin.content.cms.canUseMedia')}
-			config.plugins.push('WoltLabMedia');
+	head.load([
+		{if ENABLE_DEBUG_MODE}
+			{* Imperavi *}
+			'{@$__wcf->getPath()}js/3rdParty/redactor2/redactor.js?v={@LAST_UPDATE_TIME}',
+			'{@$__wcf->getPath()}js/3rdParty/redactor2/plugins/alignment.js?v={@LAST_UPDATE_TIME}',
+			'{@$__wcf->getPath()}js/3rdParty/redactor2/plugins/source.js?v={@LAST_UPDATE_TIME}',
+			'{@$__wcf->getPath()}js/3rdParty/redactor2/plugins/table.js?v={@LAST_UPDATE_TIME}',
+			
+			{* WoltLab *}
+			'{@$__wcf->getPath()}js/3rdParty/redactor2/plugins/WoltLabAttachment.js?v={@LAST_UPDATE_TIME}',
+			'{@$__wcf->getPath()}js/3rdParty/redactor2/plugins/WoltLabButton.js?v={@LAST_UPDATE_TIME}',
+			'{@$__wcf->getPath()}js/3rdParty/redactor2/plugins/WoltLabColor.js?v={@LAST_UPDATE_TIME}',
+			'{@$__wcf->getPath()}js/3rdParty/redactor2/plugins/WoltLabDropdown.js?v={@LAST_UPDATE_TIME}',
+			'{@$__wcf->getPath()}js/3rdParty/redactor2/plugins/WoltLabEvent.js?v={@LAST_UPDATE_TIME}',
+			'{@$__wcf->getPath()}js/3rdParty/redactor2/plugins/WoltLabImage.js?v={@LAST_UPDATE_TIME}',
+			'{@$__wcf->getPath()}js/3rdParty/redactor2/plugins/WoltLabLink.js?v={@LAST_UPDATE_TIME}',
+			'{@$__wcf->getPath()}js/3rdParty/redactor2/plugins/WoltLabMedia.js?v={@LAST_UPDATE_TIME}',
+			'{@$__wcf->getPath()}js/3rdParty/redactor2/plugins/WoltLabMention.js?v={@LAST_UPDATE_TIME}',
+			'{@$__wcf->getPath()}js/3rdParty/redactor2/plugins/WoltLabModal.js?v={@LAST_UPDATE_TIME}',
+			'{@$__wcf->getPath()}js/3rdParty/redactor2/plugins/WoltLabQuote.js?v={@LAST_UPDATE_TIME}',
+			'{@$__wcf->getPath()}js/3rdParty/redactor2/plugins/WoltLabSize.js?v={@LAST_UPDATE_TIME}',
+			'{@$__wcf->getPath()}js/3rdParty/redactor2/plugins/WoltLabSmiley.js?v={@LAST_UPDATE_TIME}'
+		{else}
+			'{@$__wcf->getPath()}js/3rdParty/redactor2/redactor.min.js?v={@LAST_UPDATE_TIME}',
+			'{@$__wcf->getPath()}js/3rdParty/redactor2/plugins/combined.min.js?v={@LAST_UPDATE_TIME}'
 		{/if}
-		
-		// load the button plugin last to ensure all buttons have been initialized
-		// already and we can safely add all icons
-		config.plugins.push('WoltLabButton');
-		
-		$(element).redactor(config);
-	})();
-});
+	], function () {
+		require(['WoltLab/WCF/Ui/Redactor/Metacode'], function(UiRedactorMetacode) {
+			var buttons = [], buttonOptions = [];
+			{include file='wysiwygToolbar'}
+			
+			// TODO: Should the media stuff be here?
+			{include file='mediaJavaScript'}
+			
+			var element = elById('{if $wysiwygSelector|isset}{$wysiwygSelector|encodeJS}{else}text{/if}');
+			UiRedactorMetacode.convert(element);
+			
+			var autosave = elData(element, 'autosave') || '';
+			if (autosave) {
+				element.removeAttribute('data-autosave');
+			}
+			
+			var config = {
+				buttons: buttons,
+				imageCaption: false,
+				minHeight: 200,
+				plugins: [
+					'alignment',
+					'source',
+					'table',
+					'WoltLabAttachment',
+					'WoltLabColor',
+					'WoltLabDropdown',
+					'WoltLabEvent',
+					'WoltLabImage',
+					'WoltLabLink',
+					'WoltLabModal',
+					'WoltLabQuote',
+					'WoltLabSize',
+					'WoltLabSmiley'
+				],
+				toolbarFixed: false,
+				woltlab: {
+					autosave: autosave,
+					buttons: buttonOptions
+				}
+			};
+			
+			// user mentions
+			if (elDataBool(element, 'support-mention')) {
+				config.plugins.push('WoltLabMention');
+			}
+			
+			// media
+			{if $__wcf->session->getPermission('admin.content.cms.canUseMedia')}
+				config.plugins.push('WoltLabMedia');
+			{/if}
+			
+			// load the button plugin last to ensure all buttons have been initialized
+			// already and we can safely add all icons
+			config.plugins.push('WoltLabButton');
+			
+			$(element).redactor(config);
+		});
+	});
 </script>