Chrome is fine. In IE as soon as you mouse click in the textarea of the WYSIWYG, BOLD is highlighted automatically without any typing or any current text in the textarea, and if you type something and highlight your text and then click BOLD it will not bold. All the other tools seem to work fine (although changing font color seems not to work either in IE). Please advise. Thanks

I have worked with the Plunker code and also downloaded the copy but I am unable to change the height of the actual WYSIWYG box. It is staying at the default height. Any thoughts?

This directive does not has a demo page....

I think it would help to have a way to see how it looks like without needing to "download & install" ... ;)

Thanks!

Hi,
first of all congratulation for the great and lighweight module.
I had an issue when pressing spacebar. The editor doesn't print the space but it falls down with the default behaviour of scrolling the whole webpage.
I checked the code and fixed it by adding

event.stopPropagation();

at the end of the event handler on keydown

Following the piece of code

textarea.on('keydown', function (event) {
            if (event.keyCode == 9) {
              var TAB_SPACES = 4;
              var html = textarea.html();
              var selection = window.getSelection();
              var position = selection.anchorOffset;
              event.preventDefault();  // html = insertTab(html, position);
                                       // textarea.html(html);
                                       // selection.collapse(textarea[0].firstChild, position + TAB_SPACES);    
            }

            // THIS IS THE LINE I ADDED <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<
            event.stopPropagation();
          });

Is it possible to add in the ability to specify ng-model-options for the editor? I would like to be able to use the debounce option.

https://docs.angularjs.org/api/ng/directive/ngModelOptions

I really like what you've got going with this, but the one thing that I would really need is image resizing. I'm looking to implement an angular wysiwyg editor to create a cms. If you think there is an angular component that would be a better match, I would appreciate a recommendation!

When I'm writing and the clicked on any option (e.g. bold, font-size..) and I keep writing the cursor begins at the starting position of textarea. How can I fix this?

I would appreciate any help :) 👍

In readme is mentioned the **disabled Disable the buttons and wysiwig area option
I tried it in several ways but no success:

<wysiwyg 
          textarea-id="question" 
          textarea-class="form-control"  
          textarea-height="180px" 
          textarea-name="textareaQuestion" 
          textarea-required 
          ng-model="data.text" 
          enable-bootstrap-title="true"
          disabled="disabled">
</wysiwyg>

or

<wysiwyg 
          textarea-id="question" 
          textarea-class="form-control"  
          textarea-height="180px" 
          textarea-name="textareaQuestion" 
          textarea-required 
          ng-model="data.text" 
          enable-bootstrap-title="true"
          disabled="true">
</wysiwyg>

or

<wysiwyg 
          textarea-id="question" 
          textarea-class="form-control"  
          textarea-height="180px" 
          textarea-name="textareaQuestion" 
          textarea-required 
          ng-model="data.text" 
          enable-bootstrap-title="true"
          disabled>
</wysiwyg>

Am I doing something wrong? Thanks.

It seems that the fragment of the menu isn't appended in its container "div.wysiwyg-menu", when the directive is called in a modal window.

