vue-block-editor

vue-block-editor

Block editor with collumns and JSON output for Vue.js and Nuxt.js

Responsive design

Install

Vue.js

npm i vue-block-editor

In main.js:

import editor from "vue-block-editor";

Vue.component("app-editor", editor);

Nuxt.js

npm i vue-block-editor

In folder 'plugins' create file editor.js
In editor.js:

import Vue from "vue";

import editor from "vue-block-editor";

Vue.component("app-editor", editor);

In nuxt.config.js:
  plugins: [{ src: "@/plugins/editor", ssr: false }],

Usage

<template>
  <div style="width: 800px;">
    <h1>VUE-BLOCK-EDITOR</h1>
    <app-editor :language="ru_RU" ref="editor" @save="on_save_method" @onChange="on_change_method" />
  </div>
</template>

<script>
export default {
  methods: {
    on_save_method(value) {
      console.log(value);
    },
    on_change_method(value) {
      console.log(value);
    }
  },
  mounted() {
    this.$refs.editor.save();
  }
};

Init data

<template>
  <div style="width: 800px;">
    <h1>VUE-BLOCK-EDITOR</h1>
    <app-editor :initData="initData" ref="editor" @save="on_save_method" @onChange="on_change_method" />
  </div>
</template>
<script>
export default {
  data() {
    return {
      initData: '{"blocks":[{"type":"paragraph","content":"Init paragraph text"},{"type":"quotes","content":"Init data quote","author":"Some Author"}]}'
    }
  },
  methods: {
    on_save_method(value) {
      console.log(value);
    },
    on_change_method(value) {
      console.log(JSON.stringify(value));
    }
  }
}
</script>

Git repo

https://gitlab.com/tehnokom/vue-block-editor

Customize configuration

In prop "language" you can choose one of two languages: English(en_GB), Russian(ru_RU)