codekraft-studio / angular-content-editable

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

angular-content-editable

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

DEMO

Getting started:

Download the package using npm:

npm install angular-content-editable

Download the package using bower:

bower install angular-content-editable

or directly from github.

Add the script to your page dependencies:

<script type="text/javascript" src="angular-content-editable.min.js"></script>

And finally add content-editable to your module dependencies:

angular.module('app', ['angular-content-editable'])

and you are ready to go, add the directive to any element you want:

<a href="#!" ng-model="myModel" content-editable>edit my text</a>

---

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:

<div ng-model="myModel" edit-callback="myFunc(text, elem)" content-editable>
  Some content
</div>

---

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.

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.

<h2 ng-model="myModel" content-editable>Change me if you like.</h2>

With single-line attribute, when enter key is pressed the editing will finish (no line-breaks):

<div single-line="true" ng-model="myModel" content-editable>Change me anyway.</div>

With focus-select all text content will be selected on element click or focus.

<span focus-select="true" ng-model="myModel" content-editable>Change me!</span>

With strip-replace attribute set as boolean:

<!-- boolean: removes all HTML tags and line breaks -->
<span focus-select="true" ng-model="myModel" strip-replace="true" content-editable>Change me!<br><b>I will become clear text without formating</b></span>

With strip-replace attribute set as array:

<!-- array: creates new RegExp() from array ['string / regular expression','replace with','expression flags'] -->
<span focus-select="true" ng-model="myModel" strip-replace="[' ','-','gi']" content-editable>Change me!</span>

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.

<span focus-select="true" edit-callback="myFunc(text, elem)" ng-model="myModel" content-editable>Change me!</span>

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:

npm install angular-content-editable // install module files
npm install // install dependencies

Than a Gruntfile is ready with this actions:

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)
9. Create a new Pull Request

angular-content-editable's Issues

Shown Raw Html Instead Of Model Value

In some cases the raw html is shown instead of angular model value.
I think the problem comes from here because when i comment this line of code the issue disperses.

So what is the purpose of this code block ?
Is it missed or I'm not using the library correctly ?

Push 1.2.3 to bower

.. Please ;-)

editCallback() is not being called

I am trying to strip all html tags from the string after it's edited, but the editCallback() is not being called.

Setup:

<span class="name" ng-model="name" content-editable></span>

var app = angular.module('app', ['angular-content-editable']);
app.config(function (contentEditableProvider) {
  contentEditableProvider.configure({
    singleLine: false,
    focusSelect: false,
    renderHtml: false,
    editCallback: function (text, elem) {
      text = text.replace(/(<([^>]+)>)/ig, '');
      console.log(text);
      return text;
    }
  })
});

Other options are working properly, but the editCallback does not work.

I don't get any errors and console is empty.

Ability to pass additional arguments to the callback

I would like to be able to pass additional arguments to my edit-callback. Normally with directives this is done by passing a function expression instead of a function reference. e.g. `edit-callback="onEdit(userId, text)" On the directive side it can be handled with something like:

var fn = $parse($attrs.editCallback);
fn($scope, { text: text, element: element });

Are you open to a change like that?

missed class "active"

Hello, great directive. Thank you.
In source line 57 there is assignment of class "active"
Installing via bower -> this code doesn't exist.
Please review bower package.

Thanks.

Module dependency should be angular-content-editable not content-editable in ReadMe

Module dependency should be angular-content-editable not content-editable in ReadMe

Please update the readme... Thanks!

Selection.addRange() deprecated, will be removed in M58, around April 2017

When element is focused shows this warning:

The behavior that Selection.addRange() merges existing Range and the 
specified Range is deprecated and will be removed in M58, around April 2017. 
See https://www.chromestatus.com/features/6680566019653632 for more details.

$window.getSelection().addRange(range);

See https://www.chromestatus.com/features/6680566019653632

Add version

Hi there,

There is no release version so this is a bit ambiguous atm. Can we add a release version so we can point the bower.json or package.json to a specific version?

Thanks

README example doesn't show needing ng-model

When I added the script and used the content-editable on my elements like the example shows, nothing works. Upon inspecting the code, then the example was just missing the ng-model along with the directive tag.

BTW, this is the cleanest i've ever seen this done! Excellent work!!

Suggestions

Great directive! A couple small suggestions:

1. Don't set contenteditable attribute to false - the default placeholder attribute won't work.

2. In $render, if $modelValue is undefined, set html to empty string.

Thanks!

Hey

Hey Filippo,

Any advice on using contenteditable like you have here with Angular 2+? Any chance you'd be building an Angular version? Thanks for the awesome work here!

Ability to invoke editor programatically

I'd like to be able to invoke the editor programatically so that user can click a link and have editor turn on. Right now I'm manually triggering a click event with jQuery which is less than ideal. I'm thinking another directive binding, maybe isEditing, and if it switches to true then it invokes the onClick function and when it goes false triggering the blur function. Thoughts or better solutions welcome.

Content always selected

If I use focus-select="false" (or do not set any value) all the content will be selected no matter what.

JQ deprecated methods

Could you update deprecated jQuery methods bind/unbind by on/off please? Also please notice, that the off() method requires an event name as a first argument as well as the unbind() method.

Cannot be used in strictdi mode

Using while ngStrictDi directive is present gives me the error:

Error: [$injector:strictdi] function($log,$sce,$compile,$window,contentEditable) is not using explicit annotation and cannot be invoked in strict mode