Skip to main content

Plugin Notes

Emoticons

To avoid using a third-party CDN, we use a self-hosted copy of the open-source Twemoji project to host emojis with the emoticons plugin.

TinyMCEManager.js holds the information on where the emoji URLs point to, and adds them to TinyMCE using the emoticons_images_url and emoticons_database parameters. 

Autoresize

It's not exactly clear why, but in some cases, autoresize will not properly resize a TinyMCE editor instance when it's loaded until you manually resize the browser window at least once.

You can get around this by using the editor.execCommand function with the "mceAutoResize" parameter, forcing the plugin to resize the editor as if a browser resize had occurred. This doesn't always work immediately after setting the content; you may have to extend the number of setTimeout functions to ensure the resize always happens if loading a large amount of content.

let initialContent = "some content you want to put inside the editor";

initOpts.setup = function(editor) {
    editor.on('init', function(e) {
      if (initialContent !== null) {
            editor.setContent(initialContent);
            for (let i = 1; i < 15; i++) setTimeout(function() {
                if (initOpts.plugins.includes("autoresize")) {
                    editor.execCommand("mceAutoResize");
                }
            }, i*3);
        }
    });
};

Wordcount

The wordcount plugin, by default, shows a word counter in the TinyMCE statusbar if it's enabled, and on click the counter display toggles between word count and character count.

You can simulate a click to make it show the character count by default like so:

// Simulate a click on the wordcount display element, to switch it to showing
// character count instead of wordcount.
if (initOpts.statusbar === true && initOpts.plugins.includes("wordcount")) {
	$(editor.getContainer()).find('button.tox-statusbar__wordcount').click();
}

If a character limit needs to be enforced, you can add a listener to the editor's setup function to detect when the character count of the editor is over the limit, to inform the user by changing the colour of the character count display:

if (initOpts.statusbar === true && initOpts.plugins.includes("wordcount")) {
	editor.on('input', function (e) {
		let count = editor.plugins.wordcount.body.getCharacterCount();
		let wordCountButton = $(editor.getContainer()).find('button.tox-statusbar__wordcount');
		let overLimitAttr = wordCountButton.attr("data-over-limit");
		if (count > 100 && (!overLimitAttr || overLimitAttr === "false")) {
			wordCountButton.css("color", "var(--dc-font-color-error) !important");
			wordCountButton.attr("data-over-limit", "true");
		} else if (overLimitAttr === "true" && count <= 100) {
			wordCountButton.css("color", "var(--dc-font-color) !important");
			wordCountButton.attr("data-over-limit", "false");
		}
	});
}

 

Back to top