mirror of
https://github.com/codex-team/editor.js
synced 2024-06-10 09:52:36 +02:00
ac93017c70
* 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
203 lines
4.6 KiB
Markdown
203 lines
4.6 KiB
Markdown
# Installation Guide
|
|
|
|
There are few steps to run Editor.js on your site.
|
|
|
|
1. [Load Editor's core](#load-editors-core)
|
|
2. [Load Tools](#load-tools)
|
|
3. [Initialize Editor's instance](#create-editor-instance)
|
|
|
|
## Load Editor's core
|
|
|
|
Firstly you need to get Editor.js itself. It is a [minified script](../dist/editor.js) with minimal available
|
|
|
|
Choose the most usable method of getting Editor for you.
|
|
|
|
- Node package
|
|
- Source from CDN
|
|
- Local file from project
|
|
|
|
### Node.js
|
|
|
|
Install the package via NPM or Yarn
|
|
|
|
```shell
|
|
npm i @editorjs/editorjs
|
|
```
|
|
|
|
Include module at your application
|
|
|
|
```javascript
|
|
const EditorJS = require('@editorjs/editorjs');
|
|
```
|
|
|
|
### Use from CDN
|
|
|
|
You can load specific version of package from [jsDelivr CDN](https://www.jsdelivr.com/package/npm/@editorjs/editorjs).
|
|
|
|
`https://cdn.jsdelivr.net/npm/@editorjs/editorjs@2.10.0`
|
|
|
|
Then require this script.
|
|
|
|
```html
|
|
<script src="..."></script>
|
|
```
|
|
|
|
### Save sources to project
|
|
|
|
Copy [editor.js](../dist/editor.js) file to your project and load it.
|
|
|
|
```html
|
|
<script src="editor.js"></script>
|
|
```
|
|
|
|
## Load Tools
|
|
|
|
Each Block at the Editor.js represented by [Tools](tools.md). There are simple external scripts with own logic. Probably you want to use several Block Tools that should be connected.
|
|
|
|
For example check out our [Header](https://github.com/editor-js/header) Tool that represents heading blocks.
|
|
|
|
You can install Header Tool via the same ways as an Editor (Node.js, CDN, local file).
|
|
|
|
Check [Editor.js's community](https://github.com/editor-js/) to see Tools examples.
|
|
|
|
**Example:** use Header from CDN
|
|
|
|
```html
|
|
<script src="https://cdn.jsdelivr.net/npm/codex.editor.header@2.1.0/dist/bundle.js"></script>
|
|
```
|
|
|
|
## Create Editor instance
|
|
|
|
Create an instance of Editor.js and pass [Configuration Object](../src/types-internal/editor-config.ts).
|
|
Minimal params is a `holderId`, `tools` list and `initialBlock` marker.
|
|
|
|
```html
|
|
<div id="editorjs"></div>
|
|
```
|
|
|
|
You can create a simple Editor only with a default Paragraph Tool by passing a string with element's Id (wrapper for Editor) as a configuration param or use default `editorjs`.
|
|
|
|
```javascript
|
|
var editor = new EditorJS(); /** Zero-configuration */
|
|
|
|
// equals
|
|
|
|
var editor = new EditorJS('editorjs');
|
|
````
|
|
|
|
Or pass a whole settings object.
|
|
|
|
```javascript
|
|
var editor = new EditorJS({
|
|
/**
|
|
* Create a holder for the Editor and pass its ID
|
|
*/
|
|
holderId : 'editorjs',
|
|
|
|
/**
|
|
* Available Tools list.
|
|
* Pass Tool's class or Settings object for each Tool you want to use
|
|
*/
|
|
tools: {
|
|
header: {
|
|
class: Header,
|
|
inlineToolbar : true
|
|
},
|
|
// ...
|
|
},
|
|
|
|
/**
|
|
* Previously saved data that should be rendered
|
|
*/
|
|
data: {}
|
|
});
|
|
```
|
|
|
|
## Ready callback
|
|
|
|
Editor.js needs a bit time to initialize. It is an asynchronous action so it won't block execution of your main script.
|
|
|
|
If you need to know when editor instance is ready you can use one of following ways:
|
|
|
|
##### Pass `onReady` property to the configuration object.
|
|
|
|
It must be a function:
|
|
|
|
```javascript
|
|
var editor = new EditorJS({
|
|
// Other configuration properties
|
|
|
|
/**
|
|
* onReady callback
|
|
*/
|
|
onReady: () => {console.log('Editor.js is ready to work!')}
|
|
});
|
|
```
|
|
|
|
#### Use `isReady` promise.
|
|
|
|
After you create new `EditorJS` object it contains `isReady` property.
|
|
It is a Promise object resolved when editor is ready to work and rejected otherwise.
|
|
If there is an error during initialization `isReady` promise will be rejected with error message.
|
|
|
|
```javascript
|
|
var editor = new EditorJS();
|
|
|
|
editor.isReady
|
|
.then(() => {
|
|
/** Do anything you need after editor initialization */
|
|
})
|
|
.catch((reason) => {
|
|
console.log(`Editor.js initialization failed because of ${reason}`)
|
|
});
|
|
```
|
|
|
|
You can use `async/await` to keep your code looking synchronous:
|
|
|
|
```javascript
|
|
var editor = new EditorJS();
|
|
|
|
try {
|
|
await editor.isReady;
|
|
/** Do anything you need after editor initialization */
|
|
} catch (reason) {
|
|
console.log(`Editor.js initialization failed because of ${reason}`)
|
|
}
|
|
```
|
|
|
|
|
|
## Saving Data
|
|
|
|
Call `editor.saver.save()` and handle returned Promise with saved data.
|
|
|
|
```javascript
|
|
editor.saver.save()
|
|
.then((savedData) => {
|
|
console.log(savedData);
|
|
});
|
|
```
|
|
|
|
## Features
|
|
|
|
Also Editor.js provides useful methods to work with Editor's state.
|
|
|
|
```javascript
|
|
var editor = new EditorJS({
|
|
// Other configuration properties
|
|
|
|
/**
|
|
* onReady callback
|
|
*/
|
|
onReady: () => {console.log('Editor.js is ready to work!')},
|
|
|
|
/**
|
|
* onChange callback
|
|
*/
|
|
onChange: () => {console.log('Now I know that Editor\'s content changed!')}
|
|
});
|
|
```
|
|
|
|
## Example
|
|
|
|
Take a look at the [example.html](../example/example.html) to view more detailed examples.
|