* 2.16.0 * [Refactor] Separate internal and external settings (#845) * Enable flipping tools via standalone class (#830) * Enable flipping tools via standalone class * use flipper to refactor (#842) * use flipper to refactor * save changes * update * fix flipper on inline toolbar * ready for testing * requested changes * update doc * updates * destroy flippers * some requested changes * update * update * ready * update * last changes * update docs * Hghl active button of CT, simplify activate/deactivate * separate dom iterator * unhardcode directions * fixed a link in readme.md (#856) * Fix Block selection via CMD+A (#829) * Fix Block selection via CMD+A * Delete editor.js.map * update * update * Update CHANGELOG.md * Improve style of selected blocks (#858) * Cross-block-selection style improved * Update CHANGELOG.md * Fix case when property 'observer' in modificationObserver is not defined (#866) * Bump lodash.template from 4.4.0 to 4.5.0 (#885) Bumps [lodash.template](https://github.com/lodash/lodash) from 4.4.0 to 4.5.0. - [Release notes](https://github.com/lodash/lodash/releases) - [Commits](https://github.com/lodash/lodash/compare/4.4.0...4.5.0) Signed-off-by: dependabot[bot] <support@github.com> * Bump eslint-utils from 1.3.1 to 1.4.2 (#886) Bumps [eslint-utils](https://github.com/mysticatea/eslint-utils) from 1.3.1 to 1.4.2. - [Release notes](https://github.com/mysticatea/eslint-utils/releases) - [Commits](https://github.com/mysticatea/eslint-utils/compare/v1.3.1...v1.4.2) Signed-off-by: dependabot[bot] <support@github.com> * Bump mixin-deep from 1.3.1 to 1.3.2 (#887) Bumps [mixin-deep](https://github.com/jonschlinkert/mixin-deep) from 1.3.1 to 1.3.2. - [Release notes](https://github.com/jonschlinkert/mixin-deep/releases) - [Commits](https://github.com/jonschlinkert/mixin-deep/compare/1.3.1...1.3.2) Signed-off-by: dependabot[bot] <support@github.com> * update bundle and readme * Update README.md * upd codeowners, fix funding * Minor Docs Fix according to main Readme (#916) * Inline Toolbar now contains Conversion Toolbar (#932) * Block lifecycle hooks (#906) * [Fix] Arrow selection (#964) * Fix arrow selection * Add docs * [issue-926]: fix dom iterator leafing when items are empty (#958) * [issue-926]: fix dom iterator leafing when items are empty * update Changelog * Issue 869 (#963) * Fix issue 943 (#965) * [Draft] Feature/tooltip enhancements (#907) * initial * update * make module standalone * use tooltips as external module * update * build via prod mode * add tooltips as external module * add declaration file and options param * add api tooltip * update * removed submodule * removed due to the incorrect setip * setup tooltips again * wip * update tooltip module * toolbox, inline toolbar * Tooltips in block tunes not uses shorthand * shorthand in a plus and block settings * fix doc * Update tools-inline.md * Delete tooltip.css * Update CHANGELOG.md * Update codex.tooltips * Update api.md * [issue-779]: Grammarly conflicts (#956) * grammarly conflicts * update * upd bundle * Submodule Header now on master * Submodule Marker now on master * Submodule Paragraph now on master * Submodule InlineCode now on master * Submodule Simple Image now on master * [issue-868]: Deleting multiple blocks triggers back button in Firefox (#967) * Deleting multiple blocks triggers back button in Firefox @evgenusov * Update editor.js * Update CHANGELOG.md * pass options on removeEventListener (#904) * pass options on removeEventListener by removeAll * rebuild * Merge branch 'release/2.16' into pr/904 * Update CHANGELOG.md * Update inline.ts * [Fix] Selection rangecount (#968) * Fix #952 (#969) * Update codex.tooltips * Selection bugfix (#970) * Selection bugfix * fix cross block selection * close inline toolbar when blocks selected via shift * remove inline toolbar closing on cross block selection mouse up due to the bug (#972) * [Feature] Log levels (#971) * Decrease margins (#973) * Decrease margins * Update editor.licenses.txt * Update src/components/domIterator.ts Co-Authored-By: Murod Khaydarov <murod.haydarov@gmail.com> * [Fix] Fix delete blocks api method (#974) * Update docs/usage.md Co-Authored-By: Murod Khaydarov <murod.haydarov@gmail.com> * rm unused * Update yarn.lock file * upd bundle, changelog
3.1 KiB
So how to use Editor.js
Basics
Editor.js is a Block-Styled editor. Blocks is a structural units, of which the Entry is composed.
For example, Paragraph
, Heading
, Image
, Video
, List
are Blocks. Each Block is represented by a Plugin.
We have many ready-to-use Plugins and the simple API for creation new ones.
So how to use the Editor after Installation.
- Create new Blocks by Enter or with the Plus Button
- Press
TAB
or click on the Plus Button to view the Toolbox - Press
TAB
again to leaf Toolbox and select a Block you need. Then press Enter.
- Select text fragment and apply a style or insert a link from the Inline Toolbar
- Use «three-dots» button on the right to open Block Settings. From here, you can move and delete a Block or apply Tool's settings, if it provided. For example, set a Heading level or List style.
Shortcuts
We really appreciate shortcuts. So there are few presets.
Action | Shortcut | Restrictions |
---|---|---|
TAB |
Show/leaf a Toolbox. | On empty block |
SHIFT+TAB |
Leaf back a Toolbox. | While Toolbox is opened |
ENTER |
Create a Block | While Toolbox is opened and some Tool is selected |
CMD+B |
Bold style | On selection |
CMD+I |
Italic style | On selection |
CMD+K |
Insert a link | On selection |
Also we support shortcuts on the all type of Tools. Specify a shortcut with the Tools configuration. For example:
var editor = new EditorJS({
//...
tools: {
header: {
class: Header,
shortcut: 'CMD+SHIFT+H'
},
list: {
class: List,
shortcut: 'CMD+SHIFT+L'
}
}
//...
});
Autofocus
If you want to focus Editor after page has been loaded, you can enable autofocus by passing autofocus
to the initial config
var editor = new EditorJS({
//...
autofocus: true
//...
});
Holder
The holder
property supports an id or a reference to dom element.
var editor = new EditorJS({
holder: document.querySelector('.editor'),
})
var editor2 = new EditorJS({
holder: 'codex-editor' // like document.getElementById('codex-editor')
})
Placeholder
By default Editor`s placeholder is empty.
You can pass your own placeholder via placeholder
field:
var editor = new EditorJS({
//...
placeholder: 'My awesome placeholder'
//...
});
If you are using your custom Initial Block
, placeholder
property is passed in config
to your Tool constructor.
Log level
You can specify log level for Editor.js console messages via logLevel
property of configuration:
var editor = new EditorJS({
//...
logLevel: 'WARN'
//..
})
Possible values:
Value | Description |
---|---|
VERBOSE |
Show all messages |
INFO |
Show info and debug messages |
WARN |
Show errors and warns only |
ERROR |
Show errors only |