Added custom toolbar for CodeMirror

diff --git a/wcfsetup/install/files/acp/style/layout.scss b/wcfsetup/install/files/acp/style/layout.scss
index 7fe5f13e869b045f6106afdbd3662c7cb3d9ad65..263294e10f326c744164bc174acc9b61ec35bb2a 100644 (file)
--- a/wcfsetup/install/files/acp/style/layout.scss
+++ b/wcfsetup/install/files/acp/style/layout.scss
@@ -259,3 +259,32 @@ $wcfAcpMenuWidth: 150px;
 .pageFooter {
        box-shadow: 0 0 10px rgba(0, 0, 0, .6);
 }
+
+.codemirrorToolbar {
+       background-color: rgb(52, 73, 94);
+       display: flex;
+       flex-wrap: wrap;
+       
+       > li {
+               flex: 0 0 auto;
+               margin-bottom: 1px;
+               
+               > a {
+                       color: rgb(255, 255, 255);
+                       display: block;
+                       font-size: 12px;
+                       outline: none;
+                       padding: 10px;
+                       text-align: center;
+                       font-weight: 400;
+                       
+                       &:hover {
+                               background-color: rgb(19, 34, 48);
+                       }
+                       
+                       .icon {
+                               color: inherit;
+                       }
+               }
+       }
+}

diff --git a/wcfsetup/install/files/acp/templates/__pageAddContent.tpl b/wcfsetup/install/files/acp/templates/__pageAddContent.tpl
index 3f4ae3d8c8cc5fcf334259e8d607439fb5fdc94e..da388b07a7f9bac610576096b6a246837b9e9078 100644 (file)
--- a/wcfsetup/install/files/acp/templates/__pageAddContent.tpl
+++ b/wcfsetup/install/files/acp/templates/__pageAddContent.tpl
@@ -1,7 +1,7 @@
-<textarea name="content[{@$languageID}]" id="content{@$languageID}">{if !$content[$languageID]|empty}{$content[$languageID]}{/if}</textarea>
-{if $pageType == 'text'}
-       {capture append='__redactorJavaScript'}, '{@$__wcf->getPath()}js/3rdParty/redactor2/plugins/WoltLabPage.js?v={@LAST_UPDATE_TIME}'{/capture}
-       {capture append='__redactorConfig'}
+{assign var='__pageContentID' value='content'|concat:$languageID}
+
+<script data-relocate="true">
+       require(['Language'], function (Language) {
                Language.addObject({
                        'wcf.page.search': '{lang}wcf.page.search{/lang}',
                        'wcf.page.search.error.tooShort': '{lang}wcf.page.search.error.tooShort{/lang}',
@@ -10,7 +10,26 @@
                        'wcf.page.search.results': '{lang}wcf.page.search.results{/lang}',
                        'wcf.page.search.results.description': '{lang}wcf.page.search.results.description{/lang}'
                });
-               
+       })
+</script>
+
+{if $pageType == 'html' || $pageType == 'tpl'}
+       <ul class="codemirrorToolbar">
+               <li><a href="#" id="codemirror-{@$__pageContentID}-media" class="jsTooltip" title="{lang}wcf.editor.button.media{/lang}"><span class="icon icon16 fa-file-o"></span></a></li>
+               <li><a href="#" id="codemirror-{@$__pageContentID}-page" class="jsTooltip" title="{lang}wcf.editor.button.page{/lang}"><span class="icon icon16 fa-file-text-o"></span></a></li>
+       </ul>
+       <script data-relocate="true">
+               require(['WoltLab/WCF/Acp/Ui/CodeMirror/Media', 'WoltLab/WCF/Acp/Ui/CodeMirror/Page'], function(AcpUiCodeMirrorMedia, AcpUiCodeMirrorPage) {
+                       new AcpUiCodeMirrorMedia('{@$__pageContentID}');
+                       new AcpUiCodeMirrorPage('{@$__pageContentID}');
+               });
+       </script>
+{/if}
+
+<textarea name="content[{@$languageID}]" id="{@$__pageContentID}">{if !$content[$languageID]|empty}{$content[$languageID]}{/if}</textarea>
+{if $pageType == 'text'}
+       {capture append='__redactorJavaScript'}, '{@$__wcf->getPath()}js/3rdParty/redactor2/plugins/WoltLabPage.js?v={@LAST_UPDATE_TIME}'{/capture}
+       {capture append='__redactorConfig'}
                buttonOptions.woltlabPage = { icon: 'fa-file-text-o', title: '{lang}wcf.editor.button.page{/lang}' };
                
                buttons.push('woltlabPage');
