File modules/template_engine/components/html/component_editor/editor.min.js
Last commit: Wed Jun 1 01:14:46 2022 +0200 Jan Dankert Fix: Multiple SimpleMDE editors on 1 page.
1 import $ from '../../../../cms/ui/themes/default/script/jquery-global.min.js'; 2 import Workbench from "../../../../cms/ui/themes/default/script/openrat/workbench.min.js"; 3 export default function(element ) { 4 $(element).find('textarea').orAutoheight(); 5 $(element).find("textarea.or-editor.or-code-editor").each( async function() { 6 let $editor = $(this); 7 await Workbench.addStyle ('codemirror-style' ,'./modules/editor/codemirror/lib/codemirror.css'); 8 await Workbench.addScript('codemirror-script','./modules/editor/codemirror/lib/codemirror.js' ); 9 let mode = $editor.data('mode'); 10 let mimetype = $editor.data('mimetype'); 11 if(mimetype.length>0) 12 mode = mimetype; 13 let textareaEl = this; 14 let editor = CodeMirror.fromTextArea( textareaEl, { 15 lineNumbers: true, 16 viewportMargin: Infinity, 17 mode: mode, 18 dragDrop: false, 19 }) 20 editor.on('change',function() { 21 let newValue = editor.getValue(); 22 $(textareaEl).val( newValue ); 23 } ); 24 Workbench.getInstance().registerAsDroppable(editor.getWrapperElement(), 25 (e)=> { 26 e.stopPropagation(); 27 e.preventDefault(); 28 console.debug('dropped',e.dataTransfer); 29 let pos = editor.getCursor(); 30 editor.setSelection(pos, pos); 31 let insertText = e.dataTransfer.getData('id') 32 let toInsert = ''+insertText; 33 editor.replaceSelection(toInsert); 34 } 35 ); 36 } ); 37 $(element).find("textarea.or-editor.or-markdown-editor").each( async function() { 38 await Workbench.addStyle ('simplemde-style' ,'./modules/editor/simplemde/simplemde.min.css'); 39 await Workbench.addScript('simplemde-script','./modules/editor/simplemde/simplemde.min.js' ); 40 let textarea = this; 41 let toolbar = [{ 42 name: "bold", 43 action: SimpleMDE.toggleBold, 44 className: "or-image-icon or-image-icon--editor-bold", 45 title: "Bold", 46 }, 47 { 48 name: "italic", 49 action: SimpleMDE.toggleItalic, 50 className: "or-image-icon or-image-icon--editor-italic", 51 title: "Italic", 52 }, 53 { 54 name: "heading", 55 action: SimpleMDE.toggleHeadingBigger, 56 className: "or-image-icon or-image-icon--editor-headline", 57 title: "Headline", 58 }, 59 "|", 60 { 61 name: "quote", 62 action: SimpleMDE.toggleBlockquote, 63 className: "or-image-icon or-image-icon--editor-quote", 64 title: "Quote", 65 }, 66 { 67 name: "code", 68 action: SimpleMDE.toggleCodeBlock, 69 className: "or-image-icon or-image-icon--editor-code", 70 title: "Code", 71 }, 72 "|", 73 { 74 name: "generic list", 75 action: SimpleMDE.toggleUnorderedList, 76 className: "or-image-icon or-image-icon--editor-unnumberedlist", 77 title: "Unnumbered list", 78 }, 79 { 80 name: "numbered list", 81 action: SimpleMDE.toggleOrderedList, 82 className: "or-image-icon or-image-icon--editor-numberedlist", 83 title: "Numbered list", 84 }, 85 "|", 86 { 87 name: "table", 88 action: SimpleMDE.drawTable, 89 className: "or-image-icon or-image-icon--editor-table", 90 title: "Table", 91 }, 92 { 93 name: "horizontalrule", 94 action: SimpleMDE.drawHorizontalRule, 95 className: "or-image-icon or-image-icon--editor-horizontalrule", 96 title: "Horizontal rule", 97 }, 98 "|", 99 { 100 name: "undo", 101 action: SimpleMDE.undo, 102 className: "or-image-icon or-image-icon--editor-undo", 103 title: "Undo", 104 }, 105 { 106 name: "redo", 107 action: SimpleMDE.redo, 108 className: "or-image-icon or-image-icon--editor-redo", 109 title: "Redo", 110 }, 111 "|", 112 { 113 name: "link", 114 action: SimpleMDE.drawLink, 115 className: "or-image-icon or-image-icon--editor-link", 116 title: "Link", 117 }, 118 { 119 name: "image", 120 action: SimpleMDE.drawImage, 121 className: "or-image-icon or-image-icon--editor-image", 122 title: "Image", 123 }, 124 "|", 125 { 126 name: "guide", 127 action: "https:/"+"/simplemde.com/markdown-guide", 128 className: "or-image-icon or-image-icon--editor-help", 129 title: "Howto markdown", 130 }, 131 ]; 132 let mde = new SimpleMDE( 133 { 134 element: this, 135 toolbar: toolbar, 136 autoDownloadFontAwesome: false 137 } 138 ); 139 let codemirror = mde.codemirror; 140 codemirror.on('change',function() { 141 let newValue = codemirror.getValue(); 142 $(textarea).val( newValue ); 143 } ); 144 } ); 145 $(element).find("textarea.or-editor.or-html-editor").each( async function() { 146 let textarea = this; 147 await Workbench.addStyle ('trumbowyg-style' ,'./modules/editor/trumbowyg/ui/trumbowyg.css'); 148 await Workbench.addScript('jquery-slim-script','./modules/editor/trumbowyg/jquery-3.6.0.min.js' ); 149 let j = jQuery.noConflict(); 150 await Workbench.addScript('trumbowyg-script' ,'./modules/editor/trumbowyg/trumbowyg.js' ); 151 j.trumbowyg.svgPath = './modules/editor/trumbowyg/ui/icons.svg'; 152 j(textarea).trumbowyg(); 153 } ); 154 };
Downloadmodules/template_engine/components/html/component_editor/editor.min.js
History Wed, 1 Jun 2022 01:14:46 +0200 Jan Dankert Fix: Multiple SimpleMDE editors on 1 page. Sat, 28 May 2022 18:00:13 +0200 Jan Dankert New: DSL with a much better syntax parsing and support for assignments, conditions, ... 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.