# vue-editor-rhp

> vue-editor-rhp is editorjs wrapper component.

Latest version **0.1.7** (published 2021-06-05) · MIT license · 0 weekly downloads

## Install

```sh
npm install vue-editor-rhp
pnpm add vue-editor-rhp
yarn add vue-editor-rhp
bun add vue-editor-rhp
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.7 |
| Published | 2021-06-05 |
| First published | 2021-06-05 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 3 |
| Unpacked size | 12.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Sky Albert |
| Maintainers | trantoan960 |
| Keywords | editor, editorjs, vue.js, vue-editor, vue-composition-api, vue3 |

## Links

- npm: https://www.npmjs.com/package/vue-editor-rhp
- Repository: https://github.com/trantoan960/vue-editor-rhp
- Homepage: https://github.com/trantoan960/vue-editor-rhp#readme
- Issues: https://github.com/trantoan960/vue-editor-rhp/issues
- npm.io page: https://npm.io/package/vue-editor-rhp

## Dependencies (3)

- [vue](https://npm.io/package/vue.md) ^3.0.0
- [core-js](https://npm.io/package/core-js.md) ^3.6.5
- [@editorjs/editorjs](https://npm.io/package/@editorjs/editorjs.md) ^2.22.0

## Alternatives

- [ext-list](https://npm.io/package/ext-list.md) — 6.3M weekly downloads
- [@lexical/selection](https://npm.io/package/@lexical/selection.md) — 3.8M weekly downloads
- [@lexical/text](https://npm.io/package/@lexical/text.md) — 3.6M weekly downloads
- [@lexical/clipboard](https://npm.io/package/@lexical/clipboard.md) — 3.0M weekly downloads
- [@tiptap/extension-mention](https://npm.io/package/@tiptap/extension-mention.md) — 3.0M weekly downloads

## Recent versions

- 0.1.7 (latest) — 2021-06-05
- 0.1.6 — 2021-06-05
- 0.1.5 — 2021-06-05
- 0.1.4 — 2021-06-05
- 0.1.3 — 2021-06-05
- 0.1.2 — 2021-06-05
- 0.1.1 — 2021-06-05
- 0.1.0 — 2021-06-05

## README

# vue-editor-rhp

vue-editor-rhp is editorjs wrapper component.

Please review this first. https://editorjs.io/

## Supported Plugins

- [Personality](https://github.com/editor-js/personality)
- [Header](https://github.com/editor-js/header)
- [List](https://github.com/editor-js/list)
- [Image](https://github.com/editor-js/image)
- [InlineCode](https://github.com/editor-js/inline-code)
- [Embed](https://github.com/editor-js/embed)
- [Quote](https://github.com/editor-js/quote)
- [Marker](https://github.com/editor-js/marker)
- [Code](https://github.com/editor-js/code)
- [Link](https://github.com/editor-js/link)
- [Delimiter](https://github.com/editor-js/delimiter)
- [Raw](https://github.com/editor-js/raw)
- [Table](https://github.com/editor-js/table)
- [Warning](https://github.com/editor-js/warning)
- [Paragraph](https://github.com/editor-js/paragraph)
- [Checklist](https://github.com/editor-js/checklist)

## Installation

```bash
# NPM
npm install --save vue-editor-rhp

# or Yarn
yarn add vue-editor-rhp
```

## Usage

### In main.js

```js
import { createApp } from "vue";
import Editor from "vue-editor-rhp";

const app = createApp(...);

app.use(Editor);
// ...
```

### In Nuxt.js

```js
// in nuxt.config.js
plugins: [
  {
    src: '~/plugins/vue-editor-rhp.js', ssr: false
  }
],

// in ~/plugins/vue-editor-rhp.js
import Vue from 'vue'
import Editor from 'vue-editor-rhp'

Vue.use(Editor)
```

```Vue
  <editor ref="editor" :config="config" :initialized="onInitialized"/>
```

Define the initialization function to get the instance of editor.js when initializing

## Local import

If you wish to only import Editor on a single component then you can do so by following the instructions below

1. In your component:

```js
import { Editor } from "vue-editor-rhp";

export default {
  // ...
  components: {
    Editor,
  },
  // ...
};
```

## Tools

### Supported tools

Same as in Supported Plugins, but with different naming

- header
- list
- code
- inlineCode
- personality
- embed
- linkTool
- marker
- table
- raw
- delimiter
- quote
- image
- warning
- paragraph
- checklist

### Usage

1. Install the editorjs tool

```bash
# NPM
npm install --save @editorjs/header

# or Yarn
yarn add @editorjs/header
```

2. Insert the package into the config prop

```vue
<editor
  ...
  :config="{
    tools: {
      header: require('@editorjs/header'),
    },
  }"
/>
```

#### Saving Example Code

```vue
<template>
  <div id="app">
    <Editor ref="editor" :config="config" />

    <button @click="onSubmitSave">Save</button>
  </div>
</template>

<script>
import { ref } from "vue";

export default {
  setup() {
    const editor = ref(null);

    function onSubmitSave() {
      editor.value.state.editor
        .save()
        .then((data) => {
          // Do what you want with the data here
          console.log(data);
        })
        .catch((err) => {
          console.log(err);
        });
    }

    return { onSubmitSave };
  },
};
</script>
```

## Upload Image (>= 1.1.0)

for uploading images, You will need a backend for processing the images. vue-editor-rhp provides a special `config` prop for easability.

```vue
<editor :config="config" />

<script>
...
data() {
  return {
      config: {
        image: {
          // Like in https://github.com/editor-js/image#config-params
          endpoints: {
            byFile: 'http://localhost:8090/image',
            byUrl: 'http://localhost:8090/image-by-url',
          },
          field: 'image',
          types: 'image/*',
        },
      }
  }
}
</script>
```

## upload personality avatar ( >= 2.0.1)

```js
  config: {
    personality: {
      endpoints: 'http://localhost:8090/image'
    }
```

![](https://user-images.githubusercontent.com/1451365/69627876-d7ca9600-108e-11ea-85c7-1e52c4284758.png)

### Other props:

- customTools - Object with name (key) and class of a custom tool (value)

Enjoy editorjs with Vue.js Project :tada:

## How to Contribute?

1. fork this project.
2. edit code.
3. PR

_OR_

1. Just submit a issue!

## Contributors

- [Sky Albert](https://github.com/trantoan960)

---
_Source: https://npm.io/package/vue-editor-rhp · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._