0

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:

applicationPortalContainer.js

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 {
        tinymce.init({
          target: textArea
        });
        console.log('success');
      } catch(e) {
        console.log('exception', e);
      }
    });
  }
}

applicationPortalContainer.html

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

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.

Thanks

0

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.

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.