How to Use:
textAngular.jsin your project, alternatively grab all this code and throw it in your "
directives.js" module file.
textAngularin your main app module.
- Create an element of some kind. (div, whatever, doesn't matter)
- Add the
text-angulardirective to it.
- Add a
text-angular-name="<YOUR TEXT EDITOR NAME>"directive to the element, as well.
- Create a textAngularOpts object and bind it to your local scope in the controller you want controlling textAngular It should look something like:
- If you want all editors to have individual settings: Proceed to 2. Otherwise go to 3.
- Create the
textAngularEditorsproperty manually (it will get created regardless, if you choose not to apply individual settings).
- 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:
- Globally inherited settings for each editor or individual settings? Either way you'll need to supply some options!
<STRING> the default html to show in the editor on load (also will be the property to watch for HTML changes!!!)
<ARRAY of OBJECTS> holds the toolbar items to configure, more on that later
<BOOLEAN> disable all styles on this editor
<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
<STRING> Can be an angular express, html, or text. Use this to add icons to each tool i,e
<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 ;-)
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 :
<OBJECT> the actual editor element
<OBJECT> the toolbar wrapper
<OBJECT> each toolbar item
<OBJECT> the form that holds the insert stuff
<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:
$watch for changes:
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!