Socket
Socket
Sign inDemoInstall

@hydrabot/slate-vue

Package Overview
Dependencies
30
Maintainers
3
Versions
5
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

    @hydrabot/slate-vue

## Install


Version published
Weekly downloads
0
Maintainers
3
Created
Weekly downloads
 

Readme

Source

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'] 
}

FAQs

Last updated on 19 Jul 2022

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc