angular-ui / ui-tinymce

AngularUI wrapper for TinyMCE
MIT License
488 stars 371 forks source link

Accidentally $setPristine on parent form controller #253

Open lordfriend opened 8 years ago

lordfriend commented 8 years ago

I'm encounter problem caused by this line of code https://github.com/angular-ui/ui-tinymce/blob/master/src/tinymce.js#L84 which set parent form a pristine state on its init event. I use ui-tinymce inside an ngIf which may cause the ui-tinymce initialize multiple times when user switch between different type of model

it looks like this snippet

<div ng-if="component.type==='image'">
    <image-component ng-model="component.data"></image-component>
</div>
<div ng-if="component.type==='text'">
    <textarea ng-model="component.data" ui-tinymce></textarea>
</div>

So what I expect is the ui-tinymce should not invoke form.$setPristine() on its initialisation.

lordfriend commented 8 years ago

My workaround is wrapping the ui-tinymce with a ngForm controller and override its $setPristine method to prevent it change parent form pristine state

deeg commented 8 years ago

I need to think about this a bit. I forget exactly why we make the form pristine also, since it might not be the only thing in the form.

Thanks for posting a work around, I am open to suggestions on the proper way to fix this. We could remove it, make it configurable, or something else I haven't thought of yet...

pelizza commented 8 years ago

Hey guys. Same problem here. I passed hours trying to understand why my form got pristine after ui-tinymce has been initialized.

I'm going to use the suggested workaround until we discover why it sets the parent form to pristine.

pelizza commented 8 years ago

Yep, the workaround worked like a charm. Hey @deeg, let me know if you need some help with this.

deeg commented 8 years ago

@pelizza, please feel free to put out a PR so we can review.

pelizza commented 8 years ago

Here is it: https://github.com/angular-ui/ui-tinymce/pull/259

pelizza commented 8 years ago

Hey @deeg, I appreciate if you can review the pull request :) It's been a while since I created it...

Thanks!

zgambino commented 7 years ago

After trying to figure out where the largest lag is in initializing tinymce in my system (lots of editors across multiple tabs), I found that setting $pristine on the parent forms was one of the largest factors.

After applying the fix, I saw a HUGE increase in performance!

Thanks @pelizza

HaiTrung commented 7 years ago

@lordfriend : you can tell me method override $setPristine by decorator? thank you

lordfriend commented 7 years ago

@HaiTrung This solution is not a decorator, because $setPristine should only be override on the formController which wraps the the ui-tinymce.

I use a directive to do this job.

return {
        restrict: 'EA',
        scope: {
            data: '=ngModel',
            name: '@'
        },
        template: '<div class="rich-text-component component-wrapper" ng-form="richTextEditorForm">' +
                        '<textarea cols="30" rows="6" ng-model="data.text" ui-tinymce class="form-control"></textarea>' +
                    '</div>' +
                  '</div>',
        link: function (scope) {
            scope.richTextEditorForm.$setPristine = function () {
                console.log('prevent default set pristine action');
            };
        }
    };
HaiTrung commented 7 years ago

thank u very much