Slate-vue for vue2.x
Install
in npm
npm install slate-vue
in yarn
yarn add slate-vue
Usage
quick start
import
;Vue
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
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
And you will get selected, focused, readOnly data in your component
useEffect, useRef
Same as react hooks. Forked from vue-hooks.
fragment
Forked from vue-fragment
VueEditor
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: