I am trying to use tinyMce Rich text editor in an application based on LWC instead of lightning-input-rich-text.

I uploaded tinymce.min.js file in static resources and is using that in my component

Please see my component code below:


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

export default class ApplicationPortalContainer extends LightningElement {
  renderedCallback() {

    Promise.resolve(loadScript(this, tinymceJS)).then(() => {
      const textArea = this.template.querySelector('.editor');
      try {
          target: textArea
      } catch(e) {
        console.log('exception', e);


   <textarea class="editor" lwc:dom="manual">

Here the tinymce js file is getting loaded and I am getting success in console but the textarea is not getting initialized as tinymce editor, its still showing as textarea element with a visibility: hidden inline style added to it.

What is rendered in DOM looks like: enter image description here

Any help to render the tinymce editor within LWC will be highly appreciated.


  • hey Aditya, did you get it working with TinyMce now ? I dont see any errors too and locker service seem to work ok as well Nov 1, 2022 at 21:43

1 Answer 1


This might have to do with locker-service in which it prevents any dom modification, and seeing the library, it will definitely modify the dom. Check this : https://developer.salesforce.com/docs/component-library/tools/locker-service-console.

Copy your js and paste it here and check if the library is able to access all the required APIs.

As a workaround if this tinyMce library is required at any cost, use it in a VisualForce page and then host that VF page as an iframe in LWC. For communication between your VFPage and LWC component you can use postMessage, if required.

You must log in to answer this question.

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