@abcum/ember-editables 中文文档教程

Question

ember-editables

用于 Ember.js 的文本、html 和代码的内联可编辑文本组件的集合。

Usage

Installation

ember install @abcum/ember-editables

Usage examples

editable-text

editable-te xt 组件支持对内容可编辑的 div 进行内联编辑，同时删除所有其他 html 标记（例如粗体、斜体）。

{{editable-text value=model.name on-change=(action (mut model.name)) placeholder="Enter your fullname..."}}

要在 editable-text 组件中显示占位符文本，请将以下代码添加到您的 css、less 或 sass 文件中。

[contentEditable="true"][placeholder]:empty:not(:focus):before {
    color:#B6B6B6; /* Specify your placeholder colour */
}

editable-html

editable-html 组件支持对 contenteditable div 进行内联编辑，同时保留任何其他 html 标记（例如粗体、斜体）。

{{editable-html value=model.name on-change=(action (mut model.name)) placeholder="Enter your fullname..."}}

要在 editable-html 组件中显示占位符文本，请将以下代码添加到您的 css、less 或 sass 文件中。

[contentEditable="true"][placeholder]:empty:not(:focus):before {
    color:#B6B6B6; /* Specify your placeholder colour */
}

editable-code

editable-code 组件提供了一个由 Codemirror 提供支持的可编辑代码区域。

{{editable-code value=model.code on-change=(action (mut model.code))}}

Install options

可以从应用程序环境文件中配置将与应用程序源代码捆绑在一起的插件、主题和语言模式，可以将

// 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

其他配置选项传递给可编辑代码实例，从而允许进一步自定义编辑器。

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)