froala / angular-froala Goto Github PK

It seems that the main file angular-froala.js has a use strict defined at the begining of the file:

use strict;
// code starts here

So if this file is concatenated with other files, it may break since it will apply use strict; to everything that is concatenated.

I would suggest wrapping code inside a closure (that's what mostly every projects do):

(function() {
   use strict;
   // code starts here
)}():

This way use strict; is restricted to froala's code and won't impact any other code.

I was just wondering if and when you plan to move to Angular ~1.3

Currently, angular-froala is using angular ~1.2.22 but from my experiences, all the features work fine on angular 1.3.

Thanks

Error: [$sce:unsafe] http://errors.angularjs.org/1.2.26/$sce/unsafe

It's a really huge architecture bug. Angular lib (as you named it) is working not in angular way:

for example $http for image upload is not intercepted.

Thank you for your time.

Editor is showing well, both inline and explicit via toolbar. But I can't type in, no JS errors thrown as well.

i am using qiniu as my images upload server,because it return image url param name is "key" and not "link",so i must handle the upload response by myself,but it didn't trig after image upload event,can there anyone help me,please? thank u very much!

The following issue was found with the following versions:

• SO: Windows 8.1
• Browser: IE11 and also tested on Chrome
• Froala: 1.2.8 and also tested on 2.x

We have the following text produced through the editor:

The resulting html is the following one:

But if we try to render the text using ng-bind-html, the result is:

If we use $sce.trustAsHtml to avoid sanitize, even using the froala-sanitize.js instead of the angular one, the text is rendered correctly, BUT if for some reason javascript like the following one is injected in the text

the alert popup gets fired.

There should be the possibility to render all kind of html generated by the froala editor, without having to disable sanitize.

Thanks

Sanitizer fails parsing
(div style="font-family: "Arial"") (/div)
(replaced html tags with () to suit better with github message)

I have tried to customize the toolbar .. everything is working fine but fullscreen option is not being available to me. I am adding "fullscreen" in buttons.

buttons: ["bold", "italic", "underline", "subscript", "superscript", "fullscreen"],

I have multiple Froala editors on the screen at once and am trying to control them independantly through their associated models. Problem is that the focus callback and button callbacks pass (e,editor) which doesn't give me model information.. I tried to override the callback with something like this (I was desperate)

div(ng-repeat="template in templates")
textarea(id="editor_{{$index}}",froala="froalaOptions" ng-model="template.value",froala-event-focus="setFocusTemplate(template)")

but of course it didn't work. I want to avoid going the dom element to scope route since thats a debug thing.

Any ideas on how to make this type of approach work?

After adding a Table, clicking outside the table does not set the cursor focus thus not allowing me to type further.

Hi guys.

When I try to use the angular-froala, I get the following message in my textarea.

I got in touch with the Froala developers asking for a trial of the product. The answer was that it is just to download the editor from the site (there's a bower version, but I'm not sure if it is the same of the site) and use it. It is true because the examples in the zip package worked properly.

But when I try to use the angular-froala with the bower version of froala editor, this messagem appears. I tried to replace the files in the bower directory for the downloaded ones. But nothing happened.

Is this related to Froala itself, or it is a bug of angular-froala?

Thanks.

Is froala-sanitize.js the same as angular-sanitize.js ? I mean, if I've already linked my app to angular-sanitize.js, can I safely ignore adding froala-sanitize.js (or) does the editor has some dependency on froala-sanitize.js file only?

add textarea by click. not working

$scope.addTextArea = function(){
    console.log("添加文本");
    var contentWrap = $('#contentWrap');
    console.log(contentWrap);
    contentWrap.append("<textarea froala='froalaOptions' ng-model='myHtml'></textarea>");
  };

  $scope.froalaOptions = {
        buttons : ["bold", "italic", "underline", "sep", "align", "insertOrderedList", "insertUnorderedList"]
    };

Hello!
First of all: Thank you for this grandiose WYSIWYG editor! I am currently evaluating it and consider using it for our new product. Everything is perfect for now except one thing: image upload.
My goal is to upload images from froala to our server.
At first, I followed the image upload concept but it lacks a possiblity to set the HTTP Authorization header, which is a requirement of our API to specify an accessToken (more info here).
Second, I tried to take the internal froala upload out of the equation by using the beforeImageUpload event:

$scope.froalaOptions = {
  buttons: ["bold", "italic", "underline", "sep", "fontFamily", "fontSize", "color", "sep", "align", "emoticons",
            "insertOrderedList", "formatOL", "insertUnorderedList", "sep", "insertLink", "insertTable", "insertImage",
            "insertVideo", "paragraphFormat", "paragraphStyle", "quote", "html", "sep", "fullscreen"],
  events:  {
    beforeImageUpload: function(e, editor, images) {
      $scope.uploadFirstImage(images).then(function(url) {
        console.log(url);
        $scope.froalaOptions.froala("insertImage", url);
      });
      return false;
    },
    imageError:        function(e, editor, error) {
      console.log(error);
    }
  }
};

The uploadFirstImage function sends the first of images to our server and resolves the url (works). But the insertImage Method of froala does not insert the image by URL. I then tested calling the insertImage method from the outside (on a button click) and realized it just opens the insertImage overlay, the given URL is ignored. Either a method to insert an Image by URL directly is required here, or (even better) a possibility to pass an authorization header. Would you agree with that feature request? If yes I could also offer to dig myself into the code and send a pull request.
Keep up the very good work!
Greetings from Germany,
Felix

hi I am getting the error: "element.editable is not a function",
what may cause that? i do include the froala-editor js file

i want to set imagename ，how can i reslove it ?
thanks

Hi,
I am currently using froala in test application.
I render my html using ui-bootstrap popover. But it is not rendering the videos i am attaching using links. Pictures and other stuff works fine though.
Am I missing anything? Or is there any problem?
Thanks.

Hello. What i mean you could check here:

http://embed.plnkr.co/0eUe4bXma84BNZwzKebn/preview

(yes, i didn't use angular-ui for some big reasons)

steps to reproduce:

go to link http://embed.plnkr.co/0eUe4bXma84BNZwzKebn/preview
enter some text
select some text
copy this text
try to copypaste this text in ie
as result i see new <br> tags but no content is copied.

seems that something is not working...

but in other browsers all is ok

also for some reasons when i try to copy from ie and paste to chrome i get additional tags from head of the app like:

<p><br>
</p>
<!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
<p><br>
</p>
<!-- build:css(.) styles/vendor.css -->
<p><br>
</p>
<!-- bower:css -->
<p><br>
</p>
<!-- endbower -->
<p><br>
</p>
<!-- endbuild -->
<p><br>
</p>
<!-- build:css(.tmp) styles/main.css -->
<p><br>
</p>
<!-- endbuild -->
<p><br>
</p>
<!-- ngRepeat: (routeCtrl, cssUrl) in routeStyles -->
<p><br>
</p>

I have the following code:

app.controller('rteController', function ($scope) {

                $scope.rteModel = "Hello world from AngularJS text area!";

                $scope.froalaOptionsRTE = {
                    height: 300,
                    width: 650,
                    inlineEdit: false,

                };
});

  <textarea id="area" froala="froalaOptionsRTE" ng-model="rteModel" ></textarea>

And when the page loads, the froala editor displays the undo button enabled.

If I press the undo button it clears the text.
Is it possible to change it to disable the undo button upon initialization? Or is this a bug?

Thanks.

Hello.
I have one trouble and i do not have any ideas how to solve it (i checked up docs as well).

I use delete method to delete files from the server, like:

  afterRemoveImage: function (e, editor, $img) {
     ***
  }

and now i have question: how could i delete images only after i click save button for example?

i try so:

after every image delete do not delete this image, but store url (or id of image) in some array then after click on save button delete all images from this array, but! there is one bad case - if user press ctrl-z or pressed undo button: image will return back, but it's id is stored in array to delete.

is it real with froala to handle undo event's on images?

maybe you could give some ideas...
thank you.

http://editor.froala.com/methods#save

This method should return a callback after successful posting or on error.

Hey,
I want to upload files to a different server. Is there a way to achieve that?

Thanks.

https://github.com/froala/angular-froala/blob/master/README.md

The non closing textarea tag causes rendering issues with angularJS.

I've got an error:

looks like the link handler in froala derective expects that element parameter is a jquery object, but it is not. if add element = $(element) after 15 line in angular-froala.js it's partly fixed.

What I missed in module set-upping? :)

Hi, i try to remove image from server after it uploaded in editor. I use imageDeleteUrl but i have no effect. I need help.

I'm getting this error when the program tries to run

element.editable('setHTML', ngModel.$viewValue || '', false);

I believe that it's refering to editable being undefined. I have jquery 2.1.1 script before angular and angular-froala but I still get this error. Do you have any idea what this might be?

Hi,

I am using froala with angularjs. Some of the fields on my page require the inline mode to be set as false which I am doing by following code.
.value('froalaConfig', {
inlineMode: false,
placeholder: 'Enter Text Here'
});
Apart from this, on the same page I do need inline mode to be set as true for other field. Can you please guide me how can I do that ?

Hi, I'm trying to use your code to work with the froala editor using a custom dropdown. Anyway, I'm not sure about how to integrate the code adding the dropdown into the Angular scenario: given that I can retrieve a reference to the editor instance from the options set in my controller ($scope.froalaOptions=...), I should first set these options, then define and register the dropdown using the editor instance got from them ($scope.froalaOptions.froalaEditor), and finally set the toolbar buttons from the options, including the newly defined dropdown.

Apart from the fact that I'm not sure if I can set the buttons options again after setting them once, this does not work, as at the time I try to define the dropdown the editor instance reference is still undefined. You can find the full repro code here:

http://plnkr.co/edit/PnqnifGE54vMUzk28Jwf

Just uncomment the call to the addDropdown function and its following lines to see the error. Other than that, the code works. Could anyone suggest the correct way for doing this? Thanks!

The problem is angular uses $http for all server related communication and I can modify the request with $http interceptor if I need to send some Authentication tokens.

But I'm presuming this plugin, as it was ported from jquery is not using $http, thus when making server related calls bypasses the $http interceptor, thus not letting me modify the request header. So JWT auth is practically not working.

Hi. How to support 2.0 version?

I mean, for example before we have in controller:

$scope.froalaOptions = {
  placeholder: ///,
  imageUploadURL: ///,
  headers: {
    Authorization: ///
  },
  fileUploadURL: ///,
  events: {
    imageError: function() {
      ///
    },
    fileError: function() {
      ///
    },
    imageInserted: function(e, editor, img) {
      ///
    },
    afterRemoveImage: function(e, editor, img) {
      ///
    },
    onPaste: function(e, editor, html) {
      ///
    },
    afterPaste: function() {
      ///
    }
  }
};

now such code didn't work

$scope.froalaOptions = {
  placeholderText: ///,
  imageUploadURL: ///,
  requestHeaders: {
    Authorization: ///
  },
  fileUploadURL: ///,
  events: {
    'image.error': function() {
      ///
    },
    'file.error': function() {
      ///
    },
    'image.inserted': function(e, editor, img) {
      ///
    },
    'image.removed': function(e, editor, img) {
      ///
    },
    'beforeCleanup': function(e, editor, html) {
      ///
    },
    'paste.after': function() {
      ///
    }
  }
};

even if i loose '' symbols (

image.error: function() {
  ///
},
file.error: function() {
  ///
},

)

how to run this up?

Hi,

I am using the Froala Editor with Angular on my site. I am getting issue

"Froala requires jQuery, are you loading it before Angular? <textarea id="txtPostEditor" froala="addPost.froalaOptions" ng-model="addPost.welcomeMessage" class="ng-pristine ng-untouched ng-valid ng-isolate-scope""

Did anybody faced this issue? Please help.

Regards,
Manik Mittal

https://editor.froala.com/server-integrations/php-image-upload

Hello. Could you please provide information:

how could i send authToken and some other headers in imageUpload code?

 $(function() {
    $('.selector').editable({
      // Set the image upload URL.
      imageUploadURL: '/upload_image.php',

      imageUploadParams: {id: "my_editor"}
    })
 });

params i see, but how to be with custom headers like authToken etc?

For below example, when uploading a file I need to pass a orderid to the "upload_file" url, but the orderid may be changed by user dynamically. Will the directive monitor the $scope.froalaOptions changes? If not, how can I do this? Thanks in advance.

function myCtrl($scope){
$scope.myHtml = "Hello World"
$scope.froalaOptions = {
fileUploadURL: '/upload_file?orderid=XXXXXXXX'
}
}

I've had to manually modify angular-froala.js on my end to include this. Is there any particular reason it's not currently being done?

Hi.

I get the following error:

Object doesn't support property or method 'editable'
at link (../angular-froala.js:82:5)

it is this line "var froala = element.editable(options).data('fa.editable');"

I appreciate your help. Thank you

I am trying to upload the image with image title. But sometimes froala is wiping out the image title and float property of the image while normalization or sanitization process. This is happening very frequently. Any help will be really appreciated.

Hi,

Is there a way to generate the Angular Froala Editor at runtime. I have a directive inside whichi want to generate the Froala Editor at the click of a button. I dont want to have the HTML in place before the button click. It is like clicking on the Edit button and the existing html converts to Froala Editor for editing.
Thanks in advance,
Manik Mittal

Thanks for the great angular plugin. When can I use 'froala events' in angular plugin?

If you are not planning to release it soon, can you please guide me how can I use it?

Hey,

I wanted to test out the Froala WYSIWYG editor in my AngularJS v1.3.15 app. I installed via bower and launched my app on the development with a local IP address 192.168.0.X I received the error message "Unlicensed Froala Editor." How can I test this editor to see if it's worth purchasing a license?

Thanks!

This module does not allow to implement different language while using RequireJS.

See jsfiddle: http://jsfiddle.net/8g6aq30x/1/

I have a collection of objects that's used in an ng-repeat. When the repeated content contains a froala editor and I remove an item from the collection, I get a JS error from angular-froala when it tries to destroy the directive: "TypeError: Cannot read property 'destroy' of undefined".

Was able to reproduce in attached jsfiddle.

In protractor tests, for normal textarea we can write text using sendKeys function. But for froala editor, it throws error: unknown element: cannot focus element

For example: in config i try to code, that all popup's are attached to .froala-wrapper.f-basic, but then i didn't see any popup, even if i try to change z-index etc...

so: i append such code in config:

editorClass: "my-custom-class",
scrollableContainer: '.my-custom-class'

and any popup is displayed (case when froala editor is in bootstrap modal with fixed editor height)

you could try it here https://editor.froala.com/ if you set editor height to fixable, and uploading very tall image: with image popup position is something wrong. Screenshot: http://prntscr.com/6krb77

Take a look at this. Thank you.

I've been getting the above error at lines:

78 element.editable('setHTML', ngModel.$viewValue || '', true);

and

81 var froala = element.editable(options).data('fa.editable');

My load order is as follows:

jQuery 1.11.1
angular-froala
froala-sanitize

Hello. I have one trouble: when i use this textarea form with bootstrap modal window i could not change any link or text, i mean:

https://dl.dropboxusercontent.com/u/59666091/Screenshot_1.png

https://dl.dropboxusercontent.com/u/59666091/Screenshot_2.png

how could i fix this?

React support would be great

Is there a reason why dependency for angular-froala is named FroalaWysiwygEditor?
"FroalaWysiwygEditor": "1.2.4",

Do I need to install froala as well or just angular-froala is enough, while it's downloading same froala under different name?

Hi,

This is not an issue but rather a question on how to achieve this. I followed the instructions in your page and in demo page but with the editor, I cannot see the buttons visible at the top of the textarea. The buttons are only visible in a pop-up when I select a text in editor. How can I make the editor buttons to be visible at the top of the textarea simlar to the basic.html sample in Froala?

Thank you for your support.

I use Angular UI Modal ($modal).
The editor throws exception when modal is closing. It has something to do with the call to editable('destroy')