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 };



Download modules/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.