openrat-cms

Unnamed repository; edit this file 'description' to name the repository.
Log | Files | Refs | README

editor.min.js (4196B)

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