Jira 8 - The Rich-Text-Editor (Atlassian-Wiki-Renderer) not working anymore

Hey there,

I used the rich-text-editor from Jira in one of my velocity views. In Jira 7.X I had no problem with the editor, everything worked like a charm. If I install my plugin on Jira 8, the editor ist not loaded correctly as you can see in my screenshot:

In my webwork action class I’m loading the editor just like this:

pageBuilderService.assembler().resources().requireWebResource("com.atlassian.jira.plugins.jira-editor-plugin:init");

        final RendererManager rendererManager = ComponentAccessor.getRendererManager();
        final Map<String, String> rendererParams = new HashMap<String, String>();

        final JiraRendererPlugin wikiRenderer = rendererManager.getRendererForType(
                "atlassian-wiki-renderer");
        final JiraRendererModuleDescriptor descriptor = wikiRenderer.getDescriptor();

        rendererParams.put("rows", "45");
        rendererParams.put("cols", "40");
        rendererParams.put("wrap", "virtual");
        editVmWithHtml = descriptor.getEditVM("",
                "",
                "atlassian-wiki-renderer",
                "email-content",
                "",
                rendererParams,
                false);

What do I need to change to make it work in Jira 8 again?

Many thanks in advance.

Hi everyone,

We’re really struggling with this. Anyone from Atlassian or another partner that can help us?

Thanks
Jörg Godau
Schütze AG

Good morning,

are there any error messages you can share with us? Anything in the browser console?

Regards,
Philipp

Here you have the browser logs:

