* Do not start multi-block selection on UI elements (#662) * Do not start multi-block selection on UI elements * Do not prevent mousedown event on inline toolbar actions * Remove log * Add comment * Add link to issue closes #646 * Fix loss of pointer (#666) * Fix loss of pointer when click is outside of the editor but selection is inside * Remove log * Update shortcuts module (#685) * Fixed possible grammatical typo (#681) Thanks * Update shortcuts module * update changelog * update * Remove margin top for inline-link icon (#690) * Remove margin top for inline-link icon resolves #674 * Update CHANGELOG.md * Remove unused style * Pull fresh tools * Remove changelog contents from readme (#700) * #665 API to open and close inline-toolbar (#711) * API to open and close inline-toolbar * Fixed documentation * renamed inline -> inline-toolbar * removed dist * reset editor.js * added editor.js bundle * Fixed build error * Null checks on toolbar/inline@open * updated bundle * Improve some comments * Updatd api.md CHANGELOG.md * Change feature to new instead of improvement * Allow holderId work with ref on dom element (#710) * done * update types * attempt to simplify code * remove useless helper * revert holderId logic and add holder property * Apply suggestions from code review Co-Authored-By: dimensi <eddimensi@gmail.com> * update holder type on string | HTMLElement * fix typo * add deprecated notice and fix typos * fix wrong compare * fix comments * swap console.log on _.log * update types for editor config * update examples * update docs * update build * Activating Open Collective (#736) Hi, I'm making updates for Open Collective. Either you or a supporter signed this repo up for Open Collective. This pull request adds backers and sponsors from your Open Collective https://opencollective.com/editorjs❤️ It adds two badges at the top to show the latest number of backers and sponsors. It also adds placeholders so that the avatar/logo of new backers/sponsors can automatically be shown without having to update your README.md. [more info](https://github.com/opencollective/opencollective/wiki/Github-banner). See how it looks on this [repo](https://github.com/apex/apex#backers). You can also add a postinstall script to let people know after npm|yarn install that you are welcoming donations (optional). [More info](https://github.com/OpenCollective/opencollective-cli) You can also add a "Donate" button to your website and automatically show your backers and sponsors there with our widgets. Have a look here: https://opencollective.com/widgets P.S: As with any pull request, feel free to comment or suggest changes. The only thing "required" are the placeholders on the README because we believe it's important to acknowledge the people in your community that are contributing (financially or with code!). Thank you for your great contribution to the open source community. You are awesome! 🙌 And welcome to the open collective community! 😊 Come chat with us in the #opensource channel on https://slack.opencollective.com - great place to ask questions and share best practices with other open source sustainers! * Do not install editor.js as dev-dependency (#731) Resolves #730 * Move codex-notifier to dependencies for typescript declarations (#728) * Close inline toolbar after creating new link by pressing ENTER (#722) * Method to clear current selection and close inline toolbar * clearSelection with optional collapsed range * refactored selection.ts * removed experimental function * Update src/components/selection.ts Co-Authored-By: tanmayv <12tanmayvijay@gmail.com> * update version, add changelog * Link Logo Image to homepage (#738) * Update README.md (#744) * Update README.md * Update README.md * Update README.md * Update README.md * Update README.md * Update README.md Co-Authored-By: neSpecc <specc.dev@gmail.com> * Config minHeight option that allows to customize bottom zone (#745) * issue-739: allow Block's editable element selection (#747) * issue-739: allow Block's input selection * little improvements * update Changelog and cache inputs * small fix * delete map file * fix inputs.count condition * Fix typo in example paragraph (#749) * Fix typo * Update example-dev.html * minor release
4.8 KiB
Editor.js API
Blocks have access to the public methods provided by Editor.js API Module. Plugin and Tune Developers can use Editor`s API as they want.
Api object description
Common API interface.
export interface API {
blocks: IBlocksAPI;
caret: ICaretAPI;
sanitizer: ISanitizerAPI;
toolbar: IToolbarAPI;
// ...
}
BlocksAPI
Methods that working with Blocks
render(data)
- render passed JSON data
renderFromHTML(data)
- parse and render passed HTML string (not for production use)
swap(fromIndex, toIndex)
- swaps two Blocks by their positions
delete(blockIndex?: Number)
- deletes Block with passed index
getCurrentBlockIndex()
- current Block index
getBlockByIndex(index: Number)
- returns Block with passed index
getBlocksCount()
- returns Blocks count
stretchBlock(index: number, status: boolean)
- make Block stretched
insertNewBlock()
- insert new Block after working place
SanitizerAPI
clean(taintString, config)
- method uses HTMLJanitor to clean taint string.
Editor.js provides basic config without attributes, but you can inherit by passing your own config.
If Tool enables inline-tools, we get it's sanitizing rules and merge with your passed custom rules.
Usage:
let taintString = '<div><p style="font-size: 5em;"><b></b>BlockWithText<a onclick="void(0)"></div>'
let customConfig = {
b: true,
p: {
style: true,
},
}
this.api.sanitizer.clean(taintString, customConfig);
ToolbarAPI
Methods that working with Toolbar
open()
- opens toolbar
close()
- closes toolbar, toolbox and blockSettings if they are opened
InlineToolbarAPI
Methods that works with inline toolbar
open()
- opens inline toolbar, (opens for the current selection)
close()
- closes inline toolbar
ListenerAPI
Methods that allows to work with DOM listener. Useful when you forgot to remove listener. Module collects all listeners and destroys automatically
on(element: HTMLElement, eventType: string, handler: Function, useCapture?: boolean)
- add event listener to HTML element
off(element: HTMLElement, eventType: string, handler: Function)
- remove event handler from HTML element
CaretAPI
Methods to manage caret position.
Each method accept position
and offset
parameters. Offset
should be used to shift caret by passed amount of characters.
Position
can be one of the following values:
Value | Description |
---|---|
start |
Caret will be set at the Block's beginning |
end |
Caret will be set at the Block end |
default |
More or less emulates browser behaviour, in most cases behaves as start |
Each method returns boolean
value: true if caret is set successfully or false otherwise (e.g. when there is no Block at index);
setToFirstBlock(position?: 'end'|'start'|'default', offset?: number): boolean;
— set caret to the first Block
setToLastBlock(position?: 'end'|'start'|'default', offset?: number): boolean;
— set caret to the last Block
setToNextBlock(position?: 'end'|'start'|'default', offset?: number): boolean;
— set caret to the next Block
setToPreviousBlock(position?: 'end'|'start'|'default', offset?: number): boolean;
— set caret to the previous Block
setToBlock(index: number, position?: 'end'|'start'|'default', offset?: number): boolean;
— set caret to the Block by passed index
focus(atEnd?: boolean): boolean;
— set caret to the Editor. If atEnd
is true, set it at the end.
NotifierAPI
If you need to show any messages for success or failure events you can use notifications module.
Call on target Editor:
let editor = new EditorJS({
onReady: () => {
editor.notifier.show({
message: 'Editor is ready!'
});
},
});
In Tool's class:
this.api.notifier.show({
message: 'Cannot upload image. Wrong mime-type.',
style: 'error',
});
Check out codex-notifier
package page on GitHub to find docs, params and examples.
Destroy API
If there are necessity to remove Editor.js instance from the page you can use destroy()
method.
It makes following steps:
-
Clear the holder element by setting it`s innerHTML to empty string
-
Remove all event listeners related to Editor.js
-
Delete all properties from instance object and set it`s prototype to
null
After executing the destroy
method, editor inctance becomes an empty object. This way you will free occupied JS Heap on your page.
Shorthands
Editor`s API provides some shorthands for API methods.
Alias | Method |
---|---|
clear |
blocks.clear |
render |
blocks.render |
focus |
caret.focus |
save |
saver.save |
Example
const editor = EditorJS();
editor.focus();
editor.save();