https://github.com/VolgaIgor/editorjs-anchor

Append field with anchor to any Editor.js block
https://github.com/VolgaIgor/editorjs-anchor

editorjs editorjs-plugin

Last synced: 26 days ago
JSON representation

Append field with anchor to any Editor.js block

• Host: GitHub
• URL: https://github.com/VolgaIgor/editorjs-anchor
• Owner: VolgaIgor
• License: mit
• Created: 2021-04-19T15:58:49.000Z (over 3 years ago)
• Default Branch: main
• Last Pushed: 2024-06-11T15:47:52.000Z (6 months ago)
• Last Synced: 2024-11-10T00:32:50.800Z (about 1 month ago)
• Topics: editorjs, editorjs-plugin
• Language: JavaScript
• Homepage:
• Size: 245 KB
• Stars: 5
• Watchers: 3
• Forks: 8
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-editorjs - VolgaIgor/editorjs-anchor

README

        
# Anchor Block Tune for Editor.js

Append field with anchor to any block.

## Preview

![Preview image](https://github.com/VolgaIgor/editorjs-anchor/raw/main/asset/screenshot.png)

### Required

- Editor.js v2.20+

## Installation

### Install via NPM

Get the package

```shell

$ npm i editorjs-anchor

```

Include module at your application

```javascript

import AnchorTune from 'editorjs-anchor';

```

### Load from CDN

You can load a specific version of the package from jsDelivr CDN.

Require this script on a page with Editor.js.

```html

```

### Download to your project's source dir

1. Upload folder `dist` from repository

2. Add `dist/bundle.js` file to your page.

## Usage

### For all blocks

```javascript

var editor = EditorJS({

  // ...

  tools: {

    // ...

    anchorTune: AnchorTune

  },

  tunes: ['anchorTune']

  // ...

});

```

### For particular block

```javascript

var editor = EditorJS({

  // ...

  tools: {

    // ...

    anchorTune: AnchorTune,

    header: {

      class: Header,

      tunes: ['anchorTune']

    }

  }

  // ...

});

```

## Config Params

You can add a localized string

```javascript

new Editorjs({

  // ...

  tools: {

    anchorTune: AnchorTune

  },

  i18n: {

    tools: {

      anchorTune: {

        'Anchor': 'Якорь'

      }

    }

  },

})

```

## Output data

Example for [Header block](https://github.com/editor-js/header)

```json

{

  "type": "header",

  "data": {

    "text": "Header",

    "level": 2

  },

  "tunes": {

    "anchorTune": {

      "anchor": "header-anchor"

    }

  }

}

```

If the anchor field is empty, then the tune data will not be serialized into JSON.