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 73 karma points
    Jun 06, 2022 @ 13:07
    Thomas
    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.

  • Thomas 3 posts 73 karma points
    1 week ago
    Thomas
    0

    Found a solution;

    1. Query RTE UMB-property HTML element (Angular)
    2. Query property controller scope from UMB-property (Angular)
    3. Find an object called "rteForm"
    4. 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;
      })
    
Please Sign in or register to post replies

Write your reply to:

Draft