TinyMCE gets cleared when dragged inside a repeater

[CSchuster]

Hi,

i use the TinyMCE in an AngularJS repeater with the ng-sortable v1.3.5.

But unfortunately the Editor gets cleared everytime i move him.

The Model still has the connect Values and even the underlying textarea is still ok:

 <ul as-sortable="dragControlListeners" ng-model="items">
    <li ng-repeat="item in items" as-sortable-item>
        <div class="col-md-1" as-sortable-item-handle>DRAG</div>
            <div class="col-sm-8">
                <textarea ui-tinymce="tinymceOptions" ng-model="item.abstract"></textarea>
            </div>
        </div>
    </li>
</ul>

Any ideas how to keep the TinyMCE Editor filled after drag/drop?

kind regards Christoph

[deeg]

Can you please create a plunker demonstrating the issue so we can look into fixing it?

[CSchuster]

Hi, sure. took some time to fix all the paths... https://plnkr.co/edit/zjmiWy2ptMU5vYhGLevY?p=preview

[deeg]

@CSchuster, the best way I know is to set a callback for the order changed event with ng-sortable, and when the order is changed, send out the tinymce:refresh event.

You can see this plunker for an example

If you did not use a controller and did the JS inside a directive you would probably be able to use $emit instead of $boadcast which would be better for performance.

[CSchuster]

Hi, thank you @deeg . Its working now in Edge & Chrome, but not in Firefox. Any ideas? And i have ugly flickering after dropping. (I know, that it's because the recreation of the TinyMCE.)

[CSchuster]

Hi,

i fixed the flickering by keeping the heights with this:

scope.$on('$tinymce:refresh', function (e, id) {
    var eid = attrs.id;
    if (angular.isUndefined(id) || id === eid) {

        var parentElement = element.parent();
        var clonedElement = element.clone();

        clonedElement.removeAttr('id');
        clonedElement.removeAttr('style');
        clonedElement.removeAttr('aria-hidden');

        //--Store old Parent Height
        var oldParentHeight = jQuery(parentElement).height();
        jQuery(parentElement).css("height", oldParentHeight);

        //--Store old iFrame Height
        var oldiFrameHeight = jQuery("iframe", parentElement).height();

        //--Remove old TinyMCE
        tinymce.execCommand('mceRemoveEditor', false, eid);
        parentElement.append($compile(clonedElement)(scope));

        //-Set old Height to new iFrame
        window.setTimeout(function () {
        jQuery("iframe", parentElement).height(oldiFrameHeight);
        jQuery(parentElement).removeAttr("style");
        }, 20);

    }
});

but it's still not working in Firefox :-(