1

I am trying to integrate tinyMCE editor with LWC. I have followed the below steps to do so;

  1. Download the tinyMCE resources and uploaded it as static resources in my org
  2. I am using the loadScript method to import tinyMCE.min.js file in lwc
  3. I have no errors. But the loadScript method (returns promise) does not execute the .then block instead it directly goes to the catch block but i can the see js file downloaded in the network tab in chrome console.

Here is my code below;

LWC HTML

<template>
    <lightning-card>
        <form method="POST">
            <div class="text-area" lwc:dom="manual"></div>
        </form>
    </lightning-card>
    
</template>

LWC JS Controller

import { LightningElement } from 'lwc';
import tinymce from '@salesforce/resourceUrl/tinymce';
import {loadScript } from 'lightning/platformResourceLoader';

export default class TinyMce extends LightningElement {

    renderedCallback(){
        loadScript(this,tinymce+'/tinyMCE/src/tinymce.min.js').then(()=>{
            console.log("Script Successfully loaded");
            this.initializeTinyMce();
        }).catch(()=>{
            console.log("Script not loaded");
        })
    }

    initializeTinyMce(){
        let textArea = this.template.querySelector('div');
        tinymce.init({selector:textArea});
    }

}

Below image of my static resources and chrome console;

enter image description here

enter image description here

enter image description here

5
  • If you log the error, that would be useful. The catch method accepts one parameter that is the error thrown. – sfdcfox Nov 17 '20 at 6:25
  • @sfdcfox - i have logged the error and it shows "undefined" – Mukesh Nov 17 '20 at 6:27
  • You've mentioned that the .then block is not executed and .catch is executed directly, but your console log shows otherwise. I've not used tinyMCE before but looking at the documentation, I feel that you should be using target (instead of selector) in the init method. I believe the problem lies in the code tinymce.init({selector:textArea}); and it should instead be tinymce.init({target:textArea});. – arut Nov 17 '20 at 6:30
  • @arut - I am getting a log "Script successfully loaded" but the next line i try to initiate the tinyMCE it triggers an exception and moves to catch block. Also i have tried using "target" instead of "Selector" and it is not working – Mukesh Nov 17 '20 at 6:35
  • I hope you have not used selector & target together in the init method (the documentation states you can only use either of these). Are you getting the same error as before when you use target? Also, not sure if this helps, but try using suffix: '.min' (along with target) in the init method. – arut Nov 17 '20 at 6:37
1

It doesnt look like TinyMCE will play well with LWC. Requires a lot of DOM manipulation which LWC (on platform) locks down quite a bit. Eventhough LWC looks quite vanilla on the surface, it runs "Security Enhancing" features to disable things you take for granted off platform.

I attempted to get TinyMCE working but ran into other errors (past the initial error the OP was getting. arut's solution of using target instead of selector works great, until you run into:

WARNING: SecureElement: [object HTMLDivElement]{ key: {"namespace":"c"} } does not allow setting the unselectable attribute, ignoring!

and Uncaught TypeError: Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'..

Good luck you to finding a WYSIWYG/Rich Text editor that works well in LWC. Majority of JavaScript libraries either rely on window, appendChild or throw around component focus in odd ways.

Might be time to whip out Visualforce (as you can import anything you like here) and just iframe it in. If that isnt an option, you could just build your own WYSIWYG package specifically for LWC.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.