Add class/id to path in TinyMCE4

Question

Quick question:

Is there a way to add class and/or ID of the elements in the path of TinyMCE status bar under content?

score 0 · Answer 1 · answered Nov 27 '18 at 02:10

0

TinyMCE has no such capability built into its status bar. If you wanted to add that you could do so by modifying the code. I would note that with any type of longer ID or Class labels that status bar will get filled up quickly which is why it does not do so by default.

answered Nov 27 '18 at 02:10

Michael Fromin

13,131
2
20
31

Thank you @Michael, can you suggest a code snippet that I could put into the plugin file that would accomplish this? My content isn't deeper than 3 tags so class and ID tags will not make the path bar too busy. – Enic Nov 27 '18 at 11:16
I have never tried to do this myself so I have no idea what code you would actually need to make this happen. What specific issue are you having in your attempts to create code to do what you need? – Michael Fromin Nov 27 '18 at 14:37

score 0 · Answer 2 · answered Dec 05 '18 at 20:36

The Elements in the Statusbar have a bunch of classes from Tiny Editor, you can examine it in the browser (chrome or firefox) with f12.

From there, it is no problem to override the current styling with some code like

.mce-statusbar.mce-container {
    position         : relative;
    height           : 0;
    margin-top       : -20px;
    opacity          : 0.5;
    background-color :#fff;
    border           : 1px solid #333;
}

Beside, you can manipulate the code, where content is written in the Statusbar. See Plugin Wordcount for example. They are using some code like this to update the statusbar and enter a class name:

        if (statusbar) {
           Delay.setEditorTimeout(editor, function () {
               statusbar.insert({
          type: 'label',
          name: 'wordcount',
          text: ['Words: {0}', getCount()],
          classes: 'wordcount',
          disabled: editor.settings.readonly
        }, 0);

        editor.on('setcontent beforeaddundo undo redo keyup', debouncedUpdate);
      }, 0);
    }

Add class/id to path in TinyMCE4

2 Answers2