[SalesForce] Need rich text editor for Lightning with Add Link and Add Image features

I’m building a Lightning component to edit html and need a robust WYSIWYG rich text editor (RTE) with “add link” feature and embed features. I really need the “add link” feature. When I search for RTE and Lightning I found and considered the following:

Trailblazer gives UI guidelines if you want to layout your own markup for a RTE but why reinvent the wheel when there are good plugins out there.
http://lightningdesignsystem.com/components/rich-text-editor/

The old ui:inputRichText is not supported when LockerService is activated:

So this leaves <lightning:inputRichText />. But this RTE lacks is deficient in both add link and image features.

<lightning:inputRichText value="{!v.body}" aura:id="iBody">
</lightning:inputRichText>

I’ve seen code that suggests you can add a button to let uses insert an image. 

<lightning:inputRichText value="{!v.body}">
    <lightning:insertImageButton/>
</lightning:inputRichText>

But this image uploader has a 1MB limit and has a terrible way of dealing with files that are too big. The user is told a serious error happened and they are asked to send a report into SF.

Is there some inner component that can be added to provide a Add Hyperlink feature?

Or, can we get the RTE that is used in Salesforce Lightning? Its the CKE editor and it’d be good enough. Is there a way to use this in our Lightning apps? I’ll guess that it might be imported as a static resource etc. Has anyone tried this and had success?

Best Answer

I implemented a RTE component by using dijit/Editor inside a Visualforce page. I then wrapped that Visualforce page inside a Lightning Component by using an iFrame, so that I can easily use it anywhere I wanted.

NOTE: You will have to implement communication between this Visualforce page and the Lightning Component - there's a nice blog post that solves this problem.

Below is the code from my Visualforce page without the Lightning Component <-> VF Page communication part. This should be enough to get you started quickly: 

<apex:page standardController="EmailMessage"
    applyBodyTag="false" showHeader="false" sidebar="false" standardStylesheets="false">

    <!-- loading required DOJO resources -->
    <style type="text/css">
        @import "//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dijit/themes/claro/claro.css";
    </style> 
    <script src="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js"
        data-dojo-config="async: true, parseOnLoad: false"> </script>

    <body class="claro" style="margin: 0px;">

        <!-- dijit RTE -->
        <div id="dijit-rich-text-editor" 
            data-dojo-type="dijit/Editor" 
            data-dojo-props="extraPlugins:['foreColor','hiliteColor','|','createLink']">
        </div>

        <!-- Email Message's HtmlBody -->
        <div id="emailMessage-htmlBody" style="display: none" >
            <apex:outputText value="{!EmailMessage.HtmlBody}" escape="false"/>
        </div>

    </body> 

    <!-- initializing the editor -->
    <script>
        var myEditor = undefined;

        require([
            "dojo/parser",
            "dijit/registry",
            "dijit/Editor",
            "dijit/_editor/plugins/TextColor",
            "dijit/_editor/plugins/LinkDialog",
            "dijit/_editor/plugins/FullScreen"
        ], function(parser, registry, editor) {
            parser.parse();

            myEditor = registry.byId("dijit-rich-text-editor");
            myEditor.setValue(document.getElementById('emailMessage-htmlBody').innerHTML);
        });
    </script>
</apex:page>

I needed this component to provide the ability to edit EmailMessages, so that's why it's using EmailMessage standard controller, but you can easily change that to support something else. Also, the reason I used dijit/Editor was because it messed the least with the HTML that was generated by the email templates.

It has the functionality to support adding links, but for uploading attachments I think you'll need to implement a separate component that you'll use in conjunction with RTE (which shouldn't be that hard).

P.S. As I said, I used dijit/Editor for my own reasons, however, you can probably use a very similar approach to implement any other RTE library that is out there. For example, Salesforce's new lightning-input-rich-text LWC is using Quill.

Related Topic