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/[email protected]/css/froala_editor.pkgd.min.css" rel="stylesheet" type="text/css" />
<link href="https://cdn.jsdelivr.net/npm/[email protected]/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/[email protected]/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.
