modify in real time any html tag you want
npm install angular-content-editablebash
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
Some content
`
---
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
Change me anyway.
`
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
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
2. Fork the project (https://github.com/codekraft-studio/angular-content-editable/fork)
3. Create your feature branch (git checkout -b my-new-feature)
4. Get the development environment set up (npm install)
5. Commit your changes (git commit -am 'Add some feature')
6. Add some test for your new feature (npm test)
7. Build the directive with the new changes (grunt build)
8. Publish the branch (git push origin my-new-feature`)