Visualforce handler not invoked when event fired in aura component

Question

I'm using an aura component in a visual force page.

Aura Component: RichInputText.cmp

<aura:component>
    <aura:attribute name="bodyVal" type="String" />
    <!-- Events -->
    <aura:registerEvent name="RichInputTextEvent" type="c:RichInputTextEvent"/>
    <lightning:inputRichText value="{!v.bodyVal}" placeholder="Type something interesting" onblur="{!c.setHtmlBody}"/>
</aura:component>   

Aura Event: RichInputTextEvent.evt

<aura:event type="APPLICATION">
    <aura:attribute name="htmlBody" type="String" default="" access="global"/>
</aura:event>

I'm firing event when rich text box loose focus: RichInputTextController.js

({
    setHtmlBody : function( component, event, helper ){
        var compEvent = component.getEvent("RichInputTextEvent");
        var htmlBody = component.get("v.bodyVal");
        console.log('htmlBodyAura:', htmlBody);
        compEvent.setParams({"htmlBody" : htmlBody });
        compEvent.fire();
    }
})

Aura Application: MultipleEmailLookup.app

<aura:application access="global" extends ="ltng:outApp">
    <aura:dependency resource="c:MultiSelectLookup" />
    <aura:dependency resource="c:RichInputText" />
</aura:application> 

Added handler on vf page:

var vfHandlerForRichTextBox = function(event){
  console.log('htmlBody: ' + event.getParam("htmlBody"));

  $Lightning.use("c:MultipleEmailLookup", function(){
    $Lightning.createComponent("c:RichInputText", {
      bodyVal: emailBody
  }, "rich-text-input", function(){
      $A.eventService.addHandler({ "event": "c:RichInputTextEvent", "handler" : vfHandlerForRichTextBox});
    });
  });

Handler not getting invoke when event fired in aura component.

Update:

I figured out I need to call the application event like this:

$A.get("e.c:RichInputTextEvent");

but now I.m getting this error on my VF page:

This page has an error. You might just need to refresh it. Action failed: c:RichInputText$controller$setHtmlBody [Cannot read properties of undefined (reading 'setParams')] Failing descriptor: {c:RichInputText$controller$setHtmlBody}

I got solution of above error, I need to give global access to the event.

<aura:event type="APPLICATION">
    <aura:attribute name="htmlBody" type="String" default="" access="global"/>
</aura:event>

Now the event is not undefined, but the problem still exists Visualforce handler not invoking.

Answer 1

Try defining the handler method separately.

Please change variables name with respect to your component

<apex:page>
    
    <apex:includeLightning />
    <div id="aura-cmp" />
    <script>
    
    function vfHandlerForRichTextBox(event){
        console.log(event.getParam("message"))
    }
    
    $Lightning.use("c:MultipleEmailLookup", function() {
        $Lightning.createComponent("c:RichInputText", {
            bodyVal: emailBody
        }, "rich-text-input", function(){
            $A.eventService.addHandler({ "event": "c:RichInputTextEvent", "handler" : vfHandlerForRichTextBox});
        });
        
    });
    </script>
</apex:page>