golery-canner-slate-editor
A customized vesion of canner-slate-editor for www.golery.com
Last updated 2 years ago by goleryteam .
MIT · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install golery-canner-slate-editor 
SYNC missed versions from official npm registry.

canner-slate-editor

Installation

$ npm install --save canner-slate-editor

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/stories/components/canner-slate-editor/index.js

Customization

You are able to customize the toolbar as you like. Just pass as prop menuToolbarOption.

Value should be as below.

const menuToolbarOption = [
  { type: Undo, title: "Undo" },
  { type: Redo, title: "Redo" },
  "seperator",
  { type: Header1, title: "Header One" },
  { type: Header2, title: "Header Two" },
  { type: Header3, title: "Header Three" },
  { type: Blockquote, title: "Blockquote" },
  { type: Hr, title: "Ruler" },
  "seperator",
  { type: AlignLeft, title: "Align Left" },
  { type: AlignCenter, title: "Align Center" },
  { type: AlignRight, title: "Align Right" },
  { type: Indent, title: "Indent" },
  { type: Outdent, title: "Outdent" },
  "seperator",
  { type: OlList, title: "Order List" },
  { type: UlList, title: "Unorder List" },
  "seperator",
  { type: Link, title: "Link" },
  { type: "image", title: "Image" },
  { type: Video, title: "Video" },
  { type: CodeBlock, title: "Code Bloack" },
  { type: Table, title: "Table" },
  "seperator",
  { type: FontColor, title: "Font Color" },
  { type: FontBgColor, title: "Font Background Color" },
  "seperator",
  { type: "fullScreen", title: "Full Screen" }
];

Current Tags

  • 1.0.0                                ...           latest (2 years ago)

2 Versions

  • 1.0.0                                ...           2 years ago
  • 1.5.4                                ...           2 years ago
Maintainers (1)
Downloads
Today 0
This Week 0
This Month 0
Last Day 0
Last Week 0
Last Month 2
Dev Dependencies (15)
Dependents (0)
None

Copyright 2014 - 2016 © taobao.org |