TypeError: Cannot read property 'appendChild' of null at Object.createMenu (http://localhost:1337/lib/angular-wysiwyg.min.js:313:14) at Object.compile (http://localhost:1337/lib/angular-wysiwyg.min.js:54:17) at applyDirectivesToNode (http://localhost:1337/lib/angular.js:7459:32) at compileNodes (http://localhost:1337/lib/angular.js:7000:15) at compileNodes (http://localhost:1337/lib/angular.js:7012:15) at compileNodes (http://localhost:1337/lib/angular.js:7012:15) at compile (http://localhost:1337/lib/angular.js:6907:15) at applyDirectivesToNode (http://localhost:1337/lib/angular.js:7386:33) at compileNodes (http://localhost:1337/lib/angular.js:7000:15) at compile (http://localhost:1337/lib/angular.js:6907:15) <div textarea-id="inputText" textarea-class="form-control" textarea-height="120px" textarea-name="inputText" textarea-required="" ng-model="message.text" enable-bootstrap-title="false">

The following exception is raised (even on the demo) when loading the page

13:47:51.732 Exception { message: "", result: 2147500037, name: "NS_ERROR_FAILURE", filename: "http://localhost:4000/src/angular-w…", lineNumber: 322, columnNumber: 0, inner: null, data: null, stack: "link/scope.format@http://localhost:…" } "

In your code I found

...
textareaPlaceholder: '@textareaPlaceholder',
...

so I tried

<wysiwyg
        textarea-id="question"
        textarea-class="form-control"
        textarea-height="250px"
        textarea-name="textareaQuestion"
        textarea-required
        ng-model="reportItem.notes.text"
        enable-bootstrap-title="true"
        ng-if="editMode"
        textarea-menu="wysiwygMenu"
        textarea-placeholder="Add some notes to the chart.">

and it doesn't show the placeholder text in the wysiwyg "text area". Am I doing something wrong or this is just not functional?
Thx

My html

<div class="row">
    <div class="col-xs-12">
      <div class="form-group">
        <label class="control-label">My label 1</label>
        <wysiwyg ...></wysiwyg>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-xs-12">
      <div class="form-group">
        <label class="control-label">My label 2</label>
        <wysiwyg ...></wysiwyg>
      </div>
    </div>
  </div>

Here is the result

I guess the problem comes from selections like var menuDiv = document.querySelector('div.wysiwyg-menu'); because your are not selecting from the element var given in the link function.

Any chances to get a quick fix ?

IMO: Seems like a confusing usability issue.

Open the Demo.
Put cursor after "hello" in the textarea.
Click Bold. (note: bold is now depressed)
Start typing some chars (note: chars are Bold)
Click Bold on the toolbar (issue: it does not toggle off).
If you click back to the textarea, now Bold toggles off.

Seems the Bold and Italics buttons are getting their state indicated by the cursor location in the textarea.

How i can add more pixel sizes in editor. like i want to add pixel size as 72px etc. cant able to add more px. sizes. any one have solution? thanks.!

Are there any plans to add this button?
Thank you for the nice control!

it was fixed already in this pull request #18
but you seemed to revert the change with this commit: 987690f
is there a reason why?

I am trying to install this without bower/bootstrap. Is this possible (I am to custom style it)?

Hello, I would like to know if there is any workaround or something where I can define blur and focus events and make edits based on that. Cheers!

I am thinking of using your wysiwyg editor which looks nice and simple. I have used textAngular, but having some problems with it, but wondered if you editor can cope with custom buttons? One option i would like is too open a modal window when the insert image button us pressed and allow the user to pick an image url. Can this be done?

Also your demo link on the readme doesnt work, which you may want to change..

Hi,

can you use angular array annotation like

someModule.controller('MyController', ['$scope', 'greeter', function($scope, greeter) {
  // ...
}]);

and use like jshint (easy with grunt task) to correct missing semicolon, double quotes etc ?

I just spent 30min to fix the script in a fork (I can't PR because there is code you don't want).

Thanks

Is that possible to set maxlength on wysiwyg tag?

Is it possible to customize the toolbar?

Jquery isn't listed as a dependency, but it doesn't seem to function properly without it. So to save confusion it may be best to add jquery as a dependency in the bower.json and in the readme :). Great little module!

My form keeps trying to submit every time I click one of the buttons. Not seeing anything special in my form that would cause this. Has anyone else seen this?

Great solution
Missing like in all is image insert/upload to server / browse server can you add this

You literally get stuck in quote.

Maybe I take it back about this library! Might need some more testing.

Can you add disable content option?
I have it here : https://github.com/mishavp2001/angular-wysiwyg
Its useful for read only display.

Hi,

to avoid any complicated custom buttons, could we have a selectbox where we can supply some css classes to apply on a selected text ?

Would be an awesome feat to provide custom css easily.

in IE 9 the icons are surrounded by undefined. Any idea?

//This also happens to be the default menu options.
    $scope.yourModel.customMenu = [
            ['bold', 'italic', 'underline', 'strikethrough', 'subscript', 'superscript'],
            ['font'],
            ['font-size'],
            ['font-color', 'hilite-color'],
            ['remove-format'],
            ['ordered-list', 'unordered-list', 'outdent', 'indent'],
            ['left-justify', 'center-justify', 'right-justify'],
            ['code', 'quote', 'paragragh'],
            ['link', 'image']
        ];

You have the typo in word 'paragragh'. It should be 'paragraph'. This causes the paragraph button doesn't show and "cannot create this element." displayed in console.

Buttons are not being highlighted on selection. Bold button is not being assigned the expected '.active' class even when bold is selected.

using Angular 1.3.7

Works well if Jquery is included, but I was trying to avoid including jquery.

It is important to have the tab button indent. Really not useable without this IMO.

Great library otherwise! very lightweight and easy to integrate.

Hi,

Thanks for the Angular WYSIWYG plugin.

Angular WYSIWYG editor is working perfectly in all broswers like Google chrome, firefox etc except Internet explorer 11.

Please refer the screenshot of issues

Plunker page without any modification

Step to reproduce the issue

