Create an inline tool for (https://editorjs.io/) with text formatting tags
(eg. bold
, strong
, em
, u
, ...).
npm i editorjs-inline-tool --save
# or
yarn add editorjs-inline-tool
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
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.js
import 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: createGenericInlineTool({
sanitize: {
strong: {},
},
shortcut: 'CMD+B',
tagName: 'STRONG',
toolboxIcon:
'<svg class="icon icon--bold" width="12px" height="14px"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#bold"></use></svg>',
}),
},
// or use a pre-defined tool instead
italic: ItalicInlineTool,
underline: UnderlineInlineTool,
}
const App = () => {
return <EditorJs tools={TOOLS} data={data} />
}
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).
This project is not affiliated, associated, authorized, endorsed by or in any way officially connected to EditorJS (editorjs.io).
Thanks goes to these wonderful people (emoji key):
Stefan Natter ๐ป ๐ ๐ก |
This project follows the all-contributors specification. Contributions of any kind welcome!