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.

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

  • #8035
    Avatar photo[anonymous]

    Hello,

    I’m looking to add more options to the block_formats / formatselect dropdown, much like you can add more options to the styleselect dropdown using customElements in config.json. I want to be able to add <kbd> and <mark> tags to text directly from the editor (without having to switch to Source code mode) like you can do to add headings. My issue is very similar to the one described here: https://forum.getpublii.com/topic/adding-container-tag-to-wysiwyg-block-post-editors/.

    I’ve already consulted the following pages: “How to add custom config or JS for post editor?”, “Adding custom HTML tags in TinyMCE“, “Changing user formatting controls”, Content Formatting, Feature Request: Add &nbsp support #1062. I’ve tried editing the tinymce.script.js and tinymce.override.json located in the theme root, to no avail. Adding customElements for the Editor in config.json was a breeze, but adding custom HTML tags is proving to be very difficult…

    #8057
    Avatar photo[anonymous]

    Hi,

    I am not sure, but maybe it is related to fact that the elements which you want to add are inline elements? I am not sure if I properly remember, but TinyMCE allows use of block elements in some dropdowns. Also please make sure that tags which you want to add are whitelisted in TinyMCE.

    #11699
    Avatar photo[anonymous]

    Hi Tomasz, is there any additionnal info on how to implement this for block elements (ex: <details>)?

    #11703
    Avatar photo[anonymous]

    $theme/config.json

    "customElementsMode": "advanced",
    "customElements": [
      { "title": "Submenu", "items": [
        { "title": "aside", "block": "aside", "wrapper": true, "merge_siblings": true }
      ] }
    ]

    Content formatting options#Format Type

    #11719
    Avatar photo[anonymous]

    Hi [anonymous] Unfortunately, what you’ve sent doesn’t seem to be working on my end… Does it work for you?

    I went to [Publii] > [site] > input > [theme-override] > config.json and pasted the code you shared:

    However, my WYSIWYG post editor ends up looking like this:

    #11721
    Avatar photo[anonymous]

    Here are the extensions to the editor that I’ve tried so far and their results: https://gist.github.com/candidexmedia/367711a80274b4c005fd5983df97d20c

    #11722
    Avatar photo[anonymous]

    If “advanced” is specified, then all customElements must be specified in tinymce format.

    Both types cannot be mixed. Please try just my snippet, without the other elements.

    #11724
    Avatar photo[anonymous]

    Here’s another example

    {
      "customElementsMode": "advanced",
      "customElements": [
        { "title": "Messages", "items": [
            { "title": "Info",      "block": "p", "classes": "msg msg--info" },
            { "title": "Highlight", "block": "p", "classes": "msg msg--highlight" },
            { "title": "Success",   "block": "p", "classes": "msg msg--success" },
            { "title": "Warning",   "block": "p", "classes": "msg msg--warning" }
        ] },
        { "title": "Buttons", "items": [
            { "title": "Button (default)",  "selector": "a", "classes": "btn"},
            { "title": "Button (outline)",  "selector": "a, button, input[type=button], input[type=submit]", "classes": "btn btn--outline"},
            { "title": "Button (link)",     "selector": "a, button, input[type=button], input[type=submit]", "classes": "btn btn--link"}
        ] }
      ]
    }

    screen-ceadv

    EDIT: Note, only a single sublevel is allowed.

    #11728
    Avatar photo[anonymous]
    [anonymous] wrote:

    If “advanced” is specified, then all customElements must be specified in tinymce format.

    Both types cannot be mixed. Please try just my snippet, without the other elements.

    @b0fh Incredible!!! Thank you so much, again, for your help on this forum. I was able to test this with aside, kbd, and mark, and will share my results in the gist soon. This is an absolute game changer!

    I tested span, but noticed that it only works if you add a class name. Otherwise, the editor erases it.

    I also tested details + summary, but that one was iffy… summary doesn’t get added at all (regardless of whether you use “block” or “inline”). details has to be set to block, and immediately hides the selected text, with no ability to edit or see it (which you can only do by adding a summary inside of it…).

    I’m going to keep looking through the TinyMCE docs to see if it’s possible to bundle two tags together (and potentially add default text), so that details + summary can be added together.

    #11729
    Avatar photo[anonymous]

    Yes, I had the same experiences too. Details are displayed as long as content is available, but cannot be collapsed or expanded.

    Inserting new lines nearby also causes problems, depending on the format specifications. <span style=”text-decoration: underline;”>The order is usually what matters.</span>

    If you want to insert multiple elements, take a look at “templates”.

    Not all elements are allowed by default. The list can be expanded in Publii, which can be found under “Site settings / Editor”. Add `details[*]` to the top field and `details` to the bottom.

    Functionality that goes beyond this can only be provided using a dedicated tinymce plugin. Actually, creating a plugin is quite easy and you can add new controls in the toolbar, and much more.

    #11730
    Avatar photo[anonymous]
    [anonymous] wrote:

    Not all elements are allowed by default. The list can be expanded in Publii, which can be found under “Site settings / Editor”. Add `details[*]` to the top field and `details` to the bottom.

    [anonymous] wrote:

    I tested span, but noticed that it only works if you add a class name. Otherwise, the editor erases it.

    span[*] is said to work wonders *g*

    [anonymous] wrote:

    @b0fh Incredible!!! Thank you so much, again, for your help on this forum. […] This is an absolute game changer!

    I’m glad I could help you. I just hope I don’t get beaten to death – perhaps there will be a reason why this hasn’t been documented yet. 😀

    #11738
    Avatar photo[anonymous]

    If you want to insert multiple elements, take a look at “templates”.

    Tinymce “template plugin” that allows you to insert a tag structure is deprecated.
    It will be premium starting from version 7.
    This is bad news.

    https://www.tiny.cloud/docs/tinymce/latest/template/

    #11739
    Avatar photo[anonymous]
    [anonymous] wrote:

    If you want to insert multiple elements, take a look at “templates”.

    Tinymce “template plugin” that allows you to insert a tag structure is deprecated.

    It will be premium starting from version 7.

    This is bad news.

    https://www.tiny.cloud/docs/tinymce/latest/template/

    Publii is under no obligation to use a newer version of tinymce.

    What should we do with the changes in version 6?

    We don’t need inline CSS because Publii already takes care of that.
    We don’t need automatic prettification of our texts, because this is just distracting.
    And certainly no one needs a more office like “ribbon ui”.

    The autocorrect, advanced templates and merge tags would be interesting, but just not worth the effort. If you ask me: NCARS.

    #11740
    Avatar photo[anonymous]

    @candidexmedia

    In your screenshot you have a file open: tinymce.override.json.

    I just remembered something: These two files (tinymce.*) cannot be overridden (yet). 😉

    #11742
    Avatar photo[anonymous]
    [anonymous] wrote:

    It will be premium starting from version 7.

    Yes, but in the future…

    “Template plugin” is a great way to introduce tag structures or pre-formatted elements such as images, placeholder text, custom classes, etc.

    We can ask Bob and Tomasz not to implement version 7 🙂

    #11757
    Avatar photo[anonymous]

    Hi everyone!

    Ahead of the forum migration, I’ve continued this thread in Publii’s GitHub Discussion: https://github.com/GetPublii/Publii/discussions/1340

    I still have some questions about how to implement the template plugin…