From 0de19b4f3afe4a914ffc504f3b347879e5848b81 Mon Sep 17 00:00:00 2001
From: Alexander Ebert <ebert@woltlab.com>
Date: Mon, 6 Jun 2016 12:31:53 +0200
Subject: [PATCH] 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.
---
 com.woltlab.wcf/templates/wysiwyg.tpl | 151 ++++++++++++++------------
 1 file changed, 84 insertions(+), 67 deletions(-)

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>
-- 
2.20.1