@@ -18,7 +37,7 @@
                config.plugins.push('WoltLabPage');
        {/capture}
        
-       {include file='wysiwyg' wysiwygSelector='content'|concat:$languageID}
+       {include file='wysiwyg' wysiwygSelector=$__pageContentID}
 {elseif $pageType == 'html'}
        {include file='codemirror' codemirrorMode='htmlmixed' codemirrorSelector='#content'|concat:$languageID}
 {elseif $pageType == 'tpl'}

diff --git a/wcfsetup/install/files/js/WoltLab/WCF/Acp/Ui/CodeMirror/Media.js b/wcfsetup/install/files/js/WoltLab/WCF/Acp/Ui/CodeMirror/Media.js
new file mode 100644 (file)
index 0000000..4aa3759
--- /dev/null
+++ b/wcfsetup/install/files/js/WoltLab/WCF/Acp/Ui/CodeMirror/Media.js
@@ -0,0 +1,41 @@
+define(['WoltLab/WCF/Media/Manager/Editor'], function(MediaManagerEditor) {
+       "use strict";
+       
+       function AcpUiCodeMirrorMedia(elementId) { this.init(elementId); }
+       AcpUiCodeMirrorMedia.prototype = {
+               init: function(elementId) {
+                       this._element = elById(elementId);
+                       
+                       var button = elById('codemirror-' + elementId + '-media');
+                       button.classList.add(button.id);
+                       
+                       new MediaManagerEditor({
+                               buttonClass: button.id,
+                               callbackInsert: this._insert.bind(this),
+                               editor: null
+                       });
+               },
+               
+               _insert: function (mediaList, insertType, thumbnailSize) {
+                       var content = '';
+                       
+                       if (insertType === 'gallery') {
+                               var mediaIds = [];
+                               mediaList.forEach(function(item) {
+                                       mediaIds.push(item.mediaID);
+                               });
+                               
+                               content = '{{ mediaGallery="' + mediaIds.join(',') + '" }}';
+                       }
+                       else {
+                               mediaList.forEach(function(item) {
+                                       content += '{{ media="' + item.mediaID + '" size="' + thumbnailSize + '" }}';
+                               });
+                       }
+                       
+                       this._element.codemirror.replaceSelection(content);
+               }
+       };
+       
+       return AcpUiCodeMirrorMedia;
+});

diff --git a/wcfsetup/install/files/js/WoltLab/WCF/Acp/Ui/CodeMirror/Page.js b/wcfsetup/install/files/js/WoltLab/WCF/Acp/Ui/CodeMirror/Page.js
new file mode 100644 (file)
index 0000000..2c6f4f5
--- /dev/null
+++ b/wcfsetup/install/files/js/WoltLab/WCF/Acp/Ui/CodeMirror/Page.js
@@ -0,0 +1,24 @@
+define(['WoltLab/WCF/Ui/Page/Search'], function(UiPageSearch) {
+       "use strict";
+       
+       function AcpUiCodeMirrorPage(elementId) { this.init(elementId); }
+       AcpUiCodeMirrorPage.prototype = {
+               init: function(elementId) {
+                       this._element = elById(elementId);
+                       
+                       elById('codemirror-' + elementId + '-page').addEventListener(WCF_CLICK_EVENT, this._click.bind(this));
+               },
+               
+               _click: function (event) {
+                       event.preventDefault();
+                       
+                       UiPageSearch.open(this._insert.bind(this));
+               },
+               
+               _insert: function (pageID) {
+                       this._element.codemirror.replaceSelection('{{ page="' + pageID + '" }}');
+               }
+       };
+       
+       return AcpUiCodeMirrorPage;
+});