kfeditor-slate

canner-slate-editor

Another rich text editor using Slate framework.

Installation

$ npm install --save canner-slate-editor

Features

• [x] Support full screen edit mode
• [x] Support inline toolbar
• [x] Support inline sidebar
• [x] Support markdown syntax, support list: https://github.com/Canner/slate-md-editor#feature-toc

Image upload

In order to make image uploader work, you have to pass a prop called serviceConfig. serviceConfig can generate from https://github.com/Canner/image-service-config or you can directly pass props from https://ant.design/components/upload/ as object into serviceConfig prop.

Usage

// @flow
import React from 'react';
import ReactDOM from 'react-dom';
import {Value} from 'slate';

import CannerEditor from 'canner-slate-editor';

const initialValue = Value.fromJSON({
  document: {
    nodes: [
      {
        object: 'block',
        type: 'paragraph',
        nodes: [
          {
            object: 'text',
            leaves: [
              {
                text: 'A line of text in a paragraph.',
              }
            ],
          },
        ],
      },
    ],
  },
});

class DemoEditor extends React.Component<*, {value: Value}> {
  // Set the initial state when the app is first constructed.
  state = {
    value: initialValue
  }


  render() {
    const {value} = this.state;
    const onChange = ({value}) => this.setState({value});

    return (
      <div style={{margin: '20px'}}>
        <CannerEditor
          value={value}
          onChange={onChange}
          />
      </div>
    );
  }
}

ReactDOM.render(
  <DemoEditor/>
, (document: any).getElementById('root'));

see https://github.com/Canner/canner-slate-editor/blob/master/docs/index.js

Start example server

npm start

License

Apache 2.0 Canner