angular-ui / ui-tinymce

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

ui tinymce 2 way binding not working #223

Closed lulzimfazlija2 closed 8 years ago

lulzimfazlija2 commented 8 years ago

I have fixed it in localhost but the problem is when I upload my site to production(Heroku in my case) the problem still remains...

The way I have fixed it locally was by adding a single line of code to directive in return statement:

priority: 10

But this I cannot add it to Heroku as the Heroku itself installs the dependencies automatically when deploying the app and I cant edit the file (well I can edit if I want it manually but that's every time i deploy my app on different server I should add that piece of code manually which I dont want to)... I would rather like to find a better solution to this!

Is there any other way I can fix this? or a way I can edit my app on Heroku directly?

deeg commented 8 years ago

Can you put up a plunker demonstrating how the 2 way data binding is not working?

146 adds a priority to the directive but I have not seen a good use case where it is actually needed yet. If you could post a plunker maybe I could recommend a different solution.

If you need to modify the code, I would fork this library and make the changes you need, and then use that instead of this library on your app.

lulzimfazlija2 commented 8 years ago

Ok, I noticed something else also, it binds the textarea if I do initialize a value to the scope variable for ex: res.resource.content = "test"; but when I try to initialize that res.resource.content from inside a service call within a controller function like this:

res.showBySessionId = function (id) {
                ResourceService.showBySessionId(id).then(function (response) {
                    res.resource.content = response.data.data[0].content;
                }).catch(function (error) {
                    $scope.result = error;
                });
            };

it does not work, and I am sure response.data.data[0].content has a value, and my html looks like:

<textarea ui-tinymce="tinymceOptions" ng-model="res.resource.content"></textarea>

and I am calling this function using ng-init on page load... {{res.resource.content}} gives a value on outside textarea, but not in... if I remove ui-tinymce="tinymceOptions" from textarea then I see the text coming... so something problem with the directive I guess...

lulzimfazlija2 commented 8 years ago

@deeg, this issue is not making problem only for me, but for lot's of people out there, and I do not see a reason why this has to not be fixed added that line of code priority: 10 to the directive, also I dont think there needs to be a plunker code sample as I already told you exactly the problem..

thnx

deeg commented 8 years ago

So you are saying the second issue is fixed with the priority also?

The thing is I don't want to add a priority arbitrarily. I have not encountered a situation where I need it yet.

While you have told me what is going on, I do not have the time to set up the code to try it out myself. If you set up a Plunker I'm more than happy to take a look for you, and add the priority if it really is the only fix.

lulzimfazlija2 commented 8 years ago

@deeg Can you look at this plunker sample.. I added ui-tinymce library but the textarea does not become rich text editor, dont know why...

https://plnkr.co/edit/QDXNYgC2KWNoEmILx1xK

This is a similiar case like mine... when I do call a service the model does not change into the textarea ... well know it changes cz I couldnt add tinymce on it

lulzimfazlija2 commented 8 years ago

Ok, I came up with a better solution than I had, added a new directive outside bower folder, and my html now looks like <textarea ui-tinymce-custom="tinymceOptions" ng-model="res.resource.content"></textarea> where I only have added priority:10 on this directive uiTinymceCustom... Not best solution but better I can say... I dont need to add it manually that line of code priority:10 on any server I deploy the app, like heroku etc...

angular.module('ui.tinymce', [])
    .value('uiTinymceConfig', {})
    .directive('uiTinymceCustom', ['$rootScope', '$compile', '$timeout', '$window', '$sce', 'uiTinymceConfig', function($rootScope, $compile, $timeout, $window, $sce, uiTinymceConfig) {
        uiTinymceConfig = uiTinymceConfig || {};
        var generatedIds = 0;
        var ID_ATTR = 'ui-tinymce';
        if (uiTinymceConfig.baseUrl) {
            tinymce.baseURL = uiTinymceConfig.baseUrl;
        }

        return {
            priority: 10,
            require: ['ngModel', '^?form'],
         .............

Hopefully it helps to anyone this solution..

deeg commented 8 years ago

If you look at the console, you can see why the Plunker is not working.

Refused to execute script from 'https://raw.githubusercontent.com/angular-ui/ui-tinymce/master/src/tinymce.js' because its MIME type ('text/plain') is not executable, and strict MIME type checking is enabled.

Going to close this issue. If you think you find a bug, please open a new issue with a plunker demonstrating the problem.