An interesting request in issue #51 where @nizsheanez wanted to dynamically include a checkbox directive in his code.

I think we can support this but I don't like the catch all way of just compiling the entire editor as this allows any user to put in arbitrary angular directives onto the page.

At this point I'm not entirely sure whether this is a good idea or not and whether there is an elegant solution.

I'm using angular 1.0.8 , when I inject the textAngular in to my main.js there is error:

 Error: Unknown provider: eProvider <- e <- textAngularDirective

any idea why?

I want to append list of text editors
but when I use in ng-repeat like this:

$scope.list = [
{textAngularOpts:...},
{textAngularOpts:...},.....
]

ng-repeat='node in list'

its not working
because according to the textAngular requirements this attribute must be found inside the scope, ng-repeat makes a scope for every item so this attribute can be found in scope.node

So I have done some custom modification in textAngular.js I replace
scope.$parent by scope.$parent['node'] and
scope.$parent.$watch(' by scope.$parent.$watch('node.

which work
so I suggest their has to be an option for this

I wan't to create button in toolbar, which will insert some angular directive in editor.
So, if i insert some directive, i must to $compile it:

checkbox: {
   display: "<button type='button' ng-click='action()' ><i class='fa fa-check-square-o'></i></button>",
   action: function () {
       var element = $compile("<eg-todo>")(this.$parent)
       //we have some dom element
       //how to insert it into editor?

    }
},

Hey, when i run this thru uglifier it balks here complaining mouseup doesn't exist. Its probably because 'use strict' is being thrown in somewhere. Simply changing it to:

var mouseup = function(e) {

fixes it.

I have a model that looks a bit like:

{ comments : null }

This is referenced like so:

<div text-angular ng-model="commentResource.comment" id="description" name="description"></div>

Now i recreate the commentResource

$scope.commentResource = new commentResource();

The value shown in the text angular box is not updated. I've tried with a normal input type=text and the value is updated. I can work around this by explicitly setting the comment field to null after recreating the model... which is weird :)

$scope.commentResource = new commentResource();
$scope.commentResource.comment = null; //textangular binding issue

Doesn't work on textangular.com's demo, or on what I have running locally. (Latest Chrome stable, AngularJS 1.2.2).
Once you've entered a link and press okay, nothing appears to be changed in DOM.

Also, docs make no mention of the text-angular-name="name" attribute, which as far as I can tell is entirely necessary to get the editor to work.

Hi

First of all, you guys are doing an awesome job. Requests are implemented very fast!

So what I was wondering, and maybe it's me missing something. Is it possible to configure text-angular once? I have a lot of pages and a couple of WYSIWYG editors in my website. Is it possible to configure it in my app.configure or something instead of configuring it in every seperate controller individually?

I'm just wondering, if it's not possible I will leave it implemented as is now.

Thanks in advance.

Is it possible to submit the generated html to a form like a normal input field? Something like

<text-angular ng-model="mymodel" name="hello" />

And on the serverside, the html can be found in the postbody's hello variable?

Move the default global variables; $rootScope.textAngularOpts and $rootScope.textAngularTools to use the module.value(key, value) method.

See here: http://stackoverflow.com/questions/13015523/angular-js-is-value-the-proper-way-to-set-app-wide-constant-and-how-to-retri
and here: http://docs.angularjs.org/api/angular.mock.inject

Related to: #42

Allow nested ols and uls

• Here's a list
• I have numbered children
  1. Primus
  2. Secundus
  3. Tertius
• I have bulleted children
  • Bob
  • Alice

I am building a small CMS with textAngular as the awesome WYSIWYG Editor, but so far I didn't figure out how to build a custom image chooser. This is the functionality i want to achieve:

1. OnClick at the image-button, i want to open a bootstrap modal window, which contains a selection of available images already uploaded before (as thumbnails), click on one of them, and have it's url used for the inserted image tag.
2. I must be able to set a custom alt and title attribute for the image.
3. Bonus: It would be nice to edit the image src, title and alt attributes when i select the image inside the editor, and click on "image" again.
4. Drag'n'Drop an image from elsewhere of the page into the editor should append the image tag in the editor.
5. Links should be selectable form a predefined list, too.
6. Links also need a title attribute.

Is it possible to achieve all of this with textAngular?

running 1.1.2, I can currently run inline javascript through the editor with a script tag. it seems like the $sanitize service isn't successfully stopping the inline javascript. This was not happening before with 1.1.0 when ng-html-bind was being used by itself.

Glanced through the script and I see how jQuery is being used in a minimal way. Have you considered how you might do this without the jQuery dependency?

What would be the best way to add text alignment (left, right, centered) to textAngular? As far as I can tell, it doesn't support thes options "out of the box".

Go over the Readme with a fine tooth comb looking for places it can be improved with examples, better explanations and more information. Use previous tickets as a guide.

Alternately make the readme smaller and build up the wiki instead.

Have you guys thought about being able to use ng-disabled or ng-readonly on text angular elements?

I think the functionality could be quite useful, but since it's using divs, both of those attributes do diddily-squat. The ways I can think of to do this would be pretty nasty (transparent div overlay).

Any thoughts?

On the demo at http://textangular.com/ , inserting images/links/html does not work. It appears that is perhaps due to the editor window losing focus when you click into the 'insert' text field to enter a value? (thus losing track of the position in the code to insert the new element)

When the render method is invoked and the value of ngModel.$viewValue is null, the following line will throw an error (line 357):

scope.html = sanitizationWrapper(ngModel.$viewValue.replace(/</g, "&lt;"));

I've create a pull request on a fork to check if this value is null and return, but I'm not sure if this is the correct behaviour (line 353).

if(ngModel.$viewValue === undefined || ngModel.$viewValue === null) return;

The behaviour could be to set the value of 'scope.html' to an empty string. Can you give me more clarity about this, then I will create a pull request for this issue.

Hi, I didn't found the button for changing the font color， So is there a way to do that ?

In your example on http://textangular.com/ I cannot make a link.

I'm on chrome

The click on a toolbar button is firing the ng-submit of a form automatically.
There is an option to disable this behavior or it is a bug?

To reproduce this issue use the following snippet and implement the save function

<form name="form" role="form" ng-submit="save()" novalidate>
  <div text-angular ng-model="content" id="body"></div>
  <button class="btn btn-primary">Save</button>
</form>

Here is a jsfiddle that reproduce the issue: http://jsfiddle.net/igorrafael/4k9GU/

Versions:

• angular 1.2.2
• textAngular 1.1.0

Create tests to make sure features and bugfixes don't have unintended side effects.

If you edit the text, and them change the model, the text-angular does not change.

<div ng-init='test="hello world"'>
  <input type="text" ng-model="test"></input>
  <text-angular ng-model="test"/>
  <button ng-click="test='hello world'">reset</button>
</div>

If you write something in the textbox and then click the reset button, it works fine.

If you write something in the textangular and then click the reset button, it does not work.

Hello

I use the text-angular editor in a regular form. So actually I don't need the ng-model property.

So what I have now is something like this:

<text-angular ng-model="description" name="description" ng-init="description='Test'" />

The reason I use ng-init is because the value of my description comes from the server. (I use Jade with Node.JS).

But it would be easier to use if I could just say

<text-angular name="description" value="Test" />

Because actually I don't use the ng-model. Is this even possible? It's just a suggestion.

On a standard 101 us keyboard: hold down alt and type 255 on number pad. This places the latin character ß. No keyup event occurs. So you have to type another character to see the updated markup.

Its me again ;-)

What would be really nice is having a toolbar which is only visiblewhen the user selects text in the rich text editor.

You could make a mode on the rich text editor like Mode.Fix and Model.Floating :)

