Tinymcerte custom formats

[claytonk]

I’m using the new tinmymcerte 2.0.1-pl (tinymce v5) and I cannot get any of the format settings to produce results in the editor. I’m trying to include some custom formats as I’ve done with tinymcewrapper in the past and assumed the custom_formats setting would allow me to do that, but no matter what I enter or remove from any of the format settings (blocks_format, headers_format, etc.) there is no change to the editor. And yes, before you ask, I am entering valid JSON.

I’ve also tried using an external config file with JSON setting pairs in the format of:
{"setting_name":"value"}
but that has no affect either. I’ve tried relative and full URLs to the file, neither produces any results and no errors in the console.

Anybody here successfully added custom formats using either the system settings or an external config file? Any help would be greatly appreciated.

Using MODX 2.8.1 on MODX Cloud and tinymcerte 2.0.1-pl

[halftrainedharry]

When I test it, changes to tinymcerte.blocks_format or tinymcerte.headers_format are visible in the editor under Format -> Formats -> Blocks and Format -> Formats -> Headers.

An external config file seems to be more tricky.
You can use {assets_path} or {core_path} in the file path in tinymcerte.external_config (e.g. {assets_path}my_config.json).
But as far as I can tell, the structure has to be quite specific to work. Something like this creates a new submenu Format -> Formats -> my Formats

{"style_formats":{"4":{"title":"my Formats","items":[{"title":"Header 1","format":"h1"}]}}}

[claytonk]

Thanks for the reply. I’m completely clueless why I’m unable to reproduce this behavior. For example, I just placed [{"title": "Figure","format":"figure"},{"title":"Div","format":"div"}] in the tinymcerte.blocks_format setting but the editor continues to show the same 4 default options (Paragraph, Blockquote, Div, and Pre) under Format → Formats → Blocks. I don’t see a Format → Formats → Blocks and Format options, so perhaps I have a different config issue?

I’ve placed your exact code in a config file at assets/components/tinymcerte/config.js and have placed {assets_path}components/tinymcerte/config.js in the tinymcerte.external_config setting and I see no change at all in the Format → Formats menu.

This is super frustrating! Any idea what might be going on?

[halftrainedharry]

What is the value of your system setting tinymcerte.style_formats?

[claytonk]

Currently its:
[{ "title": "ATS Styles", "items": [{ "title": "Figure", "format": "figure" }, { "title": "Div", "format": "div" } ] }]

I put this in as a test. I had noticed there was an error in the log indicating an invalid argument in the init plugin because my original JSON didn’t include the “item” element. The above JSON is being accepted by the init processor and it’s showing up in the source when I edit a resource in the manager but there is no change to the editor’s format options.

<script type="text/javascript">
        Ext.ns("TinyMCERTE");
        TinyMCERTE.editorConfig = {
"plugins": "advlist autolink lists charmap print preview anchor visualblocks searchreplace code fullscreen insertdatetime media table paste modxlink modximage",
"toolbar1": "undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image | code",
"toolbar2": "",
"toolbar3": "",
"connector_url": "/assets/components/tinymcerte/connector.php",
"language": "en",
"directionality": "ltr",
"menubar": "edit insert view format table tools",
"statusbar": true,
"image_advtab": true,
"paste_as_text": false,
"style_formats_merge": true,
"object_resizing": true,
"link_class_list": null,
"browser_spellcheck": false,
"content_css": [],
"image_class_list": [
    {
        "title": "none",
        "value": ""
    },
    {
        "title": "Full Width",
        "value": "img-full"
    },
    {
        "title": "Align Right Large",
        "value": "img-right-large"
    },
    {
        "title": "Align Right Small",
        "value": "img-right-small"
    },
    {
        "title": "Align Left Large",
        "value": "img-left-large"
    },
    {
        "title": "Align Left Small",
        "value": "img-left-small"
    }
],
"skin": "modx",
"relative_urls": true,
"document_base_url": "http://c0031.paas2.tx.modxcloud.com/",
"remove_script_host": true,
"entity_encoding": "named",
"enable_link_list": true,
"branding": false,
"cache_suffix": "?v=2.0.1",
"style_formats": {
    "0": {
        "title": "ATS Styles",
        "items": [
            {
                "title": "Figure",
                "format": "figure"
            },
            {
                "title": "Div",
                "format": "div"
            }
        ]
    },
    "4": {
        "title": "my Formats",
        "items": [
            {
                "title": "Header 1",
                "format": "h1"
            }
        ]
    }
}
        Ext.onReady(function(){
            TinyMCERTE.loadForTVs();
        });
    </script>

[halftrainedharry]

In my newly installed extra the value of tinymcerte.style_formats is

[{"title": "Headers", "items": "headers_format"},{"title": "Inline", "items": "inline_format"},{"title": "Blocks", "items": "blocks_format"},{"title": "Alignment", "items": "alignment_format"}]

With this value the code then reads the content of the “items” from tinymcerte.headers_format, tinymcerte.inline_format etc.

[claytonk]

Yes, it was that way when I first installed it as well, but alterations to any of the block_format, alignment_format, etc. settings had no affect on the editor. I’ve just uninstalled, reinstalled the extra and upgraded to 2.8.3 and am seeing some changes to the block formats now. No idea what got messed up, but it appears to be working for the moment.