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



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