display text delayed after insrting image from file system in textAngular v 1.2.1

[jiyak]

Hi,
I have added one button in toolbar to insert image from file system and works fine but after inserting image it delays inserting text in editor as i type.
any idea about this?
Thanks in advance!

[SimeonC]

Hi! Could you provide code examples please - the button and its insert file code.

This could be related to #219.

[jiyak]

Hi SimeonC,
Thank you for your reply.This problem got solved after converting image src in blob instead of base64 url.
But got another issue of IE browser. Image upload does not work in IE.

Another problem is paste text and image together from MSWord document to editor. any tips for that.

waiting for your answer.

[jiyak]

Hi SimeonC,

Imagebutton and display image code which i used to insert image in textAngular v 1.2.2 latest. But the behaviour is weird. On every attempt increses number of times display image. On first attempt selected image get displayed only one time..it#s perfect. On second attempt ma selected image get displayed two times and so on....

I have used below code to insert Font family in v 1.2.2 but not able to select any font. for that changed updateSelectedStyles function in textAngular.js as showed here. Waiting for your reply.

// added setActive 
updateSelectedStyles: function(selectedElement){
                            // update the active state of all buttons on liked toolbars
                            angular.forEach(_toolbars, function(toolbarScope){
                                angular.forEach(toolbarScope.tools, function(toolScope){
                                    if(toolScope.activeState){
                                        toolScope.active = toolScope.activeState(selectedElement);
                                    }
                                    // Show active font size / family
                                    if(toolScope.setActive){
                                        var active = toolScope.getActive();
                                        toolScope.setActive(active);
                                    }
                                });
                            });

                        },

//below code in my config file

$provide.decorator('taOptions', ['taRegisterTool', '$delegate', function(taRegisterTool, taOptions){
                    // $delegate is the taOptions we are decorating
                    // register the tool with textAngular
                    taRegisterTool('insertImageFile', {
                        display: '<div style="display: block; width: 100px; height: 20px; overflow: hidden;"><button style="width: 110px; height: 30px; position: relative; top: -5px; left: -5px;"><a href="javascript: void(0)" style="color:#000000">Upload Image</a></button><input type="file" id="fileUpload" name="upload" style="font-size: 50px; width: 120px; opacity: 0; filter:alpha(opacity: 0);  position: relative; top: -40px;; left: -20px" /></div>',
                        action: function(){
                            var editor = this.$editor();
                            var fileInput=angular.element(document.querySelector('#fileUpload'));
                            fileInput.bind('change', function(e) {
                                var file = fileInput[0].files[0];
                                var imageType = /image.*/;
                                if (file.type.match(imageType)) {
                                    var reader = new FileReader();

                                    reader.onload = function() {
//                                        var img=new Image();
//                                        img.src=reader.result;
//                                        var imageLink=img.src;
                                    //** convert image to blob
                                        var URLObj = window.URL || window.webkitURL;
                                        var imageLink = URLObj.createObjectURL(file);
                                        editor.wrapSelection('insertHTML','<img class="setImage" src="'+ imageLink + '" />');
                                    };
                                    reader.readAsDataURL(file);
//                                    return true;

                                } else {
                                    editor.wrapSelection('innerText', 'File not supported!');
                                }
                            });

                            return false;
                        },
                        activeState: function(){ }

                    });
                    taRegisterTool('fontName', {
                        display: "<span class='bar-btn-dropdown dropdown'>" +
                            "<button class='btn btn-default dropdown-toggle' type='button' ng-disabled='showHtml()'><span>{{active}} </span></button>" +
                            "<ul class='dropdown-menu'><li ng-repeat='o in options'><button class='checked-dropdown' style='font-family: {{o.css}}' type='button' ng-click='action(o.css)'><i ng-if='o.active' class='fa fa-check'></i>{{o.name}}</button></li></ul></span>",
                        action: function (font) {
                            if (font !== '') {
                                this.$editor().wrapSelection('fontName', font);
                            }
                        },
                        options: [
                            { name: 'Sans-Serif', css: 'Arial, Helvetica, sans-serif' },
                            { name: 'Serif', css: "'times new roman', serif" },
                            { name: 'Wide', css: "'arial black', sans-serif" },
                            { name: 'Narrow', css: "'arial narrow', sans-serif" },
                            { name: 'Comic Sans MS', css: "'comic sans ms', sans-serif" },
                            { name: 'Courier New', css: "'courier new', monospace" },
                            { name: 'Garamond', css: 'garamond, serif' },
                            { name: 'Georgia', css: 'georgia, serif' },
                            { name: 'Tahoma', css: 'tahoma, sans-serif' },
                            { name: 'Trebuchet MS', css: "'trebuchet ms', sans-serif" },
                            { name: "Helvetica", css: "'Helvetica Neue', Helvetica, Arial, sans-serif" },
                            { name: 'Verdana', css: 'verdana, sans-serif' },
                            { name: 'Proxima Nova', css: 'proxima_nova_rgregular' }
                        ],
                        active: 'Font Family',
                        setActive: function (font) {
                            angular.forEach(this.options, function (option) {
                                if (font === option.css) {
                                    this.active = option.name;
                                    option['active'] = true;
                                } else {
                                    option['active'] = false;
                                }
                            });
                        },
                        getActive: function () {
                            var font = document.queryCommandState('fontName');
                            if (font === '') {
                                return 'Arial, Helvetica, sans-serif';
                            } else {
                                return font;
                            }
                        }
                    });
                    // add the button to the default toolbar definition
                    taOptions.toolbar[1].push('insertImageFile');
                    taOptions.toolbar[0].push('fontName');
                    return taOptions;
                }]);

