4

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?

| improve this question | |
  • Addition: Need a RTF that supports font colors. Anyone know of one? – Bryan Oct 24 '18 at 17:17
0

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.

| improve this answer | |
0

Inserting Images Add a toolbar button for uploading and inserting images by using lightning:insertImageButton as a child component. The component inserts the image button in the INSERT_CONTENT category area. Supported image types are png, jpg, jpeg, and gif. The maximum image size is 1MB.

Clicking the image button opens a file picker you can use to locate and upload the image. The image is inserted inline in the text editor.

Resizing of images is not supported. Copy and pasting of images is not supported, although it might work on some combinations of browsers and operating systems. By default, guest users can't upload images to Communities.

Control access to the image by using the shareWithEntityId attribute to specify entity ID. The image that's inserted into the text editor is shared with the specified entity, such as a record, org, or user. For example, if the text editor is used in a record edit form, the image could be shared with the recordId of the record that's being edited. The image is visible to all users in an org if you set shareWithEntityId to the org ID. If shareWithEntityId is not set, the image is private and visible only to the user who uploaded the image.

Ref : https://developer.salesforce.com/docs/component-library/bundle/lightning:inputRichText/documentation

| improve this answer | |

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.