Download
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

  • #7061
    Avatar photo[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

    #7301
    Avatar photo[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>"
            }
        ]
    }
    #8028
    Avatar photo[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)

    #8029
    Avatar photoBob