Added basic support for code bbcode (WIP!)
authorAlexander Ebert <ebert@woltlab.com>
Thu, 9 Jun 2016 16:35:32 +0000 (18:35 +0200)
committerAlexander Ebert <ebert@woltlab.com>
Thu, 9 Jun 2016 16:35:39 +0000 (18:35 +0200)
com.woltlab.wcf/templates/wysiwyg.tpl
wcfsetup/install/files/js/3rdParty/redactor2/plugins/WoltLabCode.js [new file with mode: 0644]
wcfsetup/install/files/style/bbcode/code.scss [new file with mode: 0644]

index 919ccdb60222f7e7579809c035541c4f18a23d80..52bc64755c8dd598150e1bdc766364e58a508782 100644 (file)
@@ -20,6 +20,7 @@
                        {* 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/WoltLabCode.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}',
@@ -73,6 +74,7 @@
                                        'source',
                                        'table',
                                        'WoltLabAttachment',
+                                       'WoltLabCode',
                                        'WoltLabColor',
                                        'WoltLabDropdown',
                                        'WoltLabEvent',
diff --git a/wcfsetup/install/files/js/3rdParty/redactor2/plugins/WoltLabCode.js b/wcfsetup/install/files/js/3rdParty/redactor2/plugins/WoltLabCode.js
new file mode 100644 (file)
index 0000000..a39af3d
--- /dev/null
@@ -0,0 +1,28 @@
+$.Redactor.prototype.WoltLabCode = function() {
+       "use strict";
+       
+       return {
+               init: function() {
+                       this.opts.activeButtonsStates.pre = 'code';
+                       
+                       require(['EventHandler'], (function (EventHandler) {
+                               EventHandler.add('com.woltlab.wcf.redactor2', 'bbcode_code_' + this.$element[0].id, (function(data) {
+                                       data.cancel = true;
+                                       
+                                       this.button.toggle({}, 'pre', 'func', 'block.format');
+                                       
+                                       var pre = this.selection.block();
+                                       if (pre && pre.nodeName === 'PRE') {
+                                               if (pre.textContent === '') {
+                                                       pre.textContent = '\u200B';
+                                               }
+                                               
+                                               if (elData(pre, 'display-value') === '') {
+                                                       elData(pre, 'display-value', 'TODO: source code');
+                                               }
+                                       }
+                               }).bind(this));
+                       }).bind(this));
+               }
+       };
+};
diff --git a/wcfsetup/install/files/style/bbcode/code.scss b/wcfsetup/install/files/style/bbcode/code.scss
new file mode 100644 (file)
index 0000000..92e47e7
--- /dev/null
@@ -0,0 +1,20 @@
+.redactor-editor pre {
+       background-color: rgb(255, 255, 255) !important;
+       border: 1px solid rgb(196, 196, 196) !important;
+       border-radius: 2px;
+       color: rgb(68, 68, 68) !important;
+       font-family: Consolas, 'Courier New', monospace;
+       margin: 1em 0;
+       padding: 10px 20px;
+       position: relative;
+       white-space: pre;
+       
+       &::before {
+               content: attr(data-display-value);
+               display: block;
+               font-family: $wcfFontFamily;
+               margin-bottom: 20px;
+               
+               @include wcfFontHeadline;
+       }
+}