This way my UI is cleaned from things which I need only in special context (selecting text)

I'm using ui-bootstrap to generate a modal dialog to capture some input before writing in the contenteditable element. However the call of this.$parent.wrapSelection does not work once the contenteditable loses the focus.

This is the custom toolbar button that I'm using:

$rootScope.textAngularTools.definition = {
    display: '<button ng-click="action()" ng-class="displayActiveToolClass(active)" ><i class="fa fa-bullseye"></i></button>',
    action: function(){
        var selectedText = document.getSelection();
        var container = this.$parent;
        var modalInstance = $modal.open({
             templateUrl: 'template.html',
             controller: 'CustomCtrl'
        });
        modalInstance.result.then(function (selectedItem) {
            if(selectedItem){
                container.wrapSelection('insertHTML', '<definition term="someId">'+selectedText+'</definition>');
            }
        }, function () {
            console.log('Modal dismissed at: ' + new Date());
        });
     }
 };

The text is supposed to be only added to the contenteditable element after the modal dialog is closed.

I tried a lot of alternatives to finally discover the problem. In the wrapSelection function, it seems to be necessary to set the focus again in the element before executing the following line:

document.execCommand(command, false, opt);

I made a small experiment changing the wrapSelection function like this:

wrapSelection: function(command, opt, updateDisplay) {
    if (scope.showHtml)
        scope.displayElements.text[0].focus();
    else
        scope.displayElements.html[0].focus();
    // the default value for updateDisplay is true
    if (updateDisplay == null) updateDisplay = true;
    document.execCommand(command, false, opt);
    // refocus on the shown display element, this fixes a display bug when using :focus styles to outline the box. You still have focus on the text/html input it just doesn't show up
    if (scope.showHtml)
        scope.displayElements.text[0].focus();
    else
        scope.displayElements.html[0].focus();
    // note that wrapSelection is called via ng-click in the tool plugins so we are already within a $apply
    if (updateDisplay) scope.updateDisplay();
},

