Tui.editor: How to use the editor in React?

Created on 2 Mar 2018 · 3Comments · Source: nhn/tui.editor

Version

1.0.4

Test Environment

Chrome, Mac, React

Current Behavior

This is probably a silly question, but I will dearly appreciate if you can provide a tutorial how to use the TUI Editor on React. I am new to the javascript world and know virtually nothing other than React.

BTW, the TUI Editor is awesome! It is the very best one that I have seen. Thank you for providing such a great editor!

Source

dioscuroi

Most helpful comment

I managed to make it work, hahaha. Below are my codes. Please let me know if there is another better approach.

import React, { Component } from 'react';
import Editor from 'tui-editor'
import 'tui-editor/dist/tui-editor.css'
import 'tui-editor/dist/tui-editor-contents.css'
import 'codemirror/lib/codemirror.css'
import 'highlight.js/styles/github.css'

class TestTuiEditor extends Component {

  componentDidMount() {
    let editor = new Editor({
      el: document.querySelector('#editSection'),
      initialEditType: 'wysiwyg',
      previewStyle: 'vertical',
      height: window.innerHeight - 20,
      events: {
        change: this.onChange
      }
    });

    this.setState({ editor });
  }

  onChange = (event) => {
    console.log(this.state.editor.getValue());
  }

  render() {
    return (
      <div id='editSection' />
    );
  }
}

export default TestTuiEditor;

dioscuroi on 2 Mar 2018

👍7 🎉1 😄1

All 3 comments

I managed to make it work, hahaha. Below are my codes. Please let me know if there is another better approach.

import React, { Component } from 'react';
import Editor from 'tui-editor'
import 'tui-editor/dist/tui-editor.css'
import 'tui-editor/dist/tui-editor-contents.css'
import 'codemirror/lib/codemirror.css'
import 'highlight.js/styles/github.css'

class TestTuiEditor extends Component {

  componentDidMount() {
    let editor = new Editor({
      el: document.querySelector('#editSection'),
      initialEditType: 'wysiwyg',
      previewStyle: 'vertical',
      height: window.innerHeight - 20,
      events: {
        change: this.onChange
      }
    });

    this.setState({ editor });
  }

  onChange = (event) => {
    console.log(this.state.editor.getValue());
  }

  render() {
    return (
      <div id='editSection' />
    );
  }
}

export default TestTuiEditor;

dioscuroi on 2 Mar 2018

👍7 🎉1 😄1

initialEditType should be markdown,then it work.