TinyMCE WYSIWYG Editor: Adding more Blocks / HTML Tags to the Dropdown

[candidexmedia]

Hi there! This is a continuation of https://forum.getpublii.com/topic/tinymce-wysiwyg-editor-adding-more-blocks-html-tags-to-the-dropdown/

In case the old forum link no longer works: A summary of the solutions documented so far can be found here: https://gist.github.com/candidexmedia/367711a80274b4c005fd5983df97d20c

My next question is: how do I add the template plugin to the TinyMCE editor? I ask so that <details> + <summary> can be added correctly from the WYSIWYG toolbar.

[HowToMeetLadies]

Hello, the following must be added to the theme:

$theme/config.json
{ "extensions": { "postEditorConfigOverride": true } }

$theme/tinymce.override.json

{
  "plugins": "template advlist autolink autosave codesample link image lists hr pagebreak searchreplace media table paste autoresize emoticons textpattern toc",
  "toolbar1": "bold italic underline strikethrough forecolor publiilink unlink emoticons blockquote alignleft aligncenter alignright bullist numlist image gallery media table toc",
  "toolbar2": "template styleselect formatselect codesample searchreplace hr readmore undo redo restoredraft removeformat sourcecode",
  "templates": [
    { "title": "details: The Details disclosure element", "description": "The details HTML element creates a disclosure widget in which information is visible only when the widget is toggled into an 'open' state. A summary or label must be provided using the summary element.", "content": "<details><summary>Details</summary>Something small enough to escape casual notice.</details>" }
  ],
  "extended_valid_elements": "summary[*],a[*],altGlyph[*],altGlyphDef[*],altGlyphItem[*],animate[*],animateColor[*],animateMotion[*],animateTransform[*],circle[*],clipPath[*],color-profile[*],cursor[*],defs[*],desc[*],discard[*],ellipse[*],feBlend[*],feColorMatrix[*],feComponentTransfer[*],feComposite[*],feConvolveMatrix[*],feDiffuseLighting[*],feDisplacementMap[*],feDistantLight[*],feDropShadow[*],feFlood[*],feFuncA[*],feFuncB[*],feFuncG[*],feFuncR[*],feGaussianBlur[*],feImage[*],feMerge[*],feMergeNode[*],feMorphology[*],feOffset[*],fePointLight[*],feSpecularLighting[*],feSpotLight[*],feTile[*],feTurbulence[*],filter[*],font[*],font-face[*],font-face-format[*],font-face-name[*],font-face-src[*],font-face-uri[*],foreignObject[*],g[*],glyph[*],glyphRef[*],hatch[*],hatchpath[*],hkern[*],iframe[*],image[*],line[*],linearGradient[*],marker[*],mask[*],mesh[*],meshgradient[*],meshpatch[*],meshrow[*],metadata[*],missing-glyph[*],mpath[*],path[*],pattern[*],polygon[*],polyline[*],radialGradient[*],rect[*],set[*],solidcolor[*],stop[*],style[*],svg[*],switch[*],symbol[*],text[*],textPath[*],title[*],tref[*],tspan[*],unknown[*],use[*],view[*],vkern[*],publii-amp,publii-non-amp,script[*],i[*],video[*],audio[*],source[*],stream[*]",
  "valid_children": "+a[summary|details|div|p|figure|pre|h1|h2|h3|h4|h5|h6|header|footer|article|aside|section|table|blockquote|video]"
}

The built-in plugins are in:
app/src/helpers/vendor/tinymce/plugins

Best regards
Chris (b0fh)

[HowToMeetLadies]

Another option would be a plugin:

$theme/config.json

{ "extensions": {
  "postEditorConfigOverride": true,
  "postEditorCustomScript": true,
} }

$theme/tinymce.override.json

{
  "plugins": "fire advlist autolink autosave codesample link image lists hr pagebreak searchreplace media table paste autoresize emoticons textpattern toc",
  "toolbar1": "bold italic underline strikethrough forecolor publiilink unlink emoticons blockquote alignleft aligncenter alignright bullist numlist image gallery media table toc",
  "toolbar2": "fire styleselect formatselect codesample searchreplace hr readmore undo redo restoredraft removeformat sourcecode"
}

$theme/tinymce.script.js

console.log("🔥 Fire plugin v0.0.1");
tinymce.PluginManager.add('fire', function(editor, url) {
  editor.ui.registry.addButton('fire', {
    text: "🔥",
    tooltip: "Add some 🔥",
    onAction: function() { editor.insertContent("🔥🔥") }
  });
  return {
    getMetadata: function () {
      return {
        name: "Fire plugin",
        url: "https://www.🔥.com/"
      };
    }
  }
});

Pro tip: You don't have to restart Publii to apply changes, just switch to another project and back again.

🍻

[candidexmedia]

This is perfect! Thank you, once again! ✨