A radically powerful Text-Editor/Wysiwyg editor for Angular.js! Create multiple editor instances, two-way-bind HTML content, watch editors for changes and more!
50 people use it
Author: 862ceb04dd2b27d26a271ad05ceb6f04?d=https%3a%2f%2fidenticons.github.com%2f2df114c154f25ea410deca8fb1b605fc fraywing



How to Use:

  1. Include textAngular.js in your project, alternatively grab all this code and throw it in your "directives.js" module file.
  2. Include textAngular in your main app module.
  3. Create an element of some kind. (div, whatever, doesn't matter)
  4. Add the text-angular directive to it.
  5. Add a text-angular-name="<YOUR TEXT EDITOR NAME>" directive to the element, as well.
  6. Create a textAngularOpts object and bind it to your local scope in the controller you want controlling textAngular It should look something like:
  1. If you want all editors to have individual settings: Proceed to 2. Otherwise go to 3.
  2. Create the textAngularEditors property manually (it will get created regardless, if you choose not to apply individual settings).
  3. Then add to it, a new property with the name of your editor you chose earlier. For instance, if it was "coolMonkeyMan" it will look like this:
  1. Globally inherited settings for each editor or individual settings? Either way you'll need to supply some options!

Global Options

html <STRING> the default html to show in the editor on load (also will be the property to watch for HTML changes!!!)

toolbar <ARRAY of OBJECTS> holds the toolbar items to configure, more on that later

disableStyle <BOOLEAN> disable all styles on this editor

theme <OBJECT of OBJECTS> holds the theme objects, more on that later

Setting up the Toolbar

Add tools to the toolbar like:


If you want to use ultra-sweet icons in the menu (like I did in the example) make sure to include fontAwesome!

And then use the proper syntax for the titles i,e <i class='icon-<icon name>'></i>

Get it at: www.bootstrapcdn.com/#fontawesome

Toolbar Options

title <STRING> Can be an angular express, html, or text. Use this to add icons to each tool i,e <i class='icon-code'></i>

name <STRING> the command, the tool name, has to be one of the following: html <- this one is used to toggle the html view, so i'd probably keep it ;-) h1 h2 h3 p pre ul ol quote undo redo b justifyLeft justifyRight justifyCenter i clear insertImage insertHtml createLink

Theming textAngular

Every piece of textAngular has a specific class you can grab and style in CSS. However, you can also use the theme object to specify styling. Each property takes a normal, jQuery-like CSS property object. Heres an example :

Theme Options

editor <OBJECT> the actual editor element

toolbar <OBJECT> the toolbar wrapper

toolbarItems <OBJECT> each toolbar item

insertForm <OBJECT> the form that holds the insert stuff

insertFormBtn <OBJECT> the button that submits the insert stuff

How to get the Editor Html

To actually get the model (watch or bind), simply follow this model:

textAngularOpts.textAngularEditors.<YOUR EDITORS NAME>.html

so to bind the expression:

or to $watch for changes:


textAngular uses execCommand for the rich-text functionalty. That being said, its still a fairly experimental browser feature-set, and may not behave the same in all browsers. I've tested in FF, chrome and IE10 and its works as expected. If you find something, please let me know. Throw me a message, or submit a issue request!

comments powered by Disqus
This page was last updated about 5 years ago.