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

root/cigala.php

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