This modification solves the problem partially, but once the focus is set to the beginning of the file, the html is added in the wrong position.

It seems that we need to save the current cursor position before losing the focus and recover it before adding the document.execCommand call.

List of items to write up that are in the Repo now. (Todo when we are ready to release v1.2.0 as the Wiki should be for the current version only).

• ng-model optional #53.
• ta-disabled and ta-readonly for text-angular and ta-bind respectively #36.
• Update how to add plugins to the toolbar
• How to use textAngularToolbar and the toolbar linker
• Using $provide.decorator to change global defaults
• Contribution guidelines

when user adds a new UL or OL through the WSYIWYG tools, the cursor disappears, and when you start to type, you are entering text above where the UL or OL starts

Ctrl+i, Ctrl+u, Ctrl+b (may be others) in FF open browser windows.
To fix it you must use keydown listener and call preventDefault when hot keys is pressed. Somthing like this:
$(editor).on("keydown", function (e) {

                if () { // ctrl+B
                    document.execCommand("Bold", false, null);
                    return false;
                }
                else if () { // ctrl+I
                    document.execCommand("Italic", false, null);
                    return false;
                }
                else if () { // ctrl+U
                    document.execCommand("Underline", false, null);
                    return false;
                }

            }) ;

This problem does not occur in FF 24.0

I tested this on Google Chrome Version 30.0.1599.69 m and also on Version 32.0.1667.0 canary Aura.

When I toggle a list item such as one in the demo: http://textangular.com/, I see a span element wrapped around the text node like:

<span style="font-size: 1.2em; line-height: 1.428571429;"> .... </span>

Perhaps it is a bug with execCommand on Chrome that textAngular needs to work around?

Markup at beginning:

<h2>Try me!</h2><p>textAngular is a super cool WYSIWYG Text Editor directive for AngularJS</p><p><b>Features:</b></p><ol><li>Automatic Seamless Two-Way-Binding</li><li>Super Easy <b>Theming</b> Options</li><li>Simple Editor Instance Creation</li><li>Safely Parses Html for Custom Toolbar Icons</li><li>Doesn't Use an iFrame</li><li>Works with Firefox, Chrome, and IE10+</li></ol><p><b>Code at GitHub:</b> <a href="https://github.com/fraywing/textAngular">Here</a> </p>

