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;


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

LWC JS Controller

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

export default class TinyMce extends LightningElement {

            console.log("Script Successfully loaded");
            console.log("Script not loaded");

        let textArea = this.template.querySelector('div');


Below image of my static resources and chrome console;

enter image description here

enter image description here

enter image description here

  • If you log the error, that would be useful. The catch method accepts one parameter that is the error thrown.
    – sfdcfox
    Commented Nov 17, 2020 at 6:25
  • @sfdcfox - i have logged the error and it shows "undefined"
    – Mukesh
    Commented Nov 17, 2020 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
    Commented Nov 17, 2020 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
    Commented Nov 17, 2020 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
    Commented Nov 17, 2020 at 6:37

1 Answer 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.

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .