Slate.js implement for Vue2 and Vue3

Slate-vue

An implement for slate supported vue2 and vue3. Most of the slate-react’s components can be easily migrated by no code change.

All slate-react’s example is supported now.

For principles’s question, Please read slate’s docs first!

Install

in npm

npm install slate-vue

in yarn

yarn add slate-vue

Usage

import

import Vue from 'vue'
import { SlatePlugin } from 'slate-vue';
Vue.use(SlatePlugin)

use

<template>
  <Slate :value="JSON.stringify(initialValue)">
    <Editable placeholder="Enter some plain text..."></Editable>
  </Slate>
</template>

<script>
import {Slate, Editable} from 'slate-vue'

// this value is for editor
const initialValue = [
{
  children: [
    { text: 'This is editable plain text, just like a <textarea>!' },
  ],
},
]
export default {
name: 'index',
components: {
  Slate,
  Editable
},
data() {
  return {
    initialValue
  }
}
};
</script>

See full vue2.x document in slate-vue

Examples

See all examples in online example.

See all example code in pages

Issues

You can use this codesandbox template to reproduce problems.

Download Details:

Author: marsprince

Demo: https://marsprince.github.io/slate-vue/#/richtext

Source Code: https://github.com/marsprince/slate-vue

#vuejs #vue #javascript #vue-js