I am trying to integrate tinyMCE editor with LWC. I have followed the below steps to do so;
- Download the tinyMCE resources and uploaded it as static resources in my org
- I am using the loadScript method to import tinyMCE.min.js file in lwc
- 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;
.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 usingtarget
(instead ofselector
) in the init method. I believe the problem lies in the codetinymce.init({selector:textArea});
and it should instead betinymce.init({target:textArea});
.suffix: '.min'
(along with target) in the init method.