Slate-vue for vue2.x

Install

in npm

npm install slate-vue

in yarn

yarn add slate-vue

Usage

quick start

import

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

use

<template>
  <Slate :value="value">
    <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 {
        value: JSON.stringify(initialValue)
      }
    }
  };
</script>

more detail

Vue's jsx and tsx grammar is recommend, but SFC is also supported.

Most of the usage is same with slate-react. Here are same difference as guideline:

Guideline

get editor instance

this.$editor

If you want to apply some plugins(e.g. slate-history), use editorCreated hook:

Vue.use(SlatePlugin, {
  editorCreated(editor) {
    withHistory(editor)
  }
})

It will be called after each editor created.

renderElement, renderLeaf

ReturnType must be any legal type which is equal with the first argument in Vue's createElement, please see.

select, focus , readonly

Use Vue.mixin

import {SelectedMixin, FocusedMixin} from 'slate-vue'

And you will get selected, focused data in your component

Use global inject: inject: ['readOnly]

And you will get readOnly data in your component

useEffect, useRef

import {useEffect, useRef} from 'slate-vue'

Same as react hooks. Forked from vue-hooks.

fragment

import {fragment} from 'slate-vue'

Forked from vue-fragment

VueEditor

import {VueEditor} from 'slate-vue'

Same api with react-editor

Problems

Doesn't change?

If your component is related to the editor(like toolbar), you must add slateMixin for rerender:

import {SlateMixin} from 'slate-vue'

Nuxtjs

For Nuxtjs, you must add slate-vue and vue-tsx-support into your transpile option in nuxt.config.js

build: { 
  transpile: ['slate-vue', 'vue-tsx-support'] 
}