http://www.w3.org/TR/html5/forms.html#the-required-attribute

<div ng-wig="textModel" buttons="bold, italic, link, list1, list2, formats"</div>
On copy paste event of any html documents, all img etc. html tags will inserted into. How it dissalow?

How can I overwrite templateUrl without modifying ngWig directive itself?

the area is not getting focus when the height of editor is fixed and it's bigger then heights of the text

It would be nice if the consumer could use the ng-disabled attribute to show the text editor as disabled. In this case we would want the text-area to be non-editable and the buttons to be always disabled. This would be useful for cases where you want to conditionally enable/disable the editor, or perhaps use the same display for a read-only view.

When I try to use your directive with IE8, the toolbar images donot appear.

I suspect related to IE8 not supporting svg

How can i customize the toolbar? For example i want to remove the heading button.

regards

When I create a link, I cannot unlink (only by deleting the linked word).

I'm getting a failure when I try to install the ng-wig package through npm. It almost looks like it's trying to run some sort of post-install script and failing on it, but I haven't been able to figure out how to fix it.
The error is as follows:

Any help with this would be much appreciated

When I click the "link" icon
and click cancel on the popup
it inserts "http://" in the text

I expect nothing to happen when I click cancel

STR:

1. Open page with ng-wig editor
2. Start typing something in visual mode, giving some line breaks
3. Click "HTML source"
   Expected:
   <p>text1</p><p>text2</p>
   Actual:
   <div>text1</div><div>text2</div>

could you please add a minified version of the ng-wig.css file inside the dist folder?

Hi,
I've added the component to our project and under FF i'm unable to click inside freely the cursor sticks to the place before the first character. I can write and press enter for new line but thats all.

Any idea,
Thanks in advance

On every initialisation ng-wig tries to load 'http://localhost/undefined' and fails.

It seems like it tries to load a css style inside an iframe, but scope.cssPath is undefined.

init ng-wig.js:118
invokeLinkFn angular.js:8141
nodeLinkFn angular.js:7653
compositeLinkFn angular.js:7009
compositeLinkFn angular.js:7012
nodeLinkFn angular.js:7648
(anonymous function) angular.js:7884
processQueue angular.js:13073
(anonymous function) angular.js:13089
Scope.$eval angular.js:14289
Scope.$digest angular.js:14105
Scope.$apply angular.js:14393
done angular.js:9567
completeRequest angular.js:9754
requestLoaded angular.js:9695

When trying to bind a custom paste function, on IE I encounter this problem with this line (ng-wig.js, line ~151).

var pasteContent = (event.originalEvent || event).clipboardData.getData('text/plain');

Throws an error on IE, due to it not supporting text/plain and only Text. It pastes the raw data still, but I am unable to fire my custom function.

This is not a problem with ng-wig itself, but might be useful for others who run into the dreaded "Where are my list items gone ????" problem.

If you are using ng-wig inside a modern CSS framework such as Bourbon, your list styles can get redefined away, and at first glance it's pretty hard to work out where to fix the problem.

