com.woltlab.wcf/templates/wysiwyg.tpl

   1 <style>
   2         woltlab-mention {
   3                 background-color: rgb(240, 248, 255);
   4                 border: 1px solid rgb(52, 152, 219);
   5                 display: inline-block;
   6                 margin: 0 3px;
   7                 padding: 0 2px;
   8         }
   9 </style>
  10
  11 <script data-relocate="true">
  12         head.load([
  13                 {if ENABLE_DEBUG_MODE}
  14                         {* Imperavi *}
  15                         '{@$__wcf->getPath()}js/3rdParty/redactor2/redactor.js?v={@LAST_UPDATE_TIME}',
  16                         '{@$__wcf->getPath()}js/3rdParty/redactor2/plugins/alignment.js?v={@LAST_UPDATE_TIME}',
  17                         '{@$__wcf->getPath()}js/3rdParty/redactor2/plugins/source.js?v={@LAST_UPDATE_TIME}',
  18                         '{@$__wcf->getPath()}js/3rdParty/redactor2/plugins/table.js?v={@LAST_UPDATE_TIME}',
  19
  20                         {* WoltLab *}
  21                         '{@$__wcf->getPath()}js/3rdParty/redactor2/plugins/WoltLabAttachment.js?v={@LAST_UPDATE_TIME}',
  22                         '{@$__wcf->getPath()}js/3rdParty/redactor2/plugins/WoltLabBlock.js?v={@LAST_UPDATE_TIME}',
  23                         '{@$__wcf->getPath()}js/3rdParty/redactor2/plugins/WoltLabButton.js?v={@LAST_UPDATE_TIME}',
  24                         '{@$__wcf->getPath()}js/3rdParty/redactor2/plugins/WoltLabCode.js?v={@LAST_UPDATE_TIME}',
  25                         '{@$__wcf->getPath()}js/3rdParty/redactor2/plugins/WoltLabColor.js?v={@LAST_UPDATE_TIME}',
  26                         '{@$__wcf->getPath()}js/3rdParty/redactor2/plugins/WoltLabDropdown.js?v={@LAST_UPDATE_TIME}',
  27                         '{@$__wcf->getPath()}js/3rdParty/redactor2/plugins/WoltLabEvent.js?v={@LAST_UPDATE_TIME}',
  28                         '{@$__wcf->getPath()}js/3rdParty/redactor2/plugins/WoltLabImage.js?v={@LAST_UPDATE_TIME}',
  29                         '{@$__wcf->getPath()}js/3rdParty/redactor2/plugins/WoltLabInlineCode.js?v={@LAST_UPDATE_TIME}',
  30                         '{@$__wcf->getPath()}js/3rdParty/redactor2/plugins/WoltLabLink.js?v={@LAST_UPDATE_TIME}',
  31                         '{@$__wcf->getPath()}js/3rdParty/redactor2/plugins/WoltLabMedia.js?v={@LAST_UPDATE_TIME}',
  32                         '{@$__wcf->getPath()}js/3rdParty/redactor2/plugins/WoltLabMention.js?v={@LAST_UPDATE_TIME}',
  33                         '{@$__wcf->getPath()}js/3rdParty/redactor2/plugins/WoltLabModal.js?v={@LAST_UPDATE_TIME}',
  34                         '{@$__wcf->getPath()}js/3rdParty/redactor2/plugins/WoltLabQuote.js?v={@LAST_UPDATE_TIME}',
  35                         '{@$__wcf->getPath()}js/3rdParty/redactor2/plugins/WoltLabSize.js?v={@LAST_UPDATE_TIME}',
  36                         '{@$__wcf->getPath()}js/3rdParty/redactor2/plugins/WoltLabSmiley.js?v={@LAST_UPDATE_TIME}',
  37                         '{@$__wcf->getPath()}js/3rdParty/redactor2/plugins/WoltLabSpoiler.js?v={@LAST_UPDATE_TIME}'
  38                 {else}
  39                         '{@$__wcf->getPath()}js/3rdParty/redactor2/redactor.min.js?v={@LAST_UPDATE_TIME}',
  40                         '{@$__wcf->getPath()}js/3rdParty/redactor2/plugins/combined.min.js?v={@LAST_UPDATE_TIME}'
  41                 {/if}
  42         ], function () {
  43                 require(['Language', 'WoltLab/WCF/Ui/Redactor/Metacode'], function(Language, UiRedactorMetacode) {
  44                         Language.addObject({
  45                                 'wcf.editor.code.edit': '{lang}wcf.editor.code.edit{/lang}',
  46                                 'wcf.editor.code.file': '{lang}wcf.editor.code.file{/lang}',
  47                                 'wcf.editor.code.file.description': '{lang}wcf.editor.code.file.description{/lang}',
  48                                 'wcf.editor.code.highlighter': '{lang}wcf.editor.code.highlighter{/lang}',
  49                                 'wcf.editor.code.highlighter.description': '{lang}wcf.editor.code.highlighter.description{/lang}',
  50                                 'wcf.editor.code.highlighter.detect': '{lang}wcf.editor.code.highlighter.detect{/lang}',
  51                                 'wcf.editor.code.line': '{lang}wcf.editor.code.line{/lang}',
  52                                 'wcf.editor.code.line.description': '{lang}wcf.editor.code.line.description{/lang}',
  53                                 'wcf.editor.code.title': '{lang __literal=true}wcf.editor.code.title{/lang}',
  54
  55                                 'wcf.editor.image.edit': '{lang}wcf.editor.image.edit{/lang}',
  56                                 'wcf.editor.image.insert': '{lang}wcf.editor.image.insert{/lang}',
  57                                 'wcf.editor.image.link': '{lang}wcf.editor.image.link{/lang}',
  58                                 'wcf.editor.image.link.error.invalid': '{lang}wcf.editor.image.link.error.invalid{/lang}',
  59                                 'wcf.editor.image.float': '{lang}wcf.editor.image.float{/lang}',
  60                                 'wcf.editor.image.float.left': '{lang}wcf.editor.image.float.left{/lang}',
  61                                 'wcf.editor.image.float.right': '{lang}wcf.editor.image.float.right{/lang}',
  62                                 'wcf.editor.image.source': '{lang}wcf.editor.image.source{/lang}',
  63                                 'wcf.editor.image.source.error.invalid': '{lang}wcf.editor.image.source.error.invalid{/lang}',
  64
  65                                 'wcf.editor.link.add': '{lang}wcf.editor.link.add{/lang}',
  66                                 'wcf.editor.link.edit': '{lang}wcf.editor.link.edit{/lang}',
  67                                 'wcf.editor.link.url': '{lang}wcf.editor.link.url{/lang}',
  68                                 'wcf.editor.link.text': '{lang}wcf.editor.link.text{/lang}',
  69
  70                                 'wcf.editor.quote.author': '{lang}wcf.editor.quote.author{/lang}',
  71                                 'wcf.editor.quote.edit': '{lang}wcf.editor.quote.edit{/lang}',
  72                                 'wcf.editor.quote.title': '{lang __literal=true}wcf.editor.quote.title{/lang}',
  73                                 'wcf.editor.quote.url': '{lang}wcf.editor.quote.url{/lang}',
  74                                 'wcf.editor.quote.url.description': '{lang}wcf.editor.quote.url.description{/lang}',
  75
  76                                 'wcf.editor.spoiler.label': '{lang}wcf.editor.spoiler.label{/lang}',
  77                                 'wcf.editor.spoiler.label.description': '{lang}wcf.editor.spoiler.label.description{/lang}',
  78                                 'wcf.editor.spoiler.edit': '{lang}wcf.editor.spoiler.edit{/lang}',
  79                                 'wcf.editor.spoiler.title': '{lang __literal=true}wcf.editor.spoiler.title{/lang}'
  80                         });
  81
  82                         var buttons = [], buttonOptions = [], customButtons = [];
  83                         {include file='wysiwygToolbar'}
  84
  85                         var highlighters = { {implode from=$__wcf->getBBCodeHandler()->getHighlighters() item=__highlighter}'{$__highlighter}': '{lang}wcf.bbcode.code.{@$__highlighter}.title{/lang}'{/implode} };
  86
  87                         // TODO: Should the media stuff be here?
  88                         {include file='mediaJavaScript'}
  89
  90                         var element = elById('{if $wysiwygSelector|isset}{$wysiwygSelector|encodeJS}{else}text{/if}');
  91                         UiRedactorMetacode.convert(element);
  92
  93                         var autosave = elData(element, 'autosave') || '';
  94                         if (autosave) {
  95                                 element.removeAttribute('data-autosave');
  96                         }
  97
  98                         var config = {
  99                                 buttons: buttons,
 100                                 formatting: ['p', 'h2', 'h3', 'h4'],
 101                                 imageCaption: false,
 102                                 lang: 'wsc', // fake language to offload phrases
 103                                 langs: {
 104                                         wsc: {
 105                                                 // formatting dropdown
 106                                                 heading2: '{lang}wcf.editor.format.heading2{/lang}',
 107                                                 heading3: '{lang}wcf.editor.format.heading3{/lang}',
 108                                                 heading4: '{lang}wcf.editor.format.heading4{/lang}',
 109                                                 paragraph: '{lang}wcf.editor.format.paragraph{/lang}',
 110
 111                                                 // table plugin
 112                                                 'add-head': '{lang}wcf.editor.table.addHead{/lang}',
 113                                                 'delete-column': '{lang}wcf.editor.table.deleteColumn{/lang}',
 114                                                 'delete-head': '{lang}wcf.editor.table.deleteHead{/lang}',
 115                                                 'delete-row': '{lang}wcf.editor.table.deleteRow{/lang}',
 116                                                 'delete-table': '{lang}wcf.editor.table.deleteTable{/lang}',
 117                                                 'insert-table': '{lang}wcf.editor.table.insertTable{/lang}',
 118                                                 'insert-column-left': '{lang}wcf.editor.table.insertColumnLeft{/lang}',
 119                                                 'insert-column-right': '{lang}wcf.editor.table.insertColumnRight{/lang}',
 120                                                 'insert-row-above': '{lang}wcf.editor.table.insertRowAbove{/lang}',
 121                                                 'insert-row-below': '{lang}wcf.editor.table.insertRowBelow{/lang}'
 122                                         }
 123                                 },
 124                                 minHeight: 200,
 125                                 plugins: [
 126                                         'alignment',
 127                                         'source',
 128                                         'table',
 129                                         'WoltLabAttachment',
 130                                         'WoltLabBlock',
 131                                         'WoltLabCode',
 132                                         'WoltLabColor',
 133                                         'WoltLabDropdown',
 134                                         'WoltLabEvent',
 135                                         'WoltLabImage',
 136                                         'WoltLabInlineCode',
 137                                         'WoltLabLink',
 138                                         'WoltLabModal',
 139                                         'WoltLabQuote',
 140                                         'WoltLabSize',
 141                                         'WoltLabSmiley',
 142                                         'WoltLabSpoiler'
 143                                 ],
 144                                 toolbarFixed: false,
 145                                 woltlab: {
 146                                         autosave: autosave,
 147                                         buttons: buttonOptions,
 148                                         customButtons: customButtons,
 149                                         highlighters: highlighters
 150                                 }
 151                         };
 152
 153                         // user mentions
 154                         if (elDataBool(element, 'support-mention')) {
 155                                 config.plugins.push('WoltLabMention');
 156                         }
 157
 158                         // media
 159                         {if $__wcf->session->getPermission('admin.content.cms.canUseMedia')}
 160                                 config.plugins.push('WoltLabMedia');
 161                         {/if}
 162
 163                         // load the button plugin last to ensure all buttons have been initialized
 164                         // already and we can safely add all icons
 165                         config.plugins.push('WoltLabButton');
 166
 167                         $(element).redactor(config);
 168                 });
 169         });
 170 </script>