After putting cursor in the line with item 1 and clicking ordered list.

<h2>Try me!</h2><p>textAngular is a super cool WYSIWYG Text Editor directive for AngularJS</p><p><b>Features:</b></p><span style="font-size: 1.2em; line-height: 1.428571429;">Automatic Seamless Two-Way-Binding</span><br><ol><li>Super Easy <b>Theming</b> Options</li><li>Simple Editor Instance Creation</li><li>Safely Parses Html for Custom Toolbar Icons</li><li>Doesn't Use an iFrame</li><li>Works with Firefox, Chrome, and IE10+</li></ol><p><b>Code at GitHub:</b> <a href="https://github.com/fraywing/textAngular">Here</a> </p>

Continuing to toggle ordered list does not wrap the text() node with an additional span element.

As mentioned in description, similar behaviour occurs when toggling between unordered list and ordered list too.

If you type "<" or ">" then toggle to source view then back, the format will all go wrong.

Error: [$sce:unsafe] http://errors.angularjs.org/undefined/$sce/unsafe
at Error ()
at http://code.angularjs.org/1.2.0/angular.min.js:6:453
at $get.g (http://code.angularjs.org/1.2.0/angular.min.js:104:437)
at $get.getTrusted (http://code.angularjs.org/1.2.0/angular.min.js:106:227)
at Object.$get.e.(anonymous function) as getTrustedHtml
at Object.fn (http://code.angularjs.org/1.2.0/angular.min.js:175:456)
at g.$get.g.$digest (http://code.angularjs.org/1.2.0/angular.min.js:98:304)
at g.$get.g.$apply (http://code.angularjs.org/1.2.0/angular.min.js:101:12)
at HTMLDivElement. (http://localhost:3000/static/js/directives/textAngular.js:286:27)
at HTMLDivElement.x.event.dispatch (http://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js:5:9843)

I would like to ask if you would tag the repository with a version that can be used with bower. It would be nice to use a version instead of latest, so our application will not break on new commits.

If used in combination with jQuery, angular elements are jQuery elements instead of JQlite. The jQuery fn.html() method can not handle the 'trusted' HTML that JQlite requires.

For a repro: just include jQuery in the provided demo and witness the editor remain blank.

Hi,

I have this
<div text-angular ng-model="item.description" id="description" name="description" required></div>

The trouble is that (my form is called create) create.description.$dirty is true as soon as the form loads. So when this thing loads it is somehow clearing the pristine flag. I make use of $dirty in my forms to hide validation errors until the user has a had a chance to interact with the field.

The plugin is lightweight and pretty good, however it would be great if there were some tests to back up the code!

I seem to be unable to un-toggle bold, everything else works fine. As far as I can see from debugging the method gets called on every click, but it only seem to apply the bold.

I tried the 1.1.2-alpha yesterday. I couldn't get the hg-model attribute to work (it didn't pick up on any text I had in the model when displaying the textAngular widget). Reverting to 1.1.1 made it work OK. I assume ng-model binding is supposed to work with 1.1 2 as well?

In the current implementation this line in the compileHtml function strips out all class and style attributes.

var compHtml = angular.element("<div>").append(html).html().replace(/(class="(.*?)")|(class='(.*?)')/g, "").replace(/&lt;/g, "<").replace(/&gt;/g, ">").replace(/style=("|')(.*?)("|')/g, "");

To me this seems a little too draconian as it means that if I am in raw html view I can't use something like: <p class='highlight'></p> as the class attribute is stripped out. This seems a little counterproductive to my mind, what was the reasoning behind this?

I would like to use multiple "rich text editors" for a calendar/planner view. It would be really providing a more neat UI If I can configure only one format button bar for every richt text editor.

Is this possible? If not please see it as a feature request.

This is a light spec for the feature requested in #40 and #41.

textAngular as it stands has all the buttons in the toolbar as customisable plugins that the user can change at will. The core issue raised in #40 and #41 is that the toolbar itself cannot be customised so easily.

In short there were 2 requests:

• Ability to update ANY editor using a single toolbar.
• Ability to show and hide the toolbar on set conditions (#41 also requires us to be able to detect selection ranges being created)

To solve these I think the following needs to be done:

• Allow init of toolbar and editors independently.
• Editor toolbar target option, if not set it will init a new toolbar specifically for the editor. This allows for Toolbar A to be used for editor 1, 2 and 3, then toolbar B for editor 4.
• Add additional events to the editor, to start with onSelectRange, onFocusIn and onFocusOut. (mostly these will be convenience functions as you should be able to do those three already with custom code outside of textAngular).

Potential Issues:

• Active buttons logic (i.e. setting the B button as depressed when caret/cursor is in Bold text).
• Detecting which editor is focussed when applying styles.
• Disabling editors when NOT in focus.
• This can have some UX issues when you have multiple text areas for one toolbar.

Anyone else have any thoughts?

textAngular does not specify any $inject property nor uses inline bracket notation and, hence, breaks upon rigorous minification.

Since we use a bundler that applies the same strategy to all our javascript, we can not live with that.

Could not find license details in the readme or a separate license file.

Please see my pull request. I have updated the readme file to mention MIT license, if it is acceptable to you.

For example, please see the readme file at https://github.com/saintedlama/passport-local-mongoose#license , the readme file mentions the license and points to it.

Mentioning the license at end of the readme file seems to be becoming the norm.

I'm trying to instantiate textAngular in the recommended basic fashion, loading angular-sanitize and textAngular in the base index.html document, then this in the view-

<text-angular ng-model="html"/>

I get the following error on loading the view containing the above element (I have also tried it as a div with text-angular as attribute):

Error: [$injector:unpr] Unknown provider: textAngularProvider <- textAngular
http://errors.angularjs.org/1.2.0-rc.2/$injector/unpr?p0=textAngularProvider%20%3C-%20textAngular
at hasOwnPropertyFn (http://localhost:8888/js/angular/angular.js:78:12)
at http://localhost:8888/js/angular/angular.js:2997:19
at Object.getService as get
at http://localhost:8888/js/angular/angular.js:3002:45
at getService (http://localhost:8888/js/angular/angular.js:3119:39)
at invoke (http://localhost:8888/js/angular/angular.js:3140:13)
at Object.instantiate (http://localhost:8888/js/angular/angular.js:3174:23)
at $get (http://localhost:8888/js/angular/angular.js:5583:28)
at updateView (http://localhost:8888/js/angular-ui-router.js:1317:30)
at directive.compile.eventHook (http://localhost:8888/js/angular-ui-router.js:1276:17)

I've set breakpoints on the outer code which declares the textAngular directive, and within it - it's loading, the 'Thank you for using textAngular!' message appears, but the code within never executes.

Any ideas?

There's another error which appears from time to time, saying there's a circular dependency within textAngular. I haven't been able to track down what might be causing that.

JS code used:
angular 1.2.0-rc.2
angular-router 1.2.0-rc.2
angular-sanitize 1.2.2
textAngular 1.1.0

Thanks,
Kevin

The main demo site needs to be updated as it still uses the old v1.0.2, at the same time we would need to update the CDN files.

Hi, I have textAngular div in my own form. But textAngular.insertForm, which is hidden by default, has fields marked as required. This causes my parent form to think it's $invalid as soon as textAngular directive is instantiated.

Perhaps it would be good to use ng-if instead of ng-show on the insertForm, that way the parent form will not be affected unless insertForm is shown.

Hello, really great plugin!

I was wondering how difficult it would be to add an option so that instead of using the scope model as the source, use the actual contents of the div the directive is attached to...

<div id="txtScene5" text-angular>
 My Text Editable content
</div>

I've been implementing font-size, font-family based on textAngular, and might find a potential issue. If the source html have some text like

<span style="font-family: 'Courier New';">Hello</span>

will be replaced to

<span Courier New';">Hello</span>

And the root cause is below rex in compileHtml function

compHtml = compHtml.replace(/style=("|')(.*?)("|')/g, "");

just an fyi