vue-editor-rhp

vue-editor-rhp is editorjs wrapper component.

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

Supported Plugins

• Personality
• Header
• List
• Image
• InlineCode
• Embed
• Quote
• Marker
• Code
• Link
• Delimiter
• Raw
• Table
• Warning
• Paragraph
• Checklist

Installation

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

# or Yarn
yarn add vue-editor-rhp

Usage

In main.js

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

const app = createApp(...);

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

In Nuxt.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)

  <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:

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

# NPM
npm install --save @editorjs/header

# or Yarn
yarn add @editorjs/header

2. Insert the package into the config prop

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

Saving Example Code

<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.

<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)

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

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