Inplaceeditor
Default
<e-inplaceeditor>
Lorem ipsum dolor sit amet.
</e-inplaceeditor><e-inplaceeditor>
Lorem ipsum dolor sit amet.
</e-inplaceeditor>JavaScript
Variations
Disabled
<e-inplaceeditor disabled="disabled">
Lorem ipsum dolor sit amet.
</e-inplaceeditor><e-inplaceeditor disabled="disabled">
Lorem ipsum dolor sit amet.
</e-inplaceeditor>JavaScript
maxlength
<e-inplaceeditor maxlength="5">
Lorem
</e-inplaceeditor><e-inplaceeditor maxlength="5">
Lorem
</e-inplaceeditor>JavaScript
Wrapped
<h1>
<e-inplaceeditor>
Lorem ipsum dolor sit amet.
</e-inplaceeditor>
</h1><h1>
<e-inplaceeditor>
Lorem ipsum dolor sit amet.
</e-inplaceeditor>
</h1>JavaScript
Lorem ipsum dolor sit amet.
Select All
<e-inplaceeditor id="select-all">
Lorem ipsum dolor sit amet.
</e-inplaceeditor>
<button class="e-btn" id="select-all-btn" style="margin-left: 5px;">
Select All
</button><e-inplaceeditor id="select-all">
Lorem ipsum dolor sit amet.
</e-inplaceeditor>
<button class="e-btn" id="select-all-btn" style="margin-left: 5px;">
Select All
</button>JavaScript
var button = document.querySelector('#select-all-btn');
var input = document.querySelector('#select-all');
button.addEventListener('click', function() {
input.selectAll();
});
API Reference
Properties
| Name | Description | Type | Required | Default value |
|---|---|---|---|---|
| value | Sets content | string | false | |
| disabled | Prevent editing editable | boolean | false | |
| maxlength | Sets the maximum number of characters allowed | number | false |
Method
| Name | Description |
|---|---|
selectAll() | Selects the content of the editor and sets the focus |
Events
| Event | Description | Returns |
|---|---|---|
update | Fires on blur | {
detail: {
value: [textContent]
}
} |