Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/natterstefan/editorjs-inline-tool
Create an inline tool for (editorjs.io) with text formatting tags (eg. bold, strong, em, u, ...).
https://github.com/natterstefan/editorjs-inline-tool
editorjs editorjs-component editorjs-inline-tool editorjs-inlinetool
Last synced: about 1 month ago
JSON representation
Create an inline tool for (editorjs.io) with text formatting tags (eg. bold, strong, em, u, ...).
- Host: GitHub
- URL: https://github.com/natterstefan/editorjs-inline-tool
- Owner: natterstefan
- License: mit
- Created: 2019-11-26T20:00:23.000Z (about 5 years ago)
- Default Branch: master
- Last Pushed: 2020-09-01T15:28:14.000Z (over 4 years ago)
- Last Synced: 2024-05-19T14:31:30.939Z (7 months ago)
- Topics: editorjs, editorjs-component, editorjs-inline-tool, editorjs-inlinetool
- Language: TypeScript
- Homepage: https://editorjs-inline-tool.netlify.com
- Size: 711 KB
- Stars: 11
- Watchers: 3
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Codeowners: .github/CODEOWNERS
Awesome Lists containing this project
- awesome-editorjs - editorjs-inline-tool
README
# editorjs-inline-tool
[](https://badge.fury.io/js/editorjs-inline-tool)
[](http://commitizen.github.io/cz-cli/)
Create an inline tool for ([https://editorjs.io/][1]) with [text formatting tags](https://www.w3schools.com/html/html_formatting.asp)
(eg. `bold`, `strong`, `em`, `u`, ...).
## Getting started
```sh
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:
```sh
npm info "editorjs-inline-tool" peerDependencies
```
If using npm 5+, use this shortcut:
```sh
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](https://www.npmjs.com/package/@natterstefan/react-editor-js)).
But this should work for any other framework as well.
```jsx
// 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:
'',
}),
},
// or use a pre-defined tool instead
italic: ItalicInlineTool,
underline: UnderlineInlineTool,
}
const App = () => {
return
}
```
### 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](https://editorjs.io/tools-api#sanitize). |
| shortcut | `false` | `string` | `undefined` | [Shortcut](https://github.com/codex-team/codex.shortcuts) to apply [Tool's render and inserting behaviour](https://editorjs.io/tools-api#shortcut) |
| tagName | `true` | `string` | `undefined` | text [formatting tag](https://www.w3schools.com/html/html_formatting.asp) (eg. `bold`) |
| toolboxIcon | `true` | `string` | `undefined` | Icon for the tools [inline toolbar](https://editorjs.io/inline-tools-api-1#render) |
Additionally, there are pre-defined inline tools available: `ItalicInlineTool`,
`StrongInlineTool` and `UnderlineInlineTool` (they can be found
[here](src/inline-tools.tsx)).
## Licence
[MIT](LICENCE)
This project is not affiliated, associated, authorized, endorsed by or in any
way officially connected to EditorJS ([editorjs.io](https://editorjs.io/)).
## Contributors ✨
Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):
This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!
[1]: https://editorjs.io/
