2

We need a rich text editor which supports images and word like formatting, so I did investigation and come up with a third party JS based web editor called Froala. I did initial R&D to understand how it works and successfully tested on my local system with a html file. To enable this awesome editor we just need below code:

<!DOCTYPE html>
<html>
  <head>     
    <!-- Include external CSS. -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" type="text/css" />

    <!-- Include Editor style. -->
    <link href="https://cdn.jsdelivr.net/npm/froala-editor@2.9.1/css/froala_editor.pkgd.min.css" rel="stylesheet" type="text/css" />
    <link href="https://cdn.jsdelivr.net/npm/froala-editor@2.9.1/css/froala_style.min.css" rel="stylesheet" type="text/css" />
  </head>

  <body>
    <!-- Create a tag that we will use as the editable area. -->
    <!-- You can use a div tag as well. -->
    <textarea></textarea>     
    <!-- Include external JS libs. -->
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>     
    <!-- Include Editor JS files. -->
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/froala-editor@2.9.1/js/froala_editor.pkgd.min.js"></script>
    <!-- Initialize the editor. -->
    <script> $(function() { $('textarea').froalaEditor() }); </script>
  </body>
</html>

Now I started implementing in salesforce Lightning component, below is my code

Component

<aura:component controller="TestController" implements="forceCommunity:searchInterface,force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global" >

<!-- External libraries for Rich text editor -->
        <!-- CSS Section -->
        <ltng:require styles="{!join(',', 
                               $Resource.extlib+ '/fontawesome/css/font-awesome.min.css', 
                               $Resource.extlib+ '/froala/css/froala_editor.pkgd.min.css',
                               $Resource.extlib+ '/froala/css/froala_style.min.css')}"/>

        <!-- JS Section -->
        <!-- Froala version:v2.9.1 -->
        <ltng:require scripts="{!join(',', 
                               $Resource.extlib+ '/jquery/jquery-3.3.1.min.js', 
                               $Resource.extlib+ '/froala/js/froala_editor.pkgd.min.js')}"
                      afterScriptsLoaded="{!c.initTextEditor}"/>

<div class="slds-card__header slds-grid">
  <div class="slds-col slds-col-size_1-of-1">
      <textarea class="CustomTextEditor"></textArea>
  </div>
</div>

</aura:component>

Controller JS

({
   initTextEditor: function(component,event,helper){
     console.log("In text editor initialization");
     jQuery("document").ready(function(){
        $('.CustomTextEditor').froalaEditor();
     });
   }
})

Now it is not working in salesforce lightning, it gives following error/warning on function call.

jQuery.Deferred exception: Failed to execute 'createTreeWalker' on 'Document': parameter 1 is not of type 'Node'. TypeError: Failed to execute 'createTreeWalker' on 'Document': parameter 1 is not of type 'Node'.

that error is coming from aura_prod.js.

I also tried to call same controller function from onClick but didn't succeed, Not sure what's gone wrong here.

I know I've used different version of jquery here, it is because when I use jQuery1.11.0, that initialization function initTextEditor didn't called at all.so I replaced it with JQuery 3.x version. And I also tested with the same 3.x version in my local html file, it is working there so no jQuery issue here.

  • 2
    Looks to me like Jquery was having issues loading the text editor library, Not sure if it's locker service compliant! Have you tried downgrading your component below 40 Api version? – codeyinthecloud Dec 26 '18 at 14:58
  • @codeyinthecloud, you were right in saying that, I switched to version 39.0 and it started working. I don't want to be downgrade because that component having some other dependency also which require version 40 and above. the only way which I'm seeing here is create a separate component only for this element and mark it version 39.Any other suggestion here to resolve this locker service. Again there might be issue that I use a 39th version component in a 40th version component. – user2809299 Dec 27 '18 at 5:42
  • One more thing will it right to do that version downgrading, because it's going to be in managed package. so not sure if it cause any issue in security review. – user2809299 Dec 27 '18 at 5:44
1

Based on the comments it appears to be a locker service issues. If you're planning to use this component for security review it wont pass the review as those components has to be locker enforced with a version of 40 or above in order for the component to be lightning ready.

Your only chance of using this third party library would be in a stand alone visualforce page(Visualforce page only not lightning out!). Look at What Does Locker Service Affect?

Below is a quote from Lighting ready requirements

Do I have to use Lightning Components in order to be Lightning Ready?

  • If some of your features don’t work in Lightning Experience then this is a good opportunity to adopt Lightning Components if they will make your app Lightning Ready. Otherwise, while we encourage the creation of Lightning Components, the use of them is not required to be Lightning Ready. We encourage you to focus on getting your current application functioning in Lightning Experience as a first priority.

  • If you do use Lightning Components, please note that they must be version 40 or above in order for your app to be Lightning Ready

  • Yes, that's what I end up doing that, I started porting that text area functionality into visual force page.and then embed that VF page in the lightning component. – user2809299 Dec 28 '18 at 4:33

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.