slate-vue-alpha v0.0.0

Examples

See all examples in online example.

• jsx render props VS vue render slot

// jsx
const renderElement = (props) => <Element {...props} />
const renderLeaf = (props) => <Leaf {...props} />
const editor = () => (
  <>
    <Slate>
      <Editor renderLeaf={renderLeaf} renderElement={renderElement} />
      <Editor>
        {{
          elment: renderElement,
          leaf: renderLeaf
        }}
      </Editor>
      <Editor
        v-slots={{
          elment: renderElement,
          leaf: renderLeaf
        }}
      />
    </Slate>
  </>
)

• template

<template>
  <Slate>
    <Editor>
      <template v-slot:elment />
      <template v-slot:leaf />
    </Editor>
  </Slate>
</template>

Slate-vue-alpha

An implement for slate supported vue3（in development）. 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="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>

Examples

See all examples in online example.

See all example code in pages

Issues

You can use this codesandbox template to reproduce problems.

Environment Support

License

MIT © marsprince