rc-editor-core@0.8.10

editor-core ui component for react

// use jsx to render html, do not modify simple.html
/* eslint-disable new-cap, no-console */

import 'rc-editor-core/assets/index.css';
import { EditorCore, GetText } from 'rc-editor-core';
import React from 'react';
import ReactDOM from 'react-dom';
import BasicStyle from 'rc-editor-plugin-basic-style';
import Emoji from 'rc-editor-plugin-emoji';
import 'rc-editor-plugin-emoji/assets/index.css';

const plugins = [BasicStyle, Emoji];
const toolbars = [
  ['bold', 'italic', 'underline', 'strikethrough', '|', 'superscript', 'subscript', '|', 'emoji'],
];

function editorChange(editorState) {
  console.log('>> editorExport:', GetText(editorState, { encode: true }));
}

class Editor extends React.Component {
  state = {
    defaultValue: 'hello world',
  };

  reset = () => {
    this.refs.editor.Reset();
  }
  render() {
    return (
      <div>
        <button onClick={this.reset}> reset </button>
        <EditorCore
          ref="editor"
          plugins={plugins}
          toolbars={toolbars}
          style={{ width: 300, height: 200, overflowY: 'auto' }}
          onChange={(editorState) => editorChange(editorState)}
          onFocus={(ev) => { console.log('focus', ev); }}
          onBlur={(ev) => { console.log('blur', ev); }}
        />
      </div>
    );
  }
}

ReactDOM.render(<Editor />, document.getElementById('__react-content'));
Fork me on GitHub