on change event rich text editor umbraco 9

Go to solution

Press Ctrl / CMD + C to copy this to your clipboard.

Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at

Thomas 3 posts 93 karma points

Jun 06, 2022 @ 13:07
0

On change event rich text editor Umbraco 9
Hi there, new to Umbraco (9) and trying to figure out how to subscribe to custom RTE on change or on input events. My findings so far:

ng-change in the RTE propertyeditor view doesn't trigger, because the actual input field value is updated on publish events.
```
<div ng-controller="Umbraco.PropertyEditors.RTEController" class="umb-property-editor umb-rte" ng-class="{'--initialized': !isLoading}">
<umb-load-indicator ng-if="isLoading"></umb-load-indicator>

<ng-form name="rteForm">
    <div class="umb-rte-editor-con">
        <input type="text" id="{{model.alias}}" ng-change="test()" ng-focus="focus()" name="modelValue" ng-model="model.value" style="position:absolute;top:0;width:0;height:0;" />
        <div disable-hotkeys id="{{textAreaHtmlId}}" class="umb-rte-editor" ng-style="{ width: containerWidth, height: containerHeight, overflow: containerOverflow}"></div>
    </div>
</ng-form>
```
on event handlers within a duplicate RTEController aren't triggered
```
tinyMceEditor.on('change', function (e) { alert("change occurred!"); });
```
From what I've seen looking through the HTML with the inspector, it should be possible to query the RTE inner HTML by using the property ID. Yet this doesn't seem like a proper solution because links (and who knows what more) aren't fully formatted at this stage, eg: <a href="/{localLink:umb://document/ec4aafcc0c254f25a8fe705bfae1d324}">

Anyone out there with some advice? Help gets much appreciated.
Copy Link

Thomas 3 posts 93 karma points

Sep 22, 2022 @ 13:34

Found a solution;

Query RTE UMB-property HTML element (Angular)
Query property controller scope from UMB-property (Angular)
Find an object called "rteForm"
Push callback to `$formatters func arr

    // Get Umbraco property type 
  const property: any = document.querySelector(`umb-property[data-element=property-${y?.resultAlias}]`);
  const propertyScope: any = angular.element(property).scope();
  const propertyView: string = propertyScope.property.view;

  // Get Umbraco property controller
  const controller: any = property.querySelector('div[ng-controller]');
  const controllerScope: any = angular.element(controller).scope();
  const controllerForm: any = controllerScope.rteForm;

  // Subscribe
  controllerForm.modelValue.$formatters.push((value: any) => {
          alert('Change detected!');
          return value;
  })

Copy Link

is working on a reply...

Please Sign in or register to post replies

Flag this post as spam?