[SimeonC]

Sorry I must have missed your previous comment.

But got another issue of IE browser. Image upload does not work in IE.

If you're talking about the drag and drop that's because the current functionality is really an example only - you should implement your own way of doing this as using data-uri's can cause issues with saving to databases.

Another problem is paste text and image together from MSWord document to editor. any tips for that.

See #124.

Imagebutton and display image code which i used to insert image...

Your ImageButton code doesn't resolve the promise that's passed to it, have a look around at the wiki and some other issues there's plenty of examples of how to do asynchronous editor manipulation.

I have used below code to insert Font family in ...

You don't need to change textAngular at all. Your issue will be that the styles are not being allowed by the sanitizer, as I'm guessing whatever 'fontName' does is just adding styles, see here for the part you'll need to edit: https://github.com/fraywing/textAngular/blob/master/src/textAngular-sanitize.js#L451-L489

You should be testing based on what's passed through to the activeState state function and then setting the active option to that.

For testing add the attribute ta-unsafe-sanitize to text-angular which will not sanitize the data (Note you don't want to use this in production unless you are absolutely certain your users aren't going to inject bad stuff into your site).

[jiyak]

Hi Simeon,

 

Thank you very much for your reply.

 

issue:

But got another issue of IE browser. Image upload does not work in IE.

 

IE browser doesn not support file API.  I am only selecting image from file system and trying to display it in textAngular. But somewhere i read file API support IE 11.0 and i also have IE 11.0.

 

issue:

Another problem is paste text and image together from MSWord document to editor. any tips for that.

 

I will  remove strip out all html tag functionality and then try to check whether I can paste both text and image copied together from MS Word.

 

issue:

Imagebutton and display image code which i used to insert image...

 

your answer:

Your ImageButton code doesn't resolve the promise that's passed to it, have a look around at the wiki and some other issues there's plenty of examples of how to do asynchronous editor manipulation.

 

I did not understand about resolving promise. Can guide me further in detail exactly what i am missing? Do you have some example or link about this issue?

 

Can I use v 1.2.1 or  v1.2.1 in production?

 

Thanks in advance!

 

 

 

 

Gesendet: Donnerstag, 14. August 2014 um 01:24 UhrVon: SimeonC notifications@github.comAn: fraywing/textAngular textAngular@noreply.github.comCc: jiyak jignasapk@web.deBetreff: Re: [textAngular] display text delayed after insrting image from file system in textAngular v 1.2.1 (#247)

Sorry I must have missed your previous comment.

But got another issue of IE browser. Image upload does not work in IE.

If you're talking about the drag and drop that's because the current functionality is really an example only - you should implement your own way of doing this as using data-uri's can cause issues with saving to databases.

Another problem is paste text and image together from MSWord document to editor. any tips for that.

See #124.

Imagebutton and display image code which i used to insert image...

Your ImageButton code doesn't resolve the promise that's passed to it, have a look around at the wiki and some other issues there's plenty of examples of how to do asynchronous editor manipulation.

I have used below code to insert Font family in ...

You don't need to change textAngular at all. Your issue will be that the styles are not being allowed by the sanitizer, as I'm guessing whatever 'fontName' does is just adding styles, see here for the part you'll need to edit: https://github.com/fraywing/textAngular/blob/master/src/textAngular-sanitize.js#L451-L489

You should be testing based on what's passed through to the activeState state function and then setting the active option to that.

For testing add the attribute ta-unsafe-sanitize to text-angular which will not sanitize the data (Note you don't want to use this in production unless you are absolutely certain your users aren't going to inject bad stuff into your site).

—
Reply to this email directly or view it on GitHub.

[SimeonC]

I'm moving offices at the moment so I'll do a full response later. Any reason you aren't using v1.2.2?

1.2.1 had some strange bugs in certain conditions.

[SimeonC]

Sorry I never got back to you on this. If you didn't figure this out please re-open the issue.