batch.js?locale=de-DE:81 JQMIGRATE: Migrate is installed, version 1.4.1
batch.js?locale=de-DE:322 [Deprecation] document.registerElement is deprecated and will be removed in M73, around March 2019. Please use window.customElements.define instead. See https://www.chromestatus.com/features/4642138092470272 for more details.
_ @ batch.js?locale=de-DE:322
batch.js?locale=de-DE:178 DEPRECATED JS - AJS.debounceImmediate has been deprecated since 8.0.0 and will be removed in 9.0.0. Use equivalent functions from libraries like lodash / underscore instead  
     at Object.mKt5 (http://localhost:8080/s/493f993900a3ce1ac301f436dfca3576-CDN/8s3uq2/800010/6411e0087192541a09d88223fb51a6a0/527ab6cb8db8e0b715fcef781f7fd0ca/_/download/contextbatch/js/_super/batch.js?locale=de-DE:390:10094)
p @ batch.js?locale=de-DE:178
batch.js?locale=de-DE:697 Use of `window.Backbone` through AUI is deprecated and will be removed in AUI 9.0
hqGD @ batch.js?locale=de-DE:697
batch.js?locale=de-DE:822 Use of `window._` through AUI is deprecated and will be removed in AUI 9.0
snLL @ batch.js?locale=de-DE:822
batch.js?locale=de-DE:109 Downloading resources:

batch.js?locale=de-DE:178 DEPRECATED JS - Cookie has been deprecated since 5.8.0 and will be removed in a future release. Use cookie instead.   
     at http://localhost:8080/s/29508aefc31f9ebfbd9aacecb50c2b5e-CDN/8s3uq2/800010/6411e0087192541a09d88223fb51a6a0/a819b229b69c218e8f5862ef01777df4/_/download/contextbatch/js/atl.general,jira.global,-_super/batch.js?agile_global_admin_condition=true&baseurl-check-resources=true&healthcheck-resources=true&jag=true&jaguser=true&locale=de-DE:368:112
p @ batch.js?locale=de-DE:178
batch.js?locale=de-DE:109 Downloading resources:
js!/s/d41d8cd98f00b204e9800998ecf8427e-CDN/8s3uq2/800010/6411e0087192541a09d88223fb51a6a0/be9ff0efea54a6453d2ac60b92912a09/_/download/contextbatch/js/browser-metrics-plugin.contrib,-_super,-atl.general/batch.js?agile_global_admin_condition=true&baseurl-check-resources=true&healthcheck-resources=true&jag=true&jaguser=true!order
com.atlassian.jira.plugins.jira-editor-plugin:fsm.js:33 JEP FSM - Event: ATTACHED Array(1)
com.atlassian.jira.plugins.jira-editor-plugin:fsm.js:33 JEP FSM - Current state: Init
com.atlassian.jira.plugins.jira-editor-plugin:fsm.js:33 JEP FSM - Next State: Attached
batch.js?locale=de-DE:178 DEPRECATED JS - AJS.debounce has been deprecated since 8.0.0 and will be removed in 9.0.0. Use equivalent functions from libraries like lodash / underscore instead  
     at l.init (http://localhost:8080/s/493f993900a3ce1ac301f436dfca3576-CDN/8s3uq2/800010/6411e0087192541a09d88223fb51a6a0/527ab6cb8db8e0b715fcef781f7fd0ca/_/download/contextbatch/js/_super/batch.js?locale=de-DE:402:2075)
p @ batch.js?locale=de-DE:178
batch.js?locale=de-DE:109 Downloading resources:
css!/s/9e94f26e0bdd478d4c04984bbee7af09-CDN/8s3uq2/800010/6411e0087192541a09d88223fb51a6a0/4.0.13/_/download/batch/com.atlassian.jira.plugins.jira-wiki-editor:wiki-editor-resources/com.atlassian.jira.plugins.jira-wiki-editor:wiki-editor-resources.css
js!/s/d41d8cd98f00b204e9800998ecf8427e-CDN/8s3uq2/800010/6411e0087192541a09d88223fb51a6a0/4.0.13/_/download/resources/com.atlassian.jira.plugins.jira-editor-plugin:tinymce/tinymce.js?batch=false!order
js!/s/d41d8cd98f00b204e9800998ecf8427e-CDN/8s3uq2/800010/6411e0087192541a09d88223fb51a6a0/4.0.13/_/download/resources/com.atlassian.jira.plugins.jira-editor-plugin:tinymce/tinymce-amd.js?batch=false!order
js!/s/d41d8cd98f00b204e9800998ecf8427e-CDN/8s3uq2/800010/6411e0087192541a09d88223fb51a6a0/4.0.13/_/download/resources/com.atlassian.jira.plugins.jira-editor-plugin:tinymce/themes/modern/theme.js?batch=false!order
js!/s/d41d8cd98f00b204e9800998ecf8427e-CDN/8s3uq2/800010/6411e0087192541a09d88223fb51a6a0/4.0.13/_/download/batch/com.atlassian.jira.plugins.jira-editor-plugin:schema-builder/com.atlassian.jira.plugins.jira-editor-plugin:schema-builder.js!order
js!/s/d41d8cd98f00b204e9800998ecf8427e-CDN/8s3uq2/800010/6411e0087192541a09d88223fb51a6a0/4.0.13/_/download/batch/com.atlassian.jira.plugins.jira-editor-plugin:schema/com.atlassian.jira.plugins.jira-editor-plugin:schema.js!order
js!/s/b2c7fcb7266d86ae1258ffe15bb3a316-CDN/8s3uq2/800010/6411e0087192541a09d88223fb51a6a0/4.0.13/_/download/batch/com.atlassian.jira.plugins.jira-editor-plugin:i18n/com.atlassian.jira.plugins.jira-editor-plugin:i18n.js?locale=de-DE!order
js!/s/d41d8cd98f00b204e9800998ecf8427e-CDN/8s3uq2/800010/6411e0087192541a09d88223fb51a6a0/4.0.13/_/download/batch/com.atlassian.jira.plugins.jira-editor-plugin:wrm/com.atlassian.jira.plugins.jira-editor-plugin:wrm.js!order
js!/s/d41d8cd98f00b204e9800998ecf8427e-CDN/8s3uq2/800010/6411e0087192541a09d88223fb51a6a0/4.0.13/_/download/batch/com.atlassian.jira.plugins.jira-editor-plugin:converter-util/com.atlassian.jira.plugins.jira-editor-plugin:converter-util.js!order
js!/s/d41d8cd98f00b204e9800998ecf8427e-CDN/8s3uq2/800010/6411e0087192541a09d88223fb51a6a0/4.0.13/_/download/batch/com.atlassian.jira.plugins.jira-editor-plugin:context-detector/com.atlassian.jira.plugins.jira-editor-plugin:context-detector.js!order
js!/s/d41d8cd98f00b204e9800998ecf8427e-CDN/8s3uq2/800010/6411e0087192541a09d88223fb51a6a0/4.0.13/_/download/batch/com.atlassian.jira.plugins.jira-editor-plugin:context-manager/com.atlassian.jira.plugins.jira-editor-plugin:context-manager.js!order
js!/s/d41d8cd98f00b204e9800998ecf8427e-CDN/8s3uq2/800010/6411e0087192541a09d88223fb51a6a0/4.0.13/_/download/batch/com.atlassian.jira.plugins.jira-editor-plugin:selection/com.atlassian.jira.plugins.jira-editor-plugin:selection.js!order
js!/s/d41d8cd98f00b204e9800998ecf8427e-CDN/8s3uq2/800010/6411e0087192541a09d88223fb51a6a0/4.0.13/_/download/batch/com.atlassian.jira.plugins.jira-wiki-editor:wiki-editor-thumbnails/com.atlassian.jira.plugins.jira-wiki-editor:wiki-editor-thumbnails.js!order
js!/s/fd6160d5bde3214d545388a4b8e0f869-CDN/8s3uq2/800010/6411e0087192541a09d88223fb51a6a0/4.0.13/_/download/batch/com.atlassian.jira.plugins.jira-wiki-editor:wiki-editor-resources/com.atlassian.jira.plugins.jira-wiki-editor:wiki-editor-resources.js?locale=de-DE!order
js!/s/b2c7fcb7266d86ae1258ffe15bb3a316-CDN/8s3uq2/800010/6411e0087192541a09d88223fb51a6a0/4.0.13/_/download/batch/com.atlassian.jira.plugins.jira-editor-plugin:instance/com.atlassian.jira.plugins.jira-editor-plugin:instance.js?locale=de-DE!order
js!/s/d41d8cd98f00b204e9800998ecf8427e-CDN/8s3uq2/800010/6411e0087192541a09d88223fb51a6a0/4.0.13/_/download/batch/com.atlassian.jira.plugins.jira-editor-plugin:api/com.atlassian.jira.plugins.jira-editor-plugin:api.js!order
js!/s/d41d8cd98f00b204e9800998ecf8427e-CDN/8s3uq2/800010/6411e0087192541a09d88223fb51a6a0/4.0.13/_/download/batch/com.atlassian.jira.plugins.jira-editor-plugin:renderer/com.atlassian.jira.plugins.jira-editor-plugin:renderer.js!order
js!/s/d41d8cd98f00b204e9800998ecf8427e-CDN/8s3uq2/800010/6411e0087192541a09d88223fb51a6a0/4.0.13/_/download/batch/com.atlassian.jira.plugins.jira-editor-plugin:mentions/com.atlassian.jira.plugins.jira-editor-plugin:mentions.js!order
js!/s/d41d8cd98f00b204e9800998ecf8427e-CDN/8s3uq2/800010/6411e0087192541a09d88223fb51a6a0/4.0.13/_/download/batch/com.atlassian.jira.plugins.jira-editor-plugin:mentions-plugin/com.atlassian.jira.plugins.jira-editor-plugin:mentions-plugin.js!order
js!/s/d41d8cd98f00b204e9800998ecf8427e-CDN/8s3uq2/800010/6411e0087192541a09d88223fb51a6a0/4.0.13/_/download/batch/com.atlassian.jira.plugins.jira-editor-plugin:polyfil-string-ends-with/com.atlassian.jira.plugins.jira-editor-plugin:polyfil-string-ends-with.js!order
js!/s/b2c7fcb7266d86ae1258ffe15bb3a316-CDN/8s3uq2/800010/6411e0087192541a09d88223fb51a6a0/4.0.13/_/download/batch/com.atlassian.jira.plugins.jira-editor-plugin:resources/com.atlassian.jira.plugins.jira-editor-plugin:resources.js?locale=de-DE!order
js!/s/d41d8cd98f00b204e9800998ecf8427e-CDN/8s3uq2/800010/6411e0087192541a09d88223fb51a6a0/1.2.4/_/download/batch/com.atlassian.plugin.jslibs:uri-1.14.1/com.atlassian.plugin.jslibs:uri-1.14.1.js!order
js!/s/d41d8cd98f00b204e9800998ecf8427e-CDN/8s3uq2/800010/6411e0087192541a09d88223fb51a6a0/4.0.13/_/download/batch/com.atlassian.jira.plugins.jira-editor-plugin:converter/com.atlassian.jira.plugins.jira-editor-plugin:converter.js!order
js!/s/d41d8cd98f00b204e9800998ecf8427e-CDN/8s3uq2/800010/6411e0087192541a09d88223fb51a6a0/4.0.13/_/download/batch/com.atlassian.jira.plugins.jira-editor-plugin:plugins/com.atlassian.jira.plugins.jira-editor-plugin:plugins.js!order
batch.js?locale=de-DE:178 DEPRECATED JS - AJS.debounce has been deprecated since 8.0.0 and will be removed in 9.0.0. Use equivalent functions from libraries like lodash / underscore instead  
     at T (http://localhost:8080/s/493f993900a3ce1ac301f436dfca3576-CDN/8s3uq2/800010/6411e0087192541a09d88223fb51a6a0/527ab6cb8db8e0b715fcef781f7fd0ca/_/download/contextbatch/js/_super/batch.js?locale=de-DE:438:5770)
p @ batch.js?locale=de-DE:178
batch.js?locale=de-DE:978 To be compatible with jQuery 1.9 and higher,
t.fn.tipsy @ batch.js?locale=de-DE:978
batch.js?locale=de-DE:178 DEPRECATED JS - Dropdown constructor has been deprecated and will be removed in a future release. Use Dropdown2 instead.   
     at Object.i.bindConfigDashboardDds (http://localhost:8080/s/493f993900a3ce1ac301f436dfca3576-CDN/8s3uq2/800010/6411e0087192541a09d88223fb51a6a0/527ab6cb8db8e0b715fcef781f7fd0ca/_/download/contextbatch/js/_super/batch.js?locale=de-DE:3490:499)
p @ batch.js?locale=de-DE:178
batch.js?agile_global_admin_condition=true&baseurl-check-resources=true&healthcheck-resources=true&jag=true&jaguser=true:9 Network quality values are overridden using a holdback experiment, and so may be inaccurate
(anonymous) @ batch.js?agile_global_admin_condition=true&baseurl-check-resources=true&healthcheck-resources=true&jag=true&jaguser=true:9
batch.js?locale=de-DE:109 Downloading resources:
css!/s/722257398ed85eaa39d12bc29012c839-CDN/8s3uq2/800010/6411e0087192541a09d88223fb51a6a0/8.0.2/_/download/batch/com.atlassian.jira.jira-header-plugin:newsletter-signup-tip/com.atlassian.jira.jira-header-plugin:newsletter-signup-tip.css
js!/s/d41d8cd98f00b204e9800998ecf8427e-CDN/8s3uq2/800010/6411e0087192541a09d88223fb51a6a0/1.2.4/_/download/batch/com.atlassian.plugin.jslibs:underscore-1.8.3/com.atlassian.plugin.jslibs:underscore-1.8.3.js!order
js!/s/fd6160d5bde3214d545388a4b8e0f869-CDN/8s3uq2/800010/6411e0087192541a09d88223fb51a6a0/8.0.2/_/download/batch/com.atlassian.jira.jira-header-plugin:newsletter-signup-tip/com.atlassian.jira.jira-header-plugin:newsletter-signup-tip.js?locale=de-DE!order
batch.js?locale=de-DE:32 Helpdesk-Project-Panel Resources are loaded
com.atlassian.jira.plugins.jira-editor-plugin:fsm.js:33 JEP FSM - Event: ATTACHED Array(1)
com.atlassian.jira.plugins.jira-editor-plugin:fsm.js:33 JEP FSM - Current state: Attached
SendEmailWebwork.jspa?issueId=10013:668 Object
SendEmailWebwork.jspa?issueId=10013:670 Array(0)
batch.js?locale=de-DE:178 DEPRECATED JS - Inline dialog constructor has been deprecated and will be removed in a future release. Use inline dialog 2 instead.   
     at f._initDialog (http://localhost:8080/s/29508aefc31f9ebfbd9aacecb50c2b5e-CDN/8s3uq2/800010/6411e0087192541a09d88223fb51a6a0/a819b229b69c218e8f5862ef01777df4/_/download/contextbatch/js/atl.general,jira.global,-_super/batch.js?agile_global_admin_condition=true&baseurl-check-resources=true&healthcheck-resources=true&jag=true&jaguser=true&locale=de-DE:1781:2832)
p @ batch.js?locale=de-DE:178

The Jira Server logs are empty, there is no error or warning when my velocity is rendered.

Here is the HTML which the Atlassian Backend Components are generating when I try to load the the Editor:

<div class="jira-wikifield" field-id="email-content" renderer-type="atlassian-wiki-renderer" issue-key="">
    <div class="wiki-edit">
        <div id="email-content-wiki-edit" class="wiki-edit-content">
                                             <textarea  class="textarea long-field wiki-textfield" cols="40" id="email-content"  name="email-content" rows="45" wrap="virtual"  ></textarea>
                <div class="rte-container"><rich-editor contenteditable="true" data-issue-key="" data-content-present="true" tabindex="-1"></rich-editor></div>
                        <div class="content-inner">
            </div>
        </div>
    </div>
    <div class="field-tools">
        <dl id="wiki-prefs" class="wiki-js-prefs" style="display:none">
            <dt>trigger</dt>
            <dd>email-content-preview_link</dd>
            <dt>fieldId</dt>
            <dd>email-content</dd>
            <dt>fieldName</dt>
            <dd></dd>
            <dt>rendererType</dt>
            <dd>atlassian-wiki-renderer</dd>
            <dt>issueKey</dt>
            <dd></dd>
        </dl>
        <button class="jira-icon-button fullscreen wiki-preview" id="email-content-preview_link" type="button">
            <span class="aui-icon wiki-renderer-icon">Vorschau email-content</span>
        </button>
        <a class="help-lnk" id="viewHelp" href="/secure/WikiRendererHelpAction.jspa?section=texteffects" title="Lokale Hilfe zu Wiki-Markup-Hilfe" data-helplink="local"><span class="aui-icon aui-icon-small aui-iconfont-help"></span></a>
    </div>
</div>
<div class="save-options wiki-button-bar">
</div>

Hi,
the HTML-Code renders correctly in Jira 8, e.g. in an issue detail view. So maybe you are missing an aui/JS-dependency or in your atlassian-xml?

Regards
Ralf

ok, can you tell me which dependency I need for the Editor? I already require the “init” webresource of the jira-editor-plugin, so which JS-Dependency is still needed? Any why is no hint about any changes relating to the Rich-Text-Editor?

Many thanks.

I finally found the solution. With Jira 8 you need to require another resource…

Instead of

pageBuilderService.assembler().resources().requireWebResource("com.atlassian.jira.plugins.jira-editor-plugin:init");

you should require the “wiki-editor” context to load the Editor properly

pageBuilderService.assembler().resources().requireContext("wiki-editor");

Looking carefully at the ystem-renderers-plugin.xml file where the Text and Wiki renderers are define I noticed that a renderer that can use the visual editor looks like this:


whereas the ones that are text only are missing the line:
web-panels-location=“wikiRendererWebPanel”

Adding that line meant that our custom renderer can now use the visual editor, and tables are so much easier to modify than using the text editor.