Showing posts with label textAngular. Show all posts
Showing posts with label textAngular. Show all posts
textAngular

textAngular

February 15, 2018
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!

 

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:

Note

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:

Issues?

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!


Note: Special thanks to Austin Anderson
Disclaimer: The blog is created to share angular directives information to geek, curious Angular Developers.