Draft v1

TPL/admin/blog/edit_item.tpl

@@ -0,0 +1,162 @@
+<?$tpl->need_static(['-tui-editor','jquery','le_form','ckeditor5','highlight.js','txt_cont'])?>
+<a href="/admin/blog">Назад к списку</a>
+<h2>Редактор статьи</h2>
+
+<div id="editor" class="txt_cont">
+<h1><?=$head?></h1>
+<?=$html_cont?>
+</div>
+
+
+<button onclick="save_cont();">Сохранить</button>
+
+<div id="result_cont" class="txt_cont">
+load
+</div>
+
+
+
+<script>
+editor = false;
+
+function save_cont()
+{
+    cont_html = editor.getData();
+    //cont_body = cont_html.getTitle();
+	//alert(cont_body);
+    const formData = new FormData();
+    formData.append('clear', 'yes');
+    formData.append('ajax', 'yes');
+    formData.append('mod', 'save_content');
+    formData.append('data[html_cont]', cont_html);
+    formData.append('data[id]', <?=$id?>);
+
+     fetch('/admin/blog', {method: 'POST',body: formData}).then((resp)=>{return resp.json()}).then(
+		 (resp)=>{
+			 if (!resp.success) return false;
+			 window.location.href="/admin/blog/";
+		 }
+	 );
+
+	//alert(response);
+	//console.log(response);
+
+
+    
+}
+
+
+
+window.addEventListener('load', (event) => 
+{    
+var options = {
+				
+				toolbar: {
+					items: [
+						'bold',
+						'italic',
+						'underline',
+						'strikethrough',
+						'link',
+						'subscript',
+						'superscript',
+						'-',
+						'code',
+						'fontColor',
+						'removeFormat',
+						'undo',
+						'redo'
+					],
+					shouldNotGroupWhenFull: true
+				},
+				language: 'ru',
+				blockToolbar: [
+					'codeBlock',
+					'horizontalLine',
+					'htmlEmbed',
+					'imageUpload',
+					'imageInsert',
+					'indent',
+					'outdent',
+					'numberedList',
+					'bulletedList',
+					'blockQuote',
+					'mediaEmbed',
+					'insertTable',
+					'alignment'
+				],
+				image: {
+					toolbar: [
+						'imageTextAlternative',
+						'imageStyle:full',
+						'imageStyle:side',
+						'linkImage'
+					]
+				},
+				table: {
+					contentToolbar: [
+						'tableColumn',
+						'tableRow',
+						'mergeTableCells',
+						'tableCellProperties',
+						'tableProperties'
+					]
+				},
+				licenseKey: '',
+                mediaEmbed: {previewsInData:true},
+                simpleUpload: {uploadUrl: '/admin/blog'}
+				
+				
+			};
+
+
+
+
+		BalloonBlockEditor
+			.create( document.querySelector( '#editor' ), options )
+			.then( editor => {
+				window.editor = editor;
+	    		document.querySelector( '#result_cont' ).innerHTML=editor.getData();
+
+
+				editor.model.document.on( 'change:data', () => 
+				{
+	    			console.log( 'The data has changed!' );
+	    			document.querySelector( '#result_cont' ).innerHTML=editor.getData();
+                    
+				} 
+				);
+
+		
+				
+				
+				
+		
+				
+				
+				
+			} )
+			.catch( error => {
+				console.error( 'Oops, something went wrong!' );
+				console.error( 'Please, report the following error on https://github.com/ckeditor/ckeditor5/issues with the build id and the error stack trace:' );
+				console.warn( 'Build id: 9v07c6uegbjg-a3pt58397xor' );
+				console.error( error );
+			} );    
+
+
+
+
+});
+
+
+
+</script>
+
+<style>
+		#editor,
+        .txt_cont {
+			border: 1px solid #d0d0d0;
+			padding: 20px 30px;
+			margin-top:40px;
+		}
+</style>

TPL/admin/blog/list.tpl

@@ -0,0 +1,47 @@
+<?$tpl->need_static(['-tui-editor','jquery','le_form','ckeditor5','highlight.js','txt_cont','le_crud'])?>
+
+<h2>Список статей</h2>
+<a href="/admin/blog/edit:0">Создать</a>
+
+
+<?foreach($cont_list as $id=>$cont):?>
+<div href="/admin/blog/edit:<?=$id?>" class="el_cont" id="el_<?=$id?>">
+<h3><a href="/admin/blog/edit:<?=$id?>"><?=empty($cont['head'])?"Статья ".$id: $cont['head']?></a>
+<button style="" onclick="le_crud.rem(<?=$id?>,'#el_<?=$id?>')">Удалить</button>
+</h3>
+
+<div class="el_cont_content txt_cont">
+<?=$cont['html']?>
+</div>
+</div>
+<?endforeach;?>
+
+
+<style>
+.el_cont {
+    text-decoration:none;
+    display:block;
+    color:inherit;
+    border:1px solid #d0d0d0;
+    margin: 20px;
+    padding: 20px;
+
+}
+
+.el_cont:hover {background:#fafafa;}
+
+.el_cont_content {border: 2px dotted #d9d9d9;padding:10px;}
+
+</style>
+
+
+<script>
+window.addEventListener('load', (event) => 
+{    
+
+document.querySelectorAll('pre code').forEach((block) => {
+    hljs.highlightElement(block);
+  }); 
+});
+
+</script>