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).
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).
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.
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)