angular-content-editable

angular directive for modify in real time any html tag you want

DEMO

Getting started:

Download the package using npm: ```bash npm install angular-content-editable ``` Download the package using bower: ```bash bower install angular-content-editable ``` or directly from github. Add the script to your page dependencies: ```html ``` And finally add content-editable to your module dependencies: ```javascript angular.module('app', 'angular-content-editable') ``` and you are ready to go, add the directive to any element you want: ```html edit my text ``` ---

Directive attributes:

single-line: if set to true makes the enter key save and blur focus-select: if set to true when element goes to focus, all the text inside will be selected render-html: if set to true allow the text passed as input to be compiled and rendered edit-callback: a callback that is called wherever the model value is changed is-editing: optional argument that can be used to programatically enable/disable the editor strip-replace: optional argument that can be true to remove all HTML tags and line breaks, string to remove or custom regular expression, or array with expression to match with replacement to and flags use: ['expression','replacement','flags'] Note that, edit-callback has two arguments, that you must specify in your template to use them: text: the new text inside the element elem: the element that has been modified

Example:

```html ``` ---

Customizations:

You can use the contentEditableProvider to set the default settings for the directive, but you can always pass directly to the directive as attributes to override the defaults for that element. ```javascript angular.module('app') .config(function(contentEditableProvider) {

contentEditableProvider.configure({

singleLine: true // single line for all elements

})

}) ``` ---

Example basic:

Simply adding the directive makes the element fully editable. ```html

Change me if you like.

``` With single-line attribute, when enter key is pressed the editing will finish (no line-breaks): ```html ``` With focus-select all text content will be selected on element click or focus. ```html Change me! ``` With strip-replace attribute set as boolean: ```html Change me!
I will become clear text without formating ``` With strip-replace attribute set as array: ```html ' ','-','gi'" content-editable>Change me! ``` If you want to run a callback you must use edit-callback attribute with a valid function and it will run every time the model value is changed. Since version 1.2.0, after issue #13 you MUST specify the arguments text, elem if you want to use them in your callback, like in this example. ```html Change me! ``` ```javascript angular.module('myApp') .controller(function($scope) {

$scope.myFunc = function(text, elem) {

// do something magic

}

}) ``` --- This gives the ability to pass additional arguments to the callback, because is executed with the parent scope.

Development:

If you want to fork you copy of the project and modify it: ```text npm install angular-content-editable // install module files npm install // install dependencies ``` Than a Gruntfile is ready with this actions: ```text grunt // watch to /src folder and rebuild the package grunt build // build the package for distribution ``` ---

Contributing

1. Create an issue and describe your idea

1. Fork the project (https://github.com/codekraft-studio/angular-content-editable/fork)

1. Create your feature branch (git checkout -b my-new-feature)

1. Get the development environment set up (npm install)

1. Commit your changes (git commit -am 'Add some feature')

1. Add some test for your new feature (npm test)

1. Build the directive with the new changes (grunt build)

1. Publish the branch (git push origin my-new-feature)

1. Create a new Pull Request