1. Enter some text in text editor
2. Select the text and click any alignment button, like left justify, center justify & right justify
3. Now the editor button / tools will collapse / break as shown below.

Please suggest the solution for this. Your help is highly appreciated.

I'm using your directive with bootstrap 3 and Angular 1.3. I've found that when I highlight text and click "Bold" (or any other formatting change) and then immediately save, the formatting changes are not saved.

Digging a little deeper, I noticed that clicking toolbar buttons does not trigger the event listener that copies changes back to the ng-model variable:

            textarea.on('keyup mouseup', function() {
                scope.$apply(function readViewText() {
                    var html = textarea.html();
                    if (html == '<br>') {
                        html = '';
                    }
                    ngModelController.$setViewValue(html);
                });
            });

That's find for command buttons that only set mode, but can lead to unexpected behavior for command buttons that modify text.

Changes are captured correctly as long as you click or type at least once inside the textarea before saving.

I'll keep messing with it and let you know if I find a fix before you have a chance to look at it.

Can you add headers ? h1, h2, h3 ...

Hello, Are you providing special characters button in your editor. can i customize this editor with special symbols?

how can i fire event such as format('bold') with in controller ?

the editor when place on top make the color picker tooltip hidden, why not make it appear at bottom of the icon rather than top of it,

I've try using this but it return a lot of error, while handling the textModel, become unresponsive to select the text in text area.

Validation errors of the angular-wysiwyg are not showing as part of the errors of the parent form. Is that the expected behavior? How to get the validation errors from angular-wysiwyg ?

After adding it to my project, it I throws this error:

Error: [jqLite:nosel] Looking up elements via selectors is not supported by jqLite!

But the README.md Required dependancies doesn't have jQuery.

Not sure what I've missed, but always getting this error:

element.find(...).tooltip is not a function
    at configureBootstrapTitle (http://app.northbrasil.com.br/bower_components/angular-wysiwyg/dist/angular-wysiwyg.js:203:43)
    at init (http://app.northbrasil.com.br/bower_components/angular-wysiwyg/dist/angular-wysiwyg.js:182:11)
    at link (http://app.northbrasil.com.br/bower_components/angular-wysiwyg/dist/angular-wysiwyg.js:178:9)

When i use angular-wysiwyg it's working fine in modal but color-picker is not showing in modal it is relative to body not modal.

Hi,

I need to use links to show a title instead of link. Today it's

<a href="http://www.google.fr">http://www.google.fr</a>

I would like to be able to do

<a href="http://www.google.fr">access google page</a>

To do so a simple way would be to add another alertbox to enter en title

Here is the screenshot.

What could be the reason? Thanks.

Your wysiwyg editor is prone to multiple xss security vulnerabilities via 'on' events (onclick, onerror, etc.), and potentially others attributes that let's you inject javascript code.
PoC :
<img src='http://invalidimageurl.com/lakzelazkemlkazmlek' onerror='alert(document.cookie)'/>

Xss may let you steal sensitive session information, and thus, impersonate an authenticated user.
I can't use this module since i need 'bullet-proof' user-input sanitization of a text-editor.

Ref:
https://www.owasp.org/index.php/Cross-site_Scripting_(XSS)

Regards

Come on!

angular.js:13550 Error: [jqLite:nosel] http://errors.angularjs.org/1.5.5/jqLite/nosel
at Error (native)
at http://localhost:8080/outil-evaluation/front/bower_components/angular/angular.min.js:6:412
at Object.U as element
at configureListeners (http://localhost:8080/outil-evaluation/front/bower_components/angular-wysiwyg/src/angular-wysiwyg.js:202:29)
at init (http://localhost:8080/outil-evaluation/front/bower_components/angular-wysiwyg/src/angular-wysiwyg.js:164:21)
at link (http://localhost:8080/outil-evaluation/front/bower_components/angular-wysiwyg/src/angular-wysiwyg.js:157:17)
at http://localhost:8080/outil-evaluation/front/bower_components/angular/angular.min.js:80:293
at ja (http://localhost:8080/outil-evaluation/front/bower_components/angular/angular.min.js:80:350)
at n (http://localhost:8080/outil-evaluation/front/bower_components/angular/angular.min.js:66:28)
at g (http://localhost:8080/outil-evaluation/front/bower_components/angular/angular.min.js:58:305)

I am using meanio https://github.com/linnovate/mean and the dynamic twitter bootstrap tooltip is erroring out. I can manually do tooltips.

Any insight on why. I am using ui-bootstrap as well as bootstrap.

element.find('button[title]').tooltip({container: 'body'})