Last updated Mar 22, 2024

Customizing the TinyMCE within Rich Text Editor in JIRA

Level of experienceADVANCED
Time estimate0:15
Atlassian applicationJIRA 7.3+

Feature overview

If you've read these two tutorials: Tutorial - Writing plugin for Rich Text Editor in JIRA and Tutorial - Customizing Rich Text Editor in JIRA, you'll know how to add new functionality to the Rich Text Editor. After reading this tutorial, you'll know how to customize settings in underlying TinyMCE editor. Let's assume you want to allow typing markdown-like headings. The end result:

Let's dive into the details.

Creating a file with the customization logic

Listing of markdown-headings.js

1
2
require(["jira/editor/customizer"], function (EditorCustomizer) {
    EditorCustomizer.customizeSettings(function (tinymceSettings, tinymce, SchemaBuilder) {
        if (tinymceSettings.plugins.indexOf('textpattern') === -1) {
            tinymceSettings.plugins.push('textpattern');
        }

        tinymceSettings.textpattern_patterns = tinymceSettings.textpattern_patterns || [];

        Array.prototype.push.apply(tinymceSettings.textpattern_patterns, [
            {start: '#', format: 'h1'},
            {start: '##', format: 'h2'},
            {start: '###', format: 'h3'}
        ]);
    });
});

What's going on in the code?

Loading the file into editor context

Listing of atlassian-plugin.xml

1
2
<web-resource key="customizations" name="JIRA Editor Reference Plugin Customizations">
    <context>jira.rich.editor</context>

    <resource type="download" name="js/markdown-headings.js" location="js/markdown-headings.js"/>
</web-resource>

And that's it! (smile)

Rate this page: