editorjs-inline-tool
Create an inline tool for (https://editorjs.io/) with text formatting tags
(eg. bold
, strong
, em
, u
, ...).
Getting started
npm i editorjs-inline-tool --save # or yarn add editorjs-inline-tool
PeerDependencies
You have to install the required peerDependencies, which are listed by the following command:
npm info "editorjs-inline-tool" peerDependencies
If using npm 5+, use this shortcut:
npx install-peerdeps --dev editorjs-inline-tool # or yarn add editorjs-inline-tool -D --peer
Usage
This is an example where GenericInlineTool
is used in a React app (using
@natterstefan/react-editor-js).
But this should work for any other framework as well.
// index.jsimport EditorJs from '@natterstefan/react-editor-js'import Header from '@editorjs/header'import Paragraph from '@editorjs/paragraph' import createGenericInlineTool ItalicInlineTool UnderlineInlineTool from 'editorjs-inline-tool' const TOOLS = header: Header paragraph: class: Paragraph inlineToolbar: true // add custom tags or overwrite default tools of editorjs by using the same // name (eg. `bold` or `italic`) bold: class: // or use a pre-defined tool instead italic: ItalicInlineTool underline: UnderlineInlineTool const App = return <EditorJs = = />
Configuration
createGenericInlineTool
returns an InlineTool
for EditorJS
. The following
options are available:
Name | Required | Type | Default | Description |
---|---|---|---|---|
sanitize | false |
object |
undefined |
Object that defines rules for automatic sanitizing. |
shortcut | false |
string |
undefined |
Shortcut to apply Tool's render and inserting behaviour |
tagName | true |
string |
undefined |
text formatting tag (eg. bold ) |
toolboxIcon | true |
string |
undefined |
Icon for the tools inline toolbar |
Additionally, there are pre-defined inline tools available: ItalicInlineTool
,
StrongInlineTool
and UnderlineInlineTool
(they can be found
here).
Licence
This project is not affiliated, associated, authorized, endorsed by or in any way officially connected to EditorJS (editorjs.io).
Contributors ✨
Thanks goes to these wonderful people (emoji key):
Stefan Natter 💻 📖 💡 |
This project follows the all-contributors specification. Contributions of any kind welcome!