Manually overriding just the "list-style-type" in your CSS wont bring them back :(

.... But, manually overriding the list-style-type AND manually overriding the left padding back to a sane default does the trick.

.nw-editor {
 // .... as per the standard css for ng-wig

 // now add these 2 blocks : 
  ol {
    list-style-type: decimal;
    margin-bottom: 1px;
    padding-left: 60px;    
    //@extend %default-ol;
  }

  ul {
    list-style-type: disc;
    margin-bottom: 1px;
    padding-left: 60px;
   // @extend %default-ul;
  }
}

Seems like these CSS frameworks hide the list styles by fiddling with the left padding, which causes havoc with the ng-wig control.

Hope that helps someone out there.

When you look at text in html, it's not very convenient to read. Indention on html would be convenient.

When I do copy from a word docs and paste in to the component it keeps all the fonts from the word docs.
Is there a way to disable this kind of behavior?

I wasn't able to find a license file or one mentioned in package.json, the readme, etc. Would it be possible to add an appropriate license?

Hi,

Could you please point me where did you get your icons from?

It's not really good UX to have an alert, because it can easily be blocked by the user. Could you implement some other solution?

Currently, pasting using a custom function calls this line

var pasteContent = (event.originalEvent || event).clipboardData.getData('text/plain');

This tries to get the plain text of the line. But if we want the HTML content, we must perform our own actions on the event object. The paste functionality could be enhanced to (optionally) try to get HTML first, then plain text second.

var contentToProcess = (event.originalEvent || event).clipboardData.getData('text/html');

if (!contentToProcess) {
   contentToProcess = (event.originalEvent || event).clipboardData.getData('text/plain');
}

Though, you will run into issues on IE due it it only accepting Text as a parameter of getData. Will need to consider this article to try and get pasting HTML to work on IE https://www.lucidchart.com/techblog/2014/12/02/definitive-guide-copying-pasting-javascript/

Very good addition would be auto-expanding of the editable area once amount of text becomes too big (so that there's no vertical scrolling)

Missing implementation of link functionality

remove "Auto-expand editor" area and make editor container auto-expand by default

Hi,

I was just thinking for adding a button to clear formatting of a selected piece of text. What's your opinion?

Thanks!

Module name is not 'ng-wig' but actually 'ngWig', Return error on first install.

And return undefined on line 120 of ng-wig.js

@stevermeister I have been using your plug-in, great by the way and love the new feature of the on-paste feature, which I am currently using.

I needed to use the paste feature to check if the text pasted in was UTF-8 encoded, and after reading your documentation and digging through the paste object I noticed that clipboardData is actually in the originalEvent object within the pasteEvent, so rather than pasteEvent.clipboardData.getData('text/plain') it should be pasteEvent.originalEvent.clipboardData.getData('text/plain');

Thanks again.
Tom

Text is going out of the boundary in rich-text in Ipad. Scrollbar is not functioning when opening in Ipad.

In order to give style to edited text we need to include ng-wig.css inside iframe (as a link) and add class "nw-content" to iframe's

STR:

• init some ngWig editors on page
• click "Source" button in first one
• highlight part of text in second
• click "Bold" button in first
• font weight of highlighted text in second editor changed to the bold

Is there a alternative way to use this editor non-AngularJS environment?

It would be great if someone can develop a feature to add special characters as an html entity into the editor. Insert a special character say copyright symbol © in the editor so that the produced HTML is ©

Hi,

I want to insert an html image to editor in javascript. How can i achieve that?

Looks like the incorrect spelling as been pasted in a few places. Builds, but worth fixing.

I noticed that I'm getting live reload insertion while I'm using grunt within my project. It'll create data as it should, and append a <script> inside of it all like so:
<p><ul><li>kljsdf sdfdfs<br></li></ul><div><br></div><h1>yfd</h1></p><script src=\"http://127.0.0.1:35729/livereload.js?ext=Safari&amp;extver=2.0.9\"></script>
For any page that I'm inserting this live reload into.

I could use some expertise on how to correctly install this on an existing angular project. i tried to copy the files from the ZIP into my "content" directory and run the script in index.html, however i receive the following error when my app.js attempt to import the module.

"Uncaught Error: [$injector:modulerr] Failed to instantiate module app due to:
Error: [$injector:modulerr] Failed to instantiate module ngWig due to:
Error: [$injector:modulerr] Failed to instantiate module ngwig-app-templates due to:
Error: [$injector:nomod] Module 'ngwig-app-templates' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument."

Ideally, toolbar buttons should have "active" state. e.g. when current block of text is formatted as "ol", the "ol" button should have "active" state

<textarea
      required=true
      name="deal_public_description"
      ng-model="description"
      ng-maxlength=3000
      ng-minlength=300
      cols="30"
      rows="10"
      ng-wig="description"
      data-autoexpand="off"
    >
</textarea>

is valid when description =

0123456789
0123456789
0123456789
0123456789
0123456789
0123456789
0123456789
0123456789
0123456789
0123456789
0123456789
0123456789
0123456789
0123456789
0

155 characters

Hello,

Had a quick question. I've tried setting the width and height on ngWig several different ways. It seems like no matter what i do, the change to height, changes the height of the actual text area, but leaves the box the same size, and also causes any form elements under the ngWig to raise and overlap the box. I've tried setting cols and rows like such:

and tried changing the style

Any info on what I should do here?

Thanks!
B

Steve,

Is there anyway you could add a directive features to add custom $sce filter to allow the css attributes of ng-wig go through when binding with ng-bind-html?

More like suggestion, but would be nice to enable/disable options for different ngWig instances (e.g. first one doesn't have alignment, but the second one has).

Would be nice if you could choose which buttons that should be visible.