Commit 7548f259 authored by Pablo Rauzy's avatar Pablo Rauzy
Browse files

refactor TinyMCE javascript setup to allow for more powerful editor in entries

parent 849a6b01
......@@ -163,6 +163,7 @@ while ($ent = $res->fetchArray(SQLITE3_ASSOC)) {
$entries[$ent['datetime']] = $ent;
}
// List files of given extensions
function list_files ($ext) {
global $settings;
$flags = ($ext === false) ? GLOB_ONLYDIR | GLOB_MARK : 0;
......@@ -172,6 +173,95 @@ function list_files ($ext) {
glob($settings['dir'].'{*,*/*,*/*/*,*/*/*/*}'.$ext, GLOB_BRACE | $flags));
}
// Print TinyMCE setup JavaScript
function tinymce_setup ($mode = 'page') {
global $config, $settings, $pages, $groups;
?><script>
tinymce.init({
selector: '#content',
inline: true,
plugins: [ 'advlist', 'autolink', 'lists', 'link', 'image', 'charmap', 'hr', 'anchor', 'autosave', 'save', 'searchreplace', 'wordcount', 'visualblocks', 'visualchars', 'code', 'fullscreen', 'insertdatetime', 'media', 'nonbreaking', 'table', 'contextmenu', 'template', 'emoticons', 'paste', 'textpattern', 'codesample' ],
toolbar1: 'save | undo redo | styleselect | bold italic forecolor backcolor removeformat',
toolbar2: 'alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image media',
style_formats: [
{ title: 'Headers', items: [
<?php if ($mode != 'entry'): ?>{ title: 'Header 2', format: 'h2' },<?php endif; ?>
{ title: 'Header 3', format: 'h3' },
{ title: 'Header 4', format: 'h4' },
{ title: 'Header 5', format: 'h5' },
{ title: 'Header 6', format: 'h6' }
] },
{ title: 'Inline', items: [
{ title: 'Bold', icon: 'bold', format: 'bold' },
{ title: 'Italic', icon: 'italic', format: 'italic' },
{ title: 'Underline', icon: 'underline', format: 'underline' },
{ title: 'Strikethrough', icon: 'strikethrough', format: 'strikethrough' },
{ title: 'Superscript', icon: 'superscript', format: 'superscript' },
{ title: 'Subscript', icon: 'subscript', format: 'subscript' },
{ title: 'Code', icon: 'code', format: 'code' },
{ title: 'No decoration link', icon: 'link', selector: 'a', classes: 'nodec' }
] },
{ title: 'Blocks', items: [
{ title: 'Paragraph', format: 'p' },
{ title: 'Paragraph.info', selector: 'p', classes: 'info' },
{ title: 'Blockquote', format: 'blockquote' },
{ title: 'Div', format: 'div' },
{ title: 'Div gauche', selector: 'div', classes: 'floatleft' },
{ title: 'Div droite', selector: 'div', classes: 'floatright' },
{ title: 'Pre', format: 'pre' },
] },
{ title: 'Alignment', items: [
{ title: 'Left', icon: 'alignleft', format: 'alignleft' },
{ title: 'Center', icon: 'aligncenter', format: 'aligncenter' },
{ title: 'Right', icon: 'alignright', format: 'alignright' },
{ title: 'Justify', icon: 'alignjustify', format: 'alignjustify' }
] }
],
image_advtab: true,
image_caption: true,
image_class_list: [
{ title: 'Inline', value: '' },
{ title: 'Centered', value: 'centered' },
{ title: 'Float left', value: 'floatleft' },
{ title: 'Float right', value: 'floatright' }
],
image_list: [
<?php $img = list_files(array('png', 'gif', 'jpg', 'svg'));
foreach ($img as $i): ?>
{ title: '<?php echo addslashes($i); ?>', value: '<?php echo $settings['url'],addslashes($i); ?>' },
<?php endforeach; ?>
],
link_list: [
<?php $target = array_filter($pages, function ($p) { return !in_array($p['status'], array('lnk', 'del', 'newdel')); });
foreach ($target as $p): ?>
{ title: '<?php echo addslashes(htmlspecialchars_decode(strip_tags($groups[$p['grp']]['name']).' / '.$p['title'], ENT_HTML5 | ENT_QUOTES)); ?>', value: '<?php echo $relroot,addslashes(preg_replace('/\/?index\.html$/', '/', $p['file'])); ?>' },
<?php endforeach; ?>
{ title: 'Files', menu: [
<?php $files = list_files($config['fileext']);
foreach ($files as $f): ?>
{ title: '<?php echo addslashes($f); ?>', value: '<?php echo $settings['url'],addslashes($f); ?>' },
<?php endforeach; ?>
] }
],
document_base_url: '<?php echo $settings['url'],(dirname($file) == '.' ? '' : dirname($file).'/'); ?>',
relative_urls: true,
setup: function (tmce) {
tmce.on('change', function (e) {
document.getElementById('warning').innerHTML = 'You have unsaved modifications!';
document.getElementById('<?php echo $mode; ?>_content').value = tmce.getContent();
});
},
save_onsavecallback: function () {
document.getElementById('<?php echo $mode; ?>_content').value = tinymce.get('content').getContent();
document.getElementById('<?php echo $mode; ?>_form').submit();
},
entity_encoding: 'raw',
extended_valid_elements: 'script[src|type]'
});
</script>
<?php
}
// Page rendering function
function render ($file, $mode='edit', $entry_dt='NEW') {
global $db, $config, $settings, $pages, $groups, $entries;
......@@ -306,33 +396,8 @@ function render ($file, $mode='edit', $entry_dt='NEW') {
document.getElementById('entry_title').value = this.innerText;
});
document.getElementById('entry_content').parentNode.style.display = 'none';
tinymce.init({
selector: '#content',
inline: true,
menubar: false,
plugins: [ 'save', 'autosave', 'lists', 'link', 'image', 'media' ],
block_formats: 'Paragraph=p;Title=h3;Subtitle=h4;Teletype=pre',
toolbar: 'save | undo redo | formatselect bold italic underline strikethrough inlinecode forecolor backcolor removeformat | bullist numlist | alignleft aligncenter alignright alignjustify | link image media',
setup: function (tmce) {
tmce.on('change', function (e) {
document.getElementById('warning').innerHTML = 'You have unsaved modifications!';
document.getElementById('entry_content').value = tmce.getContent();
});
tmce.ui.registry.addToggleButton('inlinecode', { icon: 'code', onAction: function () {
tmce.execCommand('mceToggleFormat', false, 'code');
}, onpostrender: function () {
var btn = this; tmce.on('init', function () {
tmce.formatter.formatChanged('code', function (state) { btn.active(state); });
});
}});
},
save_onsavecallback: function () {
document.getElementById('entry_content').value = tinymce.get('content').getContent();
document.getElementById('entry_form').submit();
},
entity_encoding: 'raw',
});
</script>
<?php tinymce_setup('entry'); ?>
</div>
<?php else: // page ?>
<div id="main">
......@@ -345,90 +410,8 @@ function render ($file, $mode='edit', $entry_dt='NEW') {
<p><button type="submit">Save</button></p>
</form>
<script src="https://unpkg.com/tinymce@5.6.1/tinymce.min.js"></script>
<script>
document.getElementById('page_form').style.display = 'none';
tinymce.init({
selector: '#content',
inline: true,
plugins: [ 'advlist', 'autolink', 'lists', 'link', 'image', 'charmap', 'hr', 'anchor', 'autosave', 'save', 'searchreplace', 'wordcount', 'visualblocks', 'visualchars', 'code', 'fullscreen', 'insertdatetime', 'media', 'nonbreaking', 'table', 'contextmenu', 'template', 'emoticons', 'paste', 'textpattern', 'codesample' ],
toolbar1: 'save | undo redo | styleselect | bold italic forecolor backcolor removeformat',
toolbar2: 'alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image media',
style_formats: [
{ title: 'Headers', items: [
{ title: 'Header 2', format: 'h2' },
{ title: 'Header 3', format: 'h3' },
{ title: 'Header 4', format: 'h4' },
{ title: 'Header 5', format: 'h5' },
{ title: 'Header 6', format: 'h6' }
] },
{ title: 'Inline', items: [
{ title: 'Bold', icon: 'bold', format: 'bold' },
{ title: 'Italic', icon: 'italic', format: 'italic' },
{ title: 'Underline', icon: 'underline', format: 'underline' },
{ title: 'Strikethrough', icon: 'strikethrough', format: 'strikethrough' },
{ title: 'Superscript', icon: 'superscript', format: 'superscript' },
{ title: 'Subscript', icon: 'subscript', format: 'subscript' },
{ title: 'Code', icon: 'code', format: 'code' },
{ title: 'No decoration link', icon: 'link', selector: 'a', classes: 'nodec' }
] },
{ title: 'Blocks', items: [
{ title: 'Paragraph', format: 'p' },
{ title: 'Paragraph.info', selector: 'p', classes: 'info' },
{ title: 'Blockquote', format: 'blockquote' },
{ title: 'Div', format: 'div' },
{ title: 'Div gauche', selector: 'div', classes: 'floatleft' },
{ title: 'Div droite', selector: 'div', classes: 'floatright' },
{ title: 'Pre', format: 'pre' },
] },
{ title: 'Alignment', items: [
{ title: 'Left', icon: 'alignleft', format: 'alignleft' },
{ title: 'Center', icon: 'aligncenter', format: 'aligncenter' },
{ title: 'Right', icon: 'alignright', format: 'alignright' },
{ title: 'Justify', icon: 'alignjustify', format: 'alignjustify' }
] }
],
image_advtab: true,
image_caption: true,
image_class_list: [
{ title: 'Inline', value: '' },
{ title: 'Centered', value: 'centered' },
{ title: 'Float left', value: 'floatleft' },
{ title: 'Float right', value: 'floatright' }
],
image_list: [
<?php $img = list_files(array('png', 'gif', 'jpg', 'svg'));
foreach ($img as $i): ?>
{ title: '<?php echo addslashes($i); ?>', value: '<?php echo $settings['url'],addslashes($i); ?>' },
<?php endforeach; ?>
],
link_list: [
<?php $target = array_filter($pages, function ($p) { return !in_array($p['status'], array('lnk', 'del', 'newdel')); });
foreach ($target as $p): ?>
{ title: '<?php echo addslashes(htmlspecialchars_decode(strip_tags($groups[$p['grp']]['name']).' / '.$p['title'], ENT_HTML5 | ENT_QUOTES)); ?>', value: '<?php echo $relroot,addslashes(preg_replace('/\/?index\.html$/', '/', $p['file'])); ?>' },
<?php endforeach; ?>
{ title: 'Files', menu: [
<?php $files = list_files($config['fileext']);
foreach ($files as $f): ?>
{ title: '<?php echo addslashes($f); ?>', value: '<?php echo $settings['url'],addslashes($f); ?>' },
<?php endforeach; ?>
] }
],
document_base_url: '<?php echo $settings['url'],(dirname($file) == '.' ? '' : dirname($file).'/'); ?>',
relative_urls: true,
setup: function (tmce) {
tmce.on('change', function (e) {
document.getElementById('warning').innerHTML = 'You have unsaved modifications!';
document.getElementById('page_content').value = tmce.getContent();
});
},
save_onsavecallback: function () {
document.getElementById('page_content').value = tinymce.get('content').getContent();
document.getElementById('page_form').submit();
},
entity_encoding: 'raw',
extended_valid_elements: 'script[src|type]'
});
</script>
<script>document.getElementById('page_form').style.display = 'none';</script>
<?php tinymce_setup('page'); ?>
<article id="entries_menu">
<a href="<?php echo CIGALA_PHP,'?entry=',$file; ?>:NEW">new entry</a>
</article>
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment