editor.js (7938B)
1 Openrat.Workbench.afterViewLoadedHandler.add( function(element ) { 2 3 $(element).find('textarea').orAutoheight(); 4 5 6 // Codemirror-Editor anzeigen 7 $(element).find("textarea.or-editor.or-code-editor").each( function() { 8 9 let mode = $(this).data('mode'); 10 11 let mimetype = $(this).data('mimetype'); 12 if(mimetype.length>0) 13 mode = mimetype; 14 15 let textareaEl = this; 16 17 let editor = CodeMirror.fromTextArea( textareaEl, { 18 lineNumbers: true, 19 viewportMargin: Infinity, 20 mode: mode 21 /** settings **/ }) 22 23 editor.on('change',function() { 24 // copy back to textarea on form submit... 25 let newValue = editor.getValue(); 26 $(textareaEl).val( newValue ); 27 } ); 28 29 30 $(editor.getWrapperElement()).droppable({ 31 accept: '.or-draggable', 32 hoverClass: 'or-droppable--hover', 33 activeClass: 'or-droppable--active', 34 35 drop: function (event, ui) { 36 37 let dropped = ui.draggable; 38 39 // Insert id of dragged element into cursor position 40 let pos = editor.getCursor(); 41 editor.setSelection(pos, pos); 42 let insertText = dropped.data('id') 43 let toInsert = ''+insertText; 44 editor.replaceSelection(toInsert); 45 //editor.setCursor(pos+toInsert.length); geht nicht. 46 } 47 48 }); 49 50 51 } ); 52 53 // Markdown-Editor anzeigen 54 $(element).find("textarea.or-editor.or-markdown-editor").each( function() { 55 56 let textarea = this; 57 let toolbar = [{ 58 name: "bold", 59 action: SimpleMDE.toggleBold, 60 className: "image-icon image-icon--editor-bold", 61 title: "Bold", 62 }, 63 { 64 name: "italic", 65 action: SimpleMDE.toggleItalic, 66 className: "image-icon image-icon--editor-italic", 67 title: "Italic", 68 }, 69 { 70 name: "heading", 71 action: SimpleMDE.toggleHeadingBigger, 72 className: "image-icon image-icon--editor-headline", 73 title: "Headline", 74 }, 75 "|", // Separator 76 { 77 name: "quote", 78 action: SimpleMDE.toggleBlockquote, 79 className: "image-icon image-icon--editor-quote", 80 title: "Quote", 81 }, 82 { 83 name: "code", 84 action: SimpleMDE.toggleCodeBlock, 85 className: "image-icon image-icon--editor-code", 86 title: "Code", 87 }, 88 "|", // Separator 89 { 90 name: "generic list", 91 action: SimpleMDE.toggleUnorderedList, 92 className: "image-icon image-icon--editor-unnumberedlist", 93 title: "Unnumbered list", 94 }, 95 { 96 name: "numbered list", 97 action: SimpleMDE.toggleOrderedList, 98 className: "image-icon image-icon--editor-numberedlist", 99 title: "Numbered list", 100 }, 101 "|", // Separator 102 { 103 name: "table", 104 action: SimpleMDE.drawTable, 105 className: "image-icon image-icon--editor-table", 106 title: "Table", 107 }, 108 { 109 name: "horizontalrule", 110 action: SimpleMDE.drawHorizontalRule, 111 className: "image-icon image-icon--editor-horizontalrule", 112 title: "Horizontal rule", 113 }, 114 "|", // Separator 115 { 116 name: "undo", 117 action: SimpleMDE.undo, 118 className: "image-icon image-icon--editor-undo", 119 title: "Undo", 120 }, 121 { 122 name: "redo", 123 action: SimpleMDE.redo, 124 className: "image-icon image-icon--editor-redo", 125 title: "Redo", 126 }, 127 "|", // Separator 128 { 129 name: "link", 130 action: SimpleMDE.drawLink, 131 className: "image-icon image-icon--editor-link", 132 title: "Link", 133 }, 134 { 135 name: "image", 136 action: SimpleMDE.drawImage, 137 className: "image-icon image-icon--editor-image", 138 title: "Image", 139 }, 140 141 /* 142 "|", // Separator 143 { 144 name: "preview", 145 action: SimpleMDE.togglePreview, 146 className: "image-icon image-icon--editor-preview", 147 title: "Preview", 148 }, 149 { 150 name: "sidebyside", 151 action: SimpleMDE.toggleSideBySide, 152 className: "image-icon image-icon--editor-sidebyside", 153 title: "Side by side", 154 }, 155 { 156 name: "fullscreen", 157 action: SimpleMDE.toggleFullScreen, 158 className: "image-icon image-icon--editor-fullscreen", 159 title: "Fullscreen", 160 }, 161 */ 162 "|", // Separator 163 { 164 name: "guide", 165 action: "https://simplemde.com/markdown-guide", 166 className: "image-icon image-icon--editor-help", 167 title: "Howto markdown", 168 }, 169 ]; 170 171 let mde = new SimpleMDE( 172 { 173 element: $(this)[0], 174 toolbar: toolbar, 175 autoDownloadFontAwesome: false 176 } 177 ); 178 179 let codemirror = mde.codemirror; 180 181 $(codemirror.getWrapperElement()).droppable({ 182 accept: '.or-draggable', 183 hoverClass: 'or-droppable--hover', 184 activeClass: 'or-droppable--active', 185 186 drop: function (event, ui) { 187 188 let dropped = ui.draggable; 189 190 let insertText = ''; 191 let id = dropped.data('id'); 192 let url = '__OID__'+id+'__'; 193 if ( dropped.data('type') == 'image') 194 insertText = ''; 195 else 196 insertText = '['+id+']('+url+')'; 197 198 // Insert id of dragged element into cursor position 199 let pos = codemirror.getCursor(); 200 codemirror.setSelection(pos, pos); 201 codemirror.replaceSelection( insertText); 202 } 203 }); 204 205 codemirror.on('change',function() { 206 // copy back to textarea on form submit... 207 let newValue = codemirror.getValue(); 208 $(textarea).val( newValue ); 209 } ); 210 } ); 211 212 // HTML-Editor anzeigen 213 $(element).find("textarea.or-editor.or-html-editor").each( function() { 214 215 let textarea = this; 216 217 $.trumbowyg.svgPath = './modules/editor/trumbowyg/ui/icons.svg'; 218 $(textarea).trumbowyg(); 219 220 $(textarea).closest('form').find('.trumbowyg-editor').droppable({ 221 accept: '.or-draggable', 222 hoverClass: 'or-droppable--hover', 223 activeClass: 'or-droppable--active', 224 225 drop: function (event, ui) { 226 227 let dropped = ui.draggable; 228 let id = dropped.data('id'); 229 let url = './?_='+dropped.data('type')+'-'+id+'&subaction=show&embed=1&__OID__'+id+'__='+id; 230 let insertText = ''; 231 if ( dropped.data('type') == 'image') 232 insertText = '<img src="'+url+'" alt="" />'; 233 else 234 insertText = '<a href="'+url+'" />'+id+'</a>'; 235 236 $(textarea).trumbowyg('execCmd', { 237 cmd: 'insertHTML', 238 param: insertText, 239 forceCss: false, 240 }); 241 } 242 }); 243 244 245 246 247 248 } ); 249 250 251 });