README
ember-editables
A collection of inline editable text components for Ember.js for text, html, and code.
Usage
Installation
ember install @abcum/ember-editables
Usage examples
editable-text
The editable-text
component enables inline editing of a contenteditable div, while removing all additional html markup (e.g. bold, italics).
{{editable-text value=model.name on-change=(action (mut model.name)) placeholder="Enter your fullname..."}}
To display placeholder text inside the editable-text
component add the following code to your css, less, or sass files.
[contentEditable="true"][placeholder]:empty:not(:focus):before {
color:#B6B6B6; /* Specify your placeholder colour */
}
editable-html
The editable-html
component enables inline editing of a contenteditable div, while keeping any additional html markup (e.g. bold, italics).
{{editable-html value=model.name on-change=(action (mut model.name)) placeholder="Enter your fullname..."}}
To display placeholder text inside the editable-html
component add the following code to your css, less, or sass files.
[contentEditable="true"][placeholder]:empty:not(:focus):before {
color:#B6B6B6; /* Specify your placeholder colour */
}
editable-code
The editable-code
component provides an editable code area powered by Codemirror.
{{editable-code value=model.code on-change=(action (mut model.code))}}
Install options
The plugins, themes, and language modes that will be bundled with the application source code can be configured from the application environment file,
// config/environment.js
module.exports = function(environment) {
return {
editables: {
codemirror: true,
includeTags: true,
includeComments: true,
includeBrackets: true,
includeWhitespace: true,
modes: [ "htmlmixed", "css", "sass", "javascript", "markdown", "handlebars" ],
themes: [ "base16-dark", "base16-light", "bespin", "dracula", "eclipse" ],
},
}
};
Editor options
Additional configuration options can be passed to the editable-code instance allowing for further customisation of the editor.
Attribute | Default | Description |
---|---|---|
autoCloseBrackets |
true |
Whether to automatically close brackets and quotes when typed. |
autofocus |
false |
Can be used to make CodeMirror focus itself on initialization |
commentBlankLines |
false |
Whether to also comment empty lines when adding line comments. |
cursorBlinkRate |
530 |
Half-period in milliseconds used for cursor blinking. |
electricChars |
true |
Whether the editor should re-indent when characters are changed. |
firstLineNumber |
1 |
At which number to start counting lines. |
historyEventDelay |
1250 |
How many milliseconds of inactivity until a new history event is started. |
indentUnit |
4 |
How many spaces a block should be indented. |
indentWithTabs |
false |
Whether tabs or spaces should be used to indent. |
lineNumbers |
true |
Whether to show line numbers to the left of the editor. |
lineWrapping |
false |
Whether CodeMirror should scroll or wrap for long lines. |
matchBrackets |
true |
Whether to highlight matching brackets when the cursor is next to them. |
mode |
"htmlmixed" |
The language mode to use in the editor. |
readOnly |
false |
This disables editing of the editor content by the user. |
smartIndent |
true |
Whether to use the context-sensitive indentation that the mode provides. |
tabSize |
4 |
The width of a tab character. |
theme |
"default" |
The name of the the css theme to use with the editor. |
undoDepth |
200 |
The maximum number of content or selection changes that are stored. |
viewportMargin |
10 |
How many lines are rendered above and below the visible lines. |
Development
make install
(install bower and ember-cli dependencies)make upgrade
(upgrade ember-cli to the specified version)make tests
(run all tests defined in the package)