U4-9699 - Directive "grid-rte" no setting to start the grid-rte as hidden using ng-if for it breaks the directive.

Created by Robert Ghafoor 29 Mar 2017, 22:10:08 Updated by Robert Ghafoor 30 Mar 2017, 16:44:25

Create a grid editor that uses grid-rte wrap it in a div and set ng-if expression to false what i dide was using ng-if="control.active" i changed the value of $scope.control.active to false in the controller constructor (function if no typescript) i also tested a ng-init directive but it results to the same issue.

look at the attached gif for demonstration of this issue. this issue triggers randomly like sometimes all cards has this issue etc.

configurations i use:

this.rteConfig = {
    toolbar: ["code", "removeformat", "undo", "redo", "cut", "copy", "styleselect"],
    stylesheets: ["RTE_Header"],
    dimensions: { height: 0 },
    maxImageSize: 0
};

this.rteConfigContent = {
    toolbar: [
        "code", "removeformat", "undo", "redo", "cut", "copy", "styleselect", "bold", "italic", "underline",
        "strikethrough", "alignleft", "aligncenter", "alignright", "alignjustify", "bullist", "numlist",
        "outdent", "indent", "link", "unlink", "hr", "subscript", "superscript", "charmap"
    ],
    stylesheets: ["RTE_2ColsContent"],
    dimensions: { height: 200 },
    maxImageSize: 500
};
<div ng-show="control.active && !vm.loading">
     <div class="col-xs-12" data-id="{{control.$uniqueId}}">
        <div grid-rte
             on-blur="vm.onTitleBlur()"
             configuration="vm.rteConfig"
             value="vm.renderModel.title"
             unique-id="control.$uniqueId+1">
        </div>
    </div>
    <div class="col-xs-12" data-id="{{control.$uniqueId+2}}">
        <div grid-rte
             on-blur="vm.onContentBlur()"
             configuration="vm.rteConfigContent"
             value="vm.renderModel.content"
             unique-id="control.$uniqueId+2">
        </div>
    </div>
</div>
<div ng-init="vm.init()"></div>

init() {
    this.$scope.control.active = false;
}

What i think is the problem is tinymce is not finished with its loading "internal stuff" when i set the this.$scope.control.active to false; this triggers the 50% chance on bugging out.

One possible solution: Add a new event attribute for grid-rte maybe call it on-loaded or someting and trigger it when the tinymce has finished with all of its work, look at gif 2 that illustrates this.

When i click in the textarea for the tinymce when it has bugged out it then moves all the incorrect positioned icons to its correct location.

2 Attachments

Comments

Robert Ghafoor 30 Mar 2017, 12:08:22

I managed to fix it by calling tinymce api directly on the directive on-focus event like this: let tinyTitleEl = tinymce.get(${this.$scope.control.$uniqueId + 1}); let tinyContentEl = tinymce.get(${this.$scope.control.$uniqueId + 2});

    this.setLimitedRTE().then(value => {
        if (value) {
            tinyTitleEl.hide();
            tinyContentEl.hide();
            this.$scope.control.active = false;
            tinyTitleEl.show();
            tinyContentEl.show();

            var oldGlobalSettings = tinymce.settings;
            tinymce.settings = tinyTitleEl.settings;
            tinymce.EditorManager.execCommand('mceRemoveEditor', false, tinyTitleEl.id);
            tinymce.EditorManager.execCommand('mceAddEditor', false, tinyTitleEl.id);
            tinymce.settings = oldGlobalSettings;
        }
    });

Edit: was to fast to jump on the success train... it seams to throw when i scroll... im done i really dont know how to start this gridRte as hidden its impossible as it is now.


Robert Ghafoor 30 Mar 2017, 16:44:20

Update: I managed to fix it this time i have tested it several reloads and it seams to play nice but it requires that the following is modified for this to be possible:

The function in gridRte editor.on('init', function (e) { needs the following:

if (scope.onInit) {
    scope.onInit({ editor: editor });
}

then add a new directive scope deligate:

scope: {
    onInit: '&',
}

omitted unrelated lines.

i can then subscribe to this "event" and get an instance to the editor after that i call the following before i set control.active to false (The ng-if wrapping a div with grid-rte)

editor.hide();
editor.show();

and then i get a functional editor :)


Priority: Normal

Type: Bug

State: Submitted

Assignee:

Difficulty: Difficult

Category: Editor

Backwards Compatible: True

Fix Submitted: Inline code

Affected versions: 7.5.11

Due in version:

Sprint:

Story Points:

Cycle: