Tapas-Editor

A React editor component based on TinyMCE.

Usage

import React from 'react';
import ReactDOM from 'react-dom';

// Import tinymce first
import 'tinymce';
import 'tinymce/themes/modern/theme';
import 'tinymce/skins/lightgray/skin.min.css';

// Import tinymce plugins
import 'tinymce/plugins/autoresize';
import 'tinymce/plugins/searchreplace';
import 'tinymce/plugins/paste';

// Import buggy tinymce plugins in tinymce 4.5.1-
// import 'imports?this=>window!tinymce/plugins/paste/plugin';

// Import TapasEditor
import TapasEditor from 'tapas-editor';

import contentStyle from '!css!tinymce/skins/lightgray/content.min.css';
const config = {
  content_style: contentStyle.map(item => item[1]).join(''),
};

class Editor extends React.Component {
  state = {
    content: 'Initial content',
  }

  handleChange = content => {
    this.setState({
      content,
    });
    console.log('Content changed.');
  }

  render() {
    return <TapasEditor onChange={this.handleChange} />
  }
}

ReactDOM.render(<Editor config={config} />, document.body);

Development

# Build library
$ npm run build

# Run demo
$ npm start