We're evolving to serve you better! This current forum has transitioned to read-only mode. For new discussions, support, and engagement, we've moved to GitHub Discussions.

Adding custom HTML tags in TinyMCE

March 14, 2022 at 10:04 am #7061

[anonymous]

Hello,

I would like to add a tag structure through the Tinymce editor (eg: two column table with classes, div structure with classes, etc.).
This makes some operations simple for those unfamiliar with html.
I found this article on stackoverflow: link

Could it work on Publii?

Thank you

April 18, 2022 at 9:42 pm #7301
[anonymous]
Yup! it is possible with the TinyMCE plugin template.

In this example (file: tinymce.override.json) I have configured the plugin to insert a table structure with custom class and random image.
It is possible to configure more templates that are activated with the new button in the toolbar2.

For more informations see https://www.tiny.cloud/docs/plugins/opensource/template/#
```
{
    "toolbar2": "template styleselect formatselect searchreplace hr readmore removeformat undo redo restoredraft charmap nonbreaking visualchars visualblocks sourcecode",
    "plugins": "template charmap nonbreaking advlist autolink autosave link image lists hr pagebreak searchreplace media table paste autoresize emoticons textpattern toc visualchars visualblocks",
    "template_replace_values": {
        "immagine": "",
        "testo": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
    },
    "template_preview_replace_values": {
        "immagine": "",
        "testo": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
    },
    "templates": [
        {
            "title": "Griglia home",
            "description": "Griglia a due colonne responsive per home page",
            "content": "<table class='grid-2c'<tr><td>{$immagine}</td><td>{$testo}</td></tr></table>"
        }
    ]
}
```
August 10, 2022 at 2:28 am #8028

[anonymous]

Hi gpsblues! Thank you for sharing this!

Do you know how to use the tinymce.override.json to override the block format dropdown? I’m trying to add custom HTML tag blocks (exactly like the issue listed here: https://forum.getpublii.com/topic/adding-container-tag-to-wysiwyg-block-post-editors/#post-8027)

August 10, 2022 at 3:21 am #8029

Bob

Have a look at this topic: https://github.com/GetPublii/Publii/issues/1062