ember-content-editable-modifier
![Code Climate][codeclimate-badge]
This addons allows you to add contenteditable functionality to dom elements by providing an ember modifier.
Compatibility
- Ember.js v4.4 or above
- Ember CLI v4.4 or above
- Node.js v14 or above
If you need support for older ember versions, please check version 2.0.0-rc.0 or 1.0.5
Installation
ember install ember-content-editable
Usage
Just apply the content-editable
modifier and provide a value
attribute and a onChange
function in order to update the value. Ember does not allow for two way bindings, therefore you will need to take care of updating the value yourself.
Simplest use case
<div {{content-editable value=this.myText onChange=(fn (mut this.myText))}}></div>
However, it is recommended to use a setter in order to update your variable. Additionally it is recommended to create an ember component around above statement in order to provide further customizations and features that you need for your app.
Additional attributes
autofocus: If true, the element will be focused once inserted into the document
placeholder: Placeholder displayed when value is blank
Clear the placeholder on focus
Add the following css code to your app:
.ember-content-editable:empty:focus:before {
content: '';
}
Contributing
Please send PRs. However, this addon aims to provide basic contenteditable functionality only, which can easily be extended by using custom components. Otherwise see the Contributing guide for details.
License
This project is licensed under the MIT License.