In the dynamic world of Salesforce development, finding the right tools to enhance user experience and overcome limitations is crucial. One common challenge faced by Salesforce developers is the restricted functionality of the native rich text editor. Copy-pasting content from external documents often results in format changes, making it essential to explore alternative solutions. In this blog post, we’ll explore how to integrate the TinyMCE Editor with Salesforce using Lightning Web Components (LWC) to empowering Salesforce Rich Text and provide a seamless solution to maintain formatting consistency.
Understanding the Challenge
Salesforce’s native rich text editor is a powerful tool, but it comes with its limitations. When users copy-paste content from external sources like Google Docs or Microsoft Word, the formatting can be lost or altered, leading to a less-than-optimal user experience. This is where TinyMCE Editor comes into play, offering a feature-rich and customizable editor that can be seamlessly integrated into Salesforce.
Prerequisite
- Basic Knowledge of Salesforce.
- Basic Understanding of LWC components.
- Basic Understanding of VF page.
Introducing TinyMCE Editor
TinyMCE is a popular WYSIWYG (What You See Is What You Get) editor that provides a robust set of features for creating and editing content. Its flexibility and extensibility make it an ideal choice for overcoming the limitations of Salesforce’s native rich text editor. By integrating TinyMCE with Lightning Web Components, developers can empower users to copy-paste content from external documents without worrying about formatting issues.
Steps to Integrate TinyMCE with Salesforce LWC
Step 1: Set Up Your Salesforce Environment
Ensure that you have a Salesforce environment ready for development, and you have the necessary permissions to create Lightning Web Components.
Step 2: Upload TinyMCE zip folder
Upload the TinyMCE library in your Salesforce static resource. You can do this by downloading it from TinyMCE website.
You can download TinyMCE zip from here.
Step3: create a dedicated VF Page to replace textEditor with TinyMCE Editor.
Load your static resource in VF page and use HTML textArea tag. TinyMCE Editor will automatically replace textArea with its own custom editor.
Use tinymce init function to load theme, addons and fonts you want to provide in your Text Editor.
Many Text fonts can be used in tinyMCE Editor some of them are:
'Arial=arial,helvetica,sans-serif;Courier New=courier new,courier,monospace;AkrutiKndPadmini=Akpdmi-n;Andale Mono=andale mono,times;Arial Black=arial black,avant garde;Book Antiqua=book antiqua,palatino;Comic Sans MS=comic sans ms,sans-serif;Georgia=georgia,palatino;Helvetica=helvetica;Impact=impact,chicago;Tahoma=tahoma,arial,helvetica,sans-serif;Terminal=terminal,monaco;Times New Roman=times new roman,times;Trebuchet MS=trebuchet ms,geneva;Verdana=verdana,geneva;'
Here’s some examples of plugins we can provide in the init function in tinyMCE
"advlist","autolink","lists","link","image","charmap","preview","anchor",
"searchreplace","wordcount","visualblocks","visualchars","code","fullscreen",
"insertdatetime","media","nonbreaking","save","table","directionality","emoticons","template"To initiate tinyMCE use below Script in VF Page.
<script>
window.onload = function()
{
tinymce.init({
selector : "#textAreaId",
font_formats: 'Arial=arial,helvetica,sans-serif;chicago;Tahoma=tahoma,arial,helvetica,sans-serif;Terminal=terminal,monaco;Times New Roman=times new roman,times;Trebuchet MS=trebuchet ms,geneva;Verdana=verdana,geneva;',
toolbar: "insertfile undo redo | bold italic underline | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image | bullist numlist outdent indent | removeformat | preview | help",
content_css: [
'//fonts.googleapis.com/css?family=Lato:300,300i,400,400i',
'//www.tiny.cloud/css/codepen.min.css'
],
image_advtab: true,
skin: 'oxide',
plugins: [
"advlist","autolink","lists","link","image","preview","anchor",
"searchreplace","wordcount","visualblocks","visualchars","code","fullscreen",
"media","save","table",
"emoticons","template"
],
});
};
</script>
Step5: Create a LWC page and use IFRAME to call that VF Page.
<template>
<lightning-button label="Call VF" title="Non-primary action" onclick={callVFPageMethod} class="slds-m-left_x-small"></lightning-button>
<br />
<p style="font-weight: bold; font-size: x-large">{messageFromVF}</p>
<br />
<iframe id="LWCWithVFPage" src="/apex/Editor" width="100%" height="550px"> </iframe>
</template>Step4 : Use message sharing approach to communicate between these two element.
If there is a need to transmit data between the LWC and VF page, leverage the Message Sharing approach.
To better understand the message sharing approach read this blog.
You can get full code from here
On UI custom Editor will look like this
Conclusion
Integrating TinyMCE Editor with Lightning Web Components offers a powerful solution for Salesforce developers looking to Empowering the rich text editing capabilities of their applications. By allowing users to copy-paste content from external documents without losing formatting, this integration ensures a smoother and more intuitive user experience.
As you embark on this journey, remember to tailor the TinyMCE configuration to suit your application’s unique requirements. Experiment with different settings and features to find the perfect balance between functionality and simplicity.
In conclusion, the integration of TinyMCE Editor in Salesforce LWC opens up new possibilities for content creation and editing, providing a valuable enhancement to the overall user experience.
Hi Nishchal,
Thanks for the helpful article. Is it necessary to put the script in a VF Page? Would the same script not work that’s used to initiate TinyMCE not work in LWC?