This commit is contained in:
indeferend
2021-05-23 06:26:34 +05:00
commit df825e3d2f
56 changed files with 24076 additions and 0 deletions

View File

@@ -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>

47
TPL/admin/blog/list.tpl Normal file
View File

@@ -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>

16
TPL/admin/main.tpl Normal file
View File

@@ -0,0 +1,16 @@
<!DOCTYPE html>
<html lang="ru">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title><?=$tpl->meta['title'];?></title>
<meta name="description" content="<?=$tpl->meta['description'];?>">
<meta name="keywords" content="<?=$tpl->meta['keywords'];?>">
<meta name="viewport" content="width=device-width,initial-scale=1">
<?=$tpl->head_cont;?>
</head>
<body>
<?=$tpl->cont_top;?>
<?=$tpl->fetch('main_body');?>
<?=$tpl->cont_bottom;?>
</body>
</html>

4
TPL/admin/main_body.tpl Normal file
View File

@@ -0,0 +1,4 @@
<!--тут будет шапка и меню...-->
<div class="page_cont" style="max-width:1000px; margin:20px auto;">
<?=$tpl->mod_cont;?>
</div>

66
TPL/admin/static_list.php Normal file
View File

@@ -0,0 +1,66 @@
<?php
$st_cnf = &LE::$TPL->static_list;
$st_dep = &LE::$TPL->static_dep;
$st_cnf[] = [
'mod'=>'highlight.js',
'pos'=>'top',
'type'=>'css',
'link'=>'//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.7.2/styles/default.min.css'];
$st_cnf[] = [
'mod'=>'highlight.js',
'pos'=>'bottom',
'type'=>'js',
'link'=>'//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.7.2/highlight.min.js'];
$st_cnf[] = [
'mod'=>'le_form',
'type'=>'css',
'link'=>'/pub/css/le_form.css'];
$st_cnf[] = [
'mod'=>'ckeditor5',
'type'=>'js',
'link'=>'/pub/js/ckeditor5.js'];
$st_cnf[] = [
'mod'=>'codemirror',
'type'=>'css',
'link'=>'https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.48.4/codemirror.min.css'];
$st_cnf[] = [
'mod'=>'tui-editor',
'type'=>'css',
'link'=>'https://uicdn.toast.com/editor/latest/toastui-editor.min.css'];
$st_cnf[] = [
'mod'=>'tui-editor',
'type'=>'js',
'link'=>'https://uicdn.toast.com/editor/latest/toastui-editor-all.min.js'
//'link'=>'/pub/js/tui-editor.js'
];
$st_cnf[] = [
'mod'=>'jquery',
'type'=>'js',
'link'=>'https://code.jquery.com/jquery-3.6.0.slim.min.js'];
$st_cnf[] = [
'mod'=>'txt_cont',
'type'=>'css',
'link'=>'/pub/css/txt_cont.css'];
$st_cnf[] = [
'mod'=>'embedly',
'type'=>'js',
'link'=>'//cdn.embedly.com/widgets/platform.js'];
$st_cnf[] = [
'mod'=>'le_crud',
'type'=>'js',
'link'=>'/pub/js/le_crud.js'];
$st_dep['tui-editor']=['codemirror','oth'];

View File

@@ -0,0 +1,31 @@
<?$tpl->need_static(['-tui-editor','jquery','le_form','ckeditor5','highlight.js'])?>
<h2>Список статей</h2>
<?foreach($cont_list as $id=>$cont):?>
<a href="/editor_test/edit:<?=$id?>" class="el_cont">
<h3>Статья <?=$id?></h3>
<div class="el_cont_content">
<?=$cont['html']?>
</div>
</a>
<?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>

View File

