This package has been deprecated

Author message:

Package no longer supported. Use github.com/abcum/ascua instead.

@abcum/ember-editables

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)