GetmeUK / ContentTools

A JS library for building WYSIWYG editors for HTML content.
http://getcontenttools.com
MIT License
3.95k stars 393 forks source link

Implement ContentTools reactjs v16.0.0+ #509

Open devcosta opened 5 years ago

devcosta commented 5 years ago

hi guys, i need to implement a ContentTools editor in my react application, trying the solutions on issue #2, but I did not succeed

i don't get a error, but the contentTools doesn't initialize

React Version: 16.4.0 ContentTools": 1.6.5

import React, { Component } from 'react';
import ContentTools from "ContentTools/build/content-tools.min.js";

class EditorDialog extends Component {

  constructor(props) {
    super(props);
    this.state = {
      record : null,
      editor : null,
  }

  componentWillMount() {

    this.setState({
      ...this.state,
      record : this.props.record || {},
      editor : ContentTools.EditorApp.get()
    }, () => {
      this.state.editor.init('[data-editable]', 'main-content');
      console.log(this.state.editor);
      this.state.editor.addEventListener('load', function(test) {
          console.log(test);
      });
    });

  }

  createMarkup = () => {
    return {__html: `<div data-editable data-name="main-content">
      <blockquote>
          Always code as if the guy who ends up maintaining your code will be a violent psychopath who knows where you live.
      </blockquote>
      <p>John F. Woods</p>
    </div>`};
  }

  editorChange(value) {
    console.log(value);
  }
  render() {

    return (
      <div>
        <div dangerouslySetInnerHTML={this.createMarkup()} />
      </div>

    );
  }
}

export default EditorDialog;