@@ -0,0 +1,213 @@
<?$tpl->need_static(['tui-editor','jquery','le_form','ckeditor5','highlight.js'])?>
<form class="le_form le_shadow">
<span class="le_form_head">Заголовок формы</span>
<div class="le_he">
<label for="inp_name" class="le_fl"><span>Горизонтальный инпут</span></label>
<div class="le_inp"><input type="text" value="kokoko" id="inp_name"></div>
</div>
<div class="le_ve">
<label for="inp_name" class="le_fl"><span>Вертикальный инпут</span></label>
<div class="le_inp"><input type="text" value="kokoko" id="inp_name"></div>
</div>
<div class="le_he">
<label for="inp_name" class="le_fl"><span>Горизонтальный инпут у которого допустим пару строчек, строчки тут две <sup>*</sup></span></label>
<div class="le_inp"><input type="text" value="kokoko" id="inp_name"></div>
</div>
<div class="le_he">
<div for="select_koko" class="le_fl"><span>Горизонтальный селект</span></div>
<div class="le_inp">
<select id="select_koko">
<option>select</option>
<option>select</option>
<option>select</option>
<option>select</option>
<option>select</option>
</select>
</div>
</div>
<div class="le_he le_me">
<div for="inp_name" class="le_fl"><span>Радиокнопки</span></div>
<div class="le_inp">
<label><input type="radio" name="radio1">Radio1</label>
<label><input type="radio" name="radio1">Radio2</label>
</div>
</div>
<div class="le_ve le_me">
<div for="inp_name" class="le_fl"><span>Радиокнопки вертикально</span></div>
<div class="le_inp">
<label><input type="radio" name="radio1">Radio1</label>
<label><input type="radio" name="radio1">Radio2</label>
</div>
</div>
<div class="le_he le_me">
<div for="inp_name" class="le_fl"><span>Чекбоксы<sup>*</sup></span></div>
<div class="le_inp">
<label><input type="checkbox" name="checkbox1">checkbox1</label>
<label><input type="checkbox" name="checkbox1">checkbox2</label>
</div>
</div>
<div class="le_he le_me le_meh">
<div for="inp_name" class="le_fl"><span>Радиокнопки в линию</span></div>
<div class="le_inp">
<label><input type="radio" name="radio1">Radio1</label>
<label><input type="radio" name="radio1">Radio2</label>
</div>
</div>
<div class="le_he">
<label for="inp_name" class="le_fl"><span>Дата <sup>*</sup></span></label>
<div class="le_inp"><input type="date" value="kokoko" id="inp_name"></div>
</div>
<div class="le_ve">
<label for="inp_name" class="le_fl"><span>Текст</span></label>
<div class="le_inp"><textarea class="cktxt">тролололо</textarea></div>
</div>
<div class="le_he">
<label for="inp_name" class="le_fl"><span>Текст горизонтально</span></label>
<div class="le_inp"><textarea>тролололо</textarea></div>
</div>
<div class="le_ve">
<label for="inp_name" class="le_fl"><span>Текст</span></label>
<div class="le_inp"><textarea class="tu-editor">тролололо</textarea></div>
</div>
<div class="le_bbl">
<button class="le_btn" type="submit">Сохранить</button>
<button class="le_btn le_btn_blue" type="submit">Синяя</button>
<button class="le_btn le_btn_red" type="submit">Красная</button>
<button class="le_btn le_btn_green" type="submit">Зеленая</button>
</div>
</form>
<br>
<br>
<br>
<br>
<h2>Markdown Editor from ToastUI</h2>
<div id="editor"></div>
<a href="#" onclick="alert(editor.getHtml()); return false;">html get</a> |
<a href="#" onclick="alert(editor.getMarkdown()); return false;">markdown get</a> |
<a href="#" onclick="hljs.highlightAll(); return false;">Code hilight</a> |
<script>
window.addEventListener('load', (event) =>
{
function uploadImage(blob) {
let formData = new FormData();
formData.append("upl_img", blob, blob.name);
formData.append("opt", 'upload_img');
formData.append("clear", 'yes');
return fetch('/ui_test', {
method: 'POST',
body: formData
}).then(response => {
if (response.ok) {
return response.json();
}
throw new Error('Server or network error');
});
};
function onAddImageBlob(blob, callback) {
uploadImage(blob)
.then(response => {
if (!response.success) {
throw new Error('Validation error');
}
callback(response.data.url, 'alt text');
}).catch(error => {
console.log(error);
});
};
const editor = new toastui.Editor({
el: document.querySelector('#editor'),
previewStyle: 'vertical',
height: '500px',
initialValue: '### hello world \n```\n<?="<?"?>php\n```',
hooks:
{
addImageBlobHook:function(blob, callback)
{
let formData = new FormData();
formData.append("upl_img", blob, blob.name);
formData.append("opt", 'upload_img');
formData.append("clear", 'yes');
fetch('/ui_test', {method: 'POST',body: formData
}).then(resp => resp.json()).then(resp=>{
if (!resp.success) {throw new Error('Validation error');}
callback(resp.data.url, 'alt text');
});
}
}
});
editor.on('change',function(e){
document.querySelectorAll('div.te-preview pre').forEach(block => {hljs.highlightBlock(block);});
});
hljs.highlightAll();
$(function() {
$('#nav-icon6').click(function(){
$(this).toggleClass('open');
});
});
});
</script>
<hr/>
<button class="c-hamburger c-hamburger--rot">
<span>toggle menu</span>
</button>
<button class="c-hamburger c-hamburger--htx">
<span>toggle menu</span>
</button>
<button class="c-hamburger c-hamburger--htla">
<span>toggle menu</span>
</button>
<button class="c-hamburger c-hamburger--htra">
<span>toggle menu</span>
</button>
<div id="nav-icon6">
<span></span>
</div>

