File modules/template_engine/components/html/component_editor/editor.js
Last commit: Wed Jun 1 01:14:46 2022 +0200 Jan Dankert Fix: Multiple SimpleMDE editors on 1 page.
1 2 import $ from '../../../../cms/ui/themes/default/script/jquery-global.js'; 3 import Workbench from "../../../../cms/ui/themes/default/script/openrat/workbench.js"; 4 5 export default function(element ) { 6 7 $(element).find('textarea').orAutoheight(); 8 9 // Codemirror-Editor anzeigen 10 $(element).find("textarea.or-editor.or-code-editor").each( async function() { 11 12 let $editor = $(this); 13 await Workbench.addStyle ('codemirror-style' ,'./modules/editor/codemirror/lib/codemirror.css'); 14 await Workbench.addScript('codemirror-script','./modules/editor/codemirror/lib/codemirror.js' ); 15 16 let mode = $editor.data('mode'); 17 18 let mimetype = $editor.data('mimetype'); 19 if(mimetype.length>0) 20 mode = mimetype; 21 22 let textareaEl = this; 23 24 let editor = CodeMirror.fromTextArea( textareaEl, { 25 lineNumbers: true, 26 viewportMargin: Infinity, 27 mode: mode, 28 dragDrop: false, 29 /** settings **/ }) 30 31 editor.on('change',function() { 32 // copy back to textarea on form submit... 33 let newValue = editor.getValue(); 34 $(textareaEl).val( newValue ); 35 } ); 36 37 38 Workbench.getInstance().registerAsDroppable(editor.getWrapperElement(), 39 (e)=> { 40 e.stopPropagation(); 41 e.preventDefault(); 42 // Insert id of dragged element into cursor position 43 console.debug('dropped',e.dataTransfer); 44 let pos = editor.getCursor(); 45 editor.setSelection(pos, pos); 46 let insertText = e.dataTransfer.getData('id') 47 let toInsert = ''+insertText; 48 editor.replaceSelection(toInsert); 49 //editor.setCursor(pos+toInsert.length); geht nicht. 50 } 51 ); 52 53 } ); 54 55 // Markdown-Editor anzeigen 56 $(element).find("textarea.or-editor.or-markdown-editor").each( async function() { 57 58 await Workbench.addStyle ('simplemde-style' ,'./modules/editor/simplemde/simplemde.min.css'); 59 await Workbench.addScript('simplemde-script','./modules/editor/simplemde/simplemde.min.js' ); 60 61 let textarea = this; 62 let toolbar = [{ 63 name: "bold", 64 action: SimpleMDE.toggleBold, 65 className: "or-image-icon or-image-icon--editor-bold", 66 title: "Bold", 67 }, 68 { 69 name: "italic", 70 action: SimpleMDE.toggleItalic, 71 className: "or-image-icon or-image-icon--editor-italic", 72 title: "Italic", 73 }, 74 { 75 name: "heading", 76 action: SimpleMDE.toggleHeadingBigger, 77 className: "or-image-icon or-image-icon--editor-headline", 78 title: "Headline", 79 }, 80 "|", // Separator 81 { 82 name: "quote", 83 action: SimpleMDE.toggleBlockquote, 84 className: "or-image-icon or-image-icon--editor-quote", 85 title: "Quote", 86 }, 87 { 88 name: "code", 89 action: SimpleMDE.toggleCodeBlock, 90 className: "or-image-icon or-image-icon--editor-code", 91 title: "Code", 92 }, 93 "|", // Separator 94 { 95 name: "generic list", 96 action: SimpleMDE.toggleUnorderedList, 97 className: "or-image-icon or-image-icon--editor-unnumberedlist", 98 title: "Unnumbered list", 99 }, 100 { 101 name: "numbered list", 102 action: SimpleMDE.toggleOrderedList, 103 className: "or-image-icon or-image-icon--editor-numberedlist", 104 title: "Numbered list", 105 }, 106 "|", // Separator 107 { 108 name: "table", 109 action: SimpleMDE.drawTable, 110 className: "or-image-icon or-image-icon--editor-table", 111 title: "Table", 112 }, 113 { 114 name: "horizontalrule", 115 action: SimpleMDE.drawHorizontalRule, 116 className: "or-image-icon or-image-icon--editor-horizontalrule", 117 title: "Horizontal rule", 118 }, 119 "|", // Separator 120 { 121 name: "undo", 122 action: SimpleMDE.undo, 123 className: "or-image-icon or-image-icon--editor-undo", 124 title: "Undo", 125 }, 126 { 127 name: "redo", 128 action: SimpleMDE.redo, 129 className: "or-image-icon or-image-icon--editor-redo", 130 title: "Redo", 131 }, 132 "|", // Separator 133 { 134 name: "link", 135 action: SimpleMDE.drawLink, 136 className: "or-image-icon or-image-icon--editor-link", 137 title: "Link", 138 }, 139 { 140 name: "image", 141 action: SimpleMDE.drawImage, 142 className: "or-image-icon or-image-icon--editor-image", 143 title: "Image", 144 }, 145 146 /* 147 "|", // Separator 148 { 149 name: "preview", 150 action: SimpleMDE.togglePreview, 151 className: "or-image-icon or-image-icon--editor-preview", 152 title: "Preview", 153 }, 154 { 155 name: "sidebyside", 156 action: SimpleMDE.toggleSideBySide, 157 className: "or-image-icon or-image-icon--editor-sidebyside", 158 title: "Side by side", 159 }, 160 { 161 name: "fullscreen", 162 action: SimpleMDE.toggleFullScreen, 163 className: "or-image-icon or-image-icon--editor-fullscreen", 164 title: "Fullscreen", 165 }, 166 */ 167 "|", // Separator 168 { 169 name: "guide", 170 action: "https:/"+"/simplemde.com/markdown-guide", 171 className: "or-image-icon or-image-icon--editor-help", 172 title: "Howto markdown", 173 }, 174 ]; 175 176 let mde = new SimpleMDE( 177 { 178 element: this, 179 toolbar: toolbar, 180 autoDownloadFontAwesome: false 181 } 182 ); 183 184 let codemirror = mde.codemirror; 185 186 /* 187 // TODO: Dragdrop with HTML5 188 $(codemirror.getWrapperElement()).droppable({ 189 accept: '.or-draggable', 190 hoverClass: 'or-droppable--hover', 191 activeClass: 'or-droppable--active', 192 193 drop: function (event, ui) { 194 195 let dropped = ui.draggable; 196 197 let insertText = ''; 198 let id = dropped.data('id'); 199 let url = '__OID__'+id+'__'; 200 if ( dropped.data('type') == 'image') 201 insertText = '![]('+url+')'; 202 else 203 insertText = '['+id+']('+url+')'; 204 205 // Insert id of dragged element into cursor position 206 let pos = codemirror.getCursor(); 207 codemirror.setSelection(pos, pos); 208 codemirror.replaceSelection( insertText); 209 } 210 });*/ 211 212 codemirror.on('change',function() { 213 // copy back to textarea on form submit... 214 let newValue = codemirror.getValue(); 215 $(textarea).val( newValue ); 216 } ); 217 } ); 218 219 // HTML-Editor anzeigen 220 $(element).find("textarea.or-editor.or-html-editor").each( async function() { 221 222 let textarea = this; 223 224 //await Workbench.addStyle ('trix-style' ,'./modules/editor/trix/trix.css'); 225 //await Workbench.addScript('trix-script','./modules/editor/trix/trix.js' ); 226 await Workbench.addStyle ('trumbowyg-style' ,'./modules/editor/trumbowyg/ui/trumbowyg.css'); 227 await Workbench.addScript('jquery-slim-script','./modules/editor/trumbowyg/jquery-3.6.0.min.js' ); // Trumbowyg needs JQuery 228 let j = jQuery.noConflict(); 229 await Workbench.addScript('trumbowyg-script' ,'./modules/editor/trumbowyg/trumbowyg.js' ); 230 j.trumbowyg.svgPath = './modules/editor/trumbowyg/ui/icons.svg'; 231 j(textarea).trumbowyg(); 232 233 /* 234 // TODO 235 $(textarea).closest('form').find('.trumbowyg-editor').droppable({ 236 accept: '.or-draggable', 237 hoverClass: 'or-droppable--hover', 238 activeClass: 'or-droppable--active', 239 240 drop: function (event, ui) { 241 242 let dropped = ui.draggable; 243 let id = dropped.data('id'); 244 let url = './?_='+dropped.data('type')+'-'+id+'&subaction=show&embed=1&__OID__'+id+'__='+id; 245 let insertText = ''; 246 if ( dropped.data('type') == 'image') 247 insertText = '<img src="'+url+'" alt="" />'; 248 else 249 insertText = '<a href="'+url+'" />'+id+'</a>'; 250 251 $(textarea).trumbowyg('execCmd', { 252 cmd: 'insertHTML', 253 param: insertText, 254 forceCss: false, 255 }); 256 } 257 }); 258 */ 259 260 261 262 263 264 265 } ); 266 267 268 };
Downloadmodules/template_engine/components/html/component_editor/editor.js
History Wed, 1 Jun 2022 01:14:46 +0200 Jan Dankert Fix: Multiple SimpleMDE editors on 1 page. Sat, 19 Mar 2022 12:23:17 +0100 dankert Fix: Trumbowyg HTML editor needs JQuery (which I removed some time ago) Fri, 11 Mar 2022 11:54:24 +0100 dankert Fix: Show icons for SimpleMDE. Sat, 18 Dec 2021 03:47:23 +0100 dankert New: Every ES6-Module should have a minified version for performance reasons. Bad: The Minifier "Jsqueeze" is unable to minify ES6-modules, so we had to implement a simple JS-Minifier which strips out all comments. Thu, 7 Oct 2021 23:53:15 +0200 Jan Dankert Fix: Static import needs extension .js Thu, 22 Apr 2021 00:30:08 +0200 Jan Dankert Fix: Re-enable drag and drop Tue, 13 Apr 2021 23:55:43 +0200 Jan Dankert New: Dynamic load of scripts and styles for the editors. Trumbowyg needs JQuery so , so JQuery is back again (but only for this case) :( Mon, 12 Apr 2021 23:46:06 +0200 Jan Dankert New: Smaller CSS-Files, because third-party-CSS (editors...) is loaded dynamically if necessary. Thu, 1 Apr 2021 01:01:54 +0200 Jan Dankert New: Some fixes for OQuery, our new selfmade light JQuery replacement. Now the UI is back again. Mon, 29 Mar 2021 01:06:08 +0200 Jan Dankert Removed common.js and moved the callbacks to the workbench module. Sat, 27 Mar 2021 19:27:16 +0100 Jan Dankert Fix: Importing SimpleMDE the right way Sat, 27 Mar 2021 19:07:54 +0100 Jan Dankert Fix: Importing Codemirror the right way Sat, 27 Mar 2021 10:19:39 +0100 Jan Dankert Fix: Register component scripts only once. Sat, 27 Mar 2021 05:14:11 +0100 Jan Dankert Refactoring: Converting all script files to ES6 modules (work in progress); removed jquery-ui (drag and drop will be replaced by HTML5, sortable by a small lib) Tue, 16 Mar 2021 23:52:22 +0100 Jan Dankert Refactoring: Use ES6 classes. Wed, 14 Oct 2020 22:20:22 +0200 Jan Dankert Refactoring: Renamed component folders, because 'if' is no valid namespace fragment.