TinymceRTE enable definition lists

Support Extras
1

Howdy!

I’ve been searching for a while and seem unable to find a way to accomplish this. I am interested in adding some custom tags for our content writers. Specifically and most importantly definition lists. I am however unable to find a straightforward documentation to do so.

I found this documentation on the tinymce website which mentions a command being available for the lists plugin but it isn’t clear to me how this is meant to be used. There is no command option nor menu within tinymce on the MODx interface.

I also tried installing the TinymceWrapper instead to see if that would be any different but when I install it there are many errors and the actual editor does not load, apparently something about the service no longer being available (I don’t recall the exact message I read but it lead me to this url: How to migrate from TinyMCE 4 to TinyMCE 5

Appreciate any direction.

Thanks.

2

In general, the configuration of the TinyMCE editor can be changed with the numerous system settings the extra provides. For example with the setting tinymcerte.plugins you can define which plugins are loaded. (But the plugin “lists” is already contained in the default setting.)

I believe, the “Commands” section (of the documentation page you linked) is meant to manipulate the editor content with Javascript code from outside the editor. Here’s a blog post:

So it’s probably not what you want to use (although it’s not clear to me, what exactly you are trying to accomplish).

Don’t use this extra. It’s unmaintained and uses an older version of TinyMCE that is no longer supported.

3

TinyMceWrapper doesn’t work in MODX 3, but in 2.8 I actually prefer it to any other editor because it has features like using a code editor in code view, the ability to show the code and formatted text at the same time, and having the javascript init code all in one chunk instead of having to use system settings. All you have to do is change the “tinySrc” property setting in the plugin to “https://cdnjs.cloudflare.com/ajax/libs/tinymce/4.9.11/tinymce.min.js” (or some other version at Cloudflare); that will get rid of the message you’re seeing about a service not being available.

4

I’m wanting to have at least basic support for a definition list. So in the same manner I can create a bullet list or a numbered list I would like to have the same capabilities for a definition list. So my idea was to add a custom button that would at least output a definition list block, a definition term and a definition description within it.

It looks a little something like this:

<dl>
    <dt>Definition Term 1</dt>
        <dd>Definition Description 2</dd>
    <dt>Definition Term 2</dt>
        <dd>Definition Description 2</dd>
</dl>

Sadly I am on MODx Cloud and running version 3+ so I guess I can’t do what you are recommending but appreciate the advise.

5

I opened the developer tools in the browser and executed the code from the documentation in the “Console” tab.

tinymce.activeEditor.execCommand('InsertDefinitionList', false, {
  'list-item-attributes': {class: 'mylistitemclass'},
  'list-attributes': {id: 'mylist'}
});

It adds the tags <dl id="mylist"><dt></dt></dl> to the editor, but there is no visual representation of the tags at all. You still have to change to the “Source code” view to edit the list.

Maybe it’s better to use a MIGX TV for this or a Repeater in ContentBlocks.

6

Maybe the template plugin works for you:

  • Create an external config file (for example assets/myconfig.json) with content like this:
{
    "templates": [{
        "title": "Definition List",
        "description": "Add a definition list",
        "content": "<dl><dt>Definition Term 1</dt><dd>Definition Description 1</dd><dt>Definition Term 2</dt><dd>Definition Description 2</dd></dl>"
    }]
}
  • Set the system setting tinymcerte.external_config to your external config file → {assets_path}myconfig.json
  • Add the string “template” to the system setting tinymcerte.plugins
  • Add “template” to the system setting tinymcerte.toolbar1 (or tinymcerte.toolbar2)

In the TinyMCE editor, click the stamp icon in the toolbar and select your template to insert the list markup.

1 Like
7

Brilliant! this is exactly what I was looking for. Works perfectly!

Thanks so much.

8

Yes templates are the way to go for this. I use these to add all sorts of default setups into the editor.

9

I’ll confess I’m totally hooked on this now. I’ve created a pretty comprehensive list of HTML structure I want my content writers to abide by.

I was trying to find any sort of guide on what else can be done with this json config but couldn’t come across anything obvious, if anyone is able to point me in the right direction I would appreciate it.

I am trying to find a way to change the default “bold” formatting from using <strong>content</strong> to using <span class="fw-bold">content</span> instead (I am using bootstrap).

10

Found it, in case anyone else is looking for this specifically:

    "formats": {
        "bold": {
            "inline": "span",
            "classes": "fw-bold"
        }
    }

And here is the reference documentation: TinyMCE | formats

11

This topic was automatically closed 2 days after discussion ended and a solution was marked. New replies are no longer allowed. You can open a new topic by clicking the link icon below the original post or solution and selecting “+ New Topic”.