View File

@@ -0,0 +1,26 @@
<?$tpl->need_static(['tui-editor','jquery','le_form','ckeditor5','highlight.js'])?>
<a href="/editor_test">Назад к списку</a>
<h2>Редактор статьи</h2>
<div class="txt_cont" id="editor" style="overflow:hidden;">
kokoko
</div>
<script>
window.addEventListener('load', (event) =>
{
ClassicEditor.create( document.querySelector( '#editor' ) )
.catch( error => {
console.error( error );
} );
/* editor.on('change',function(e){
document.querySelectorAll('div.te-preview pre').forEach(block => {hljs.highlightElement(block);});
});*/
hljs.highlightAll();
});
</script>

View File

@@ -0,0 +1,128 @@
<?$tpl->need_static(['tui-editor','jquery','le_form','ckeditor5','highlight.js'])?>
<a href="/editor_test">Назад к списку</a>
<h2>Редактор статьи</h2>
<div id="editor" style="overflow:hidden;"></div>
<a href="#" onclick="alert(editor.getHtml()); return false;">html get</a> |
<a href="#" onclick="alert(editor.getMarkdown()); return false;">markdown get</a>
<button onclick="save_md_cont();">Сохранить</button>
<script>
editor = false;
function save_md_cont()
{
cont_md = editor.getMarkdown();
cont_html = editor.getHtml();
const formData = new FormData();
formData.append('clear', 'yes');
formData.append('ajax', 'yes');
formData.append('mod', 'save_content');
formData.append('data[md_cont]', cont_md);
formData.append('data[html_cont]', cont_html);
formData.append('data[id]', <?=$id?>);
fetch('/editor_test', {method: 'POST',body: formData});
}
window.addEventListener('load', (event) =>
{
editor = new toastui.Editor({
el: document.querySelector('#editor'),
previewStyle: 'vertical',
height: '500px',
<?/*initialValue: "<?=$md_cont?>",*/?>
initialValue: <?=json_encode($md_cont)?>,
hooks:
{
addImageBlobHook:function(blob, callback)
{
let formData = new FormData();
formData.append("upl_img", blob, blob.name);
formData.append("mod", 'upload_img');
formData.append("ajax", 'yes');
fetch('/editor_test', {method: 'POST',body: formData
}).then(resp => resp.json()).then(resp=>{
if (!resp.success) {throw new Error('Validation error');}
callback(resp.data.url, 'alt text');
});
}
},
customHTMLRenderer:
{
image(node, context)
{
const { destination } = node;
const { getChildrenText, skipChildren } = context;
console.log(node);
skipChildren();
return {
type: 'html',
//content: '<figure><img src="'+destination+'"></figure>'
content: '<span><img src="'+destination+'"></span>'
};
/*return [
{
type: 'openTag',
tagName: 'img',
selfClose: true,
attributes: {
src: destination,
alt: getChildrenText(node)+"kokoko",
title: "zhopa"}
}
];*/
return [
{ type: 'openTag', tagName: 'figure'},
{
type: 'openTag',
tagName: 'img',
selfClose: true,
attributes: {
src: destination,
alt: getChildrenText(node)+"kokoko",
title: "zhopa"}
}
,
//{ type: 'openTag', tagName: 'figcaption' },
//{ type: 'text', content: node.title },
//{ type: 'closeTag', tagName: 'figcaption' },
{ type: 'closeTag', tagName: 'figure' }
];
}
}
});
/* editor.on('change',function(e){
document.querySelectorAll('div.te-preview pre').forEach(block => {hljs.highlightElement(block);});
});*/
hljs.highlightAll();
});
</script>

16
TPL/main/main.tpl Normal file
View File

@@ -0,0 +1,16 @@
<!DOCTYPE html>
<html lang="ru">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title><?=$tpl->meta['title'];?></title>
<meta name="description" content="<?=$tpl->meta['description'];?>">
<meta name="keywords" content="<?=$tpl->meta['keywords'];?>">
<meta name="viewport" content="width=device-width,initial-scale=1">
<?=$tpl->head_cont;?>
</head>
<body>
<?=$tpl->cont_top;?>
<?=$tpl->fetch('main_body');?>
<?=$tpl->cont_bottom;?>
</body>
</html>

4
TPL/main/main_body.tpl Normal file
View File

@@ -0,0 +1,4 @@
<!--тут будет шапка и меню...-->
<div class="page_cont" style="max-width:1000px; margin:20px auto;">
<?=$tpl->mod_cont;?>
</div>

53
TPL/main/static_list.php Normal file
View File

@@ -0,0 +1,53 @@
<?php
$st_cnf = &LE::$TPL->static_list;
$st_dep = &LE::$TPL->static_dep;
$st_cnf[] = [
'mod'=>'highlight.js',
'pos'=>'top',
'type'=>'css',
'link'=>'//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.7.2/styles/default.min.css'];
$st_cnf[] = [
'mod'=>'highlight.js',
'pos'=>'bottom',
'type'=>'js',
'link'=>'//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.7.2/highlight.min.js'];
$st_cnf[] = [
'mod'=>'le_form',
'type'=>'css',
'link'=>'/pub/css/le_form.css'];
$st_cnf[] = [
'mod'=>'ckeditor5',
'type'=>'js',
'link'=>'https://cdn.ckeditor.com/ckeditor5/27.1.0/classic/ckeditor.js'];
$st_cnf[] = [
'mod'=>'codemirror',
'type'=>'css',
'link'=>'https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.48.4/codemirror.min.css'];
$st_cnf[] = [
'mod'=>'tui-editor',
'type'=>'css',
'link'=>'https://uicdn.toast.com/editor/latest/toastui-editor.min.css'];
$st_cnf[] = [
'mod'=>'tui-editor',
'type'=>'js',
'link'=>'https://uicdn.toast.com/editor/latest/toastui-editor-all.min.js'
//'link'=>'/pub/js/tui-editor.js'
];
$st_cnf[] = [
'mod'=>'jquery',
'type'=>'js',
'link'=>'https://code.jquery.com/jquery-3.6.0.slim.min.js'];
$st_dep['tui-editor']=['codemirror','oth'];