ember-content-editable-modifier

This addons allows you to add contenteditable functionality to dom elements by providing an ember modifier.

Compatibility

• Ember.js v5.8 or above
• Ember CLI v5.8 or above
• Node.js v18 or above

Installation

ember install ember-content-editable-modifier

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.