Редактор ToastUI в node.jsa - PullRequest
       10

Редактор ToastUI в node.jsa

0 голосов
/ 10 февраля 2020

Я пытаюсь использовать редактор ToastUI в моем приложении Node.js. Когда я использую приведенные примеры, это ошибки. Я предполагаю, что примеры используют javascript и не работают в js. Как я могу использовать это в моем. js коде?

var editor = new Editor({
    el: document.querySelector('#editSection'),
    initialEditType: 'markdown',
    previewStyle: 'vertical',
    height: '300px'
});

Этот блок дает мне: TypeError: options.el имеет значение null

Файл:

import React from 'react';
import Editor from 'tui-editor';
import debounce from '../helpers';
import BorderColorIcon from '@material-ui/icons/BorderColor';
import { withStyles } from '@material-ui/core/styles';
import styles from './styles';

var editor = new Editor({
    el: document.querySelector('#editSection'),
    initialEditType: 'markdown',
    previewStyle: 'vertical',
    height: '300px'
});

class EditorComponent extends React.Component{
    constructor() {
        super();
        this.state = {
            text: '',
            title: '',
            id: ''
        };
    }
    componentDidMount = () => {
        this.setState({
            text: this.props.selectedNote.body,
            title: this.props.selectedNote.title,
            id: this.props.selectedNote.id
        });
    }

    componentDidUpdate = () => {
        if (this.props.selectedNote.id !== this.state.id){
            this.setState({
                text: this.props.selectedNote.body,
                title: this.props.selectedNote.title,
                id: this.props.selectedNote.id
            });
    }
}
    render() {
        const { classes } = this.props;

        return (
            <div className={classes.editorContainer}>
                <BorderColorIcon className={classes.editIcon}></BorderColorIcon>
                <input
                    className={classes.titleInput}
                    placeholder='Note title...'
                    value={this.state.title ? this.state.title : ''}
                    onChange={(e) => this.updateTitle(e.target.value)}>
                </input>
                <editor
                    defaultValue={this.state.text}
                    onChange={this.updateBody}/>


                {/*
                <ReactQuill
                    value={this.state.text}
                    onChange={this.updateBody}>
                </ReactQuill>
                */}
            </div>
        );
    }
    updateBody = async(val) => {
        await this.setState({ text: val });
        this.update();
    };
    updateTitle = async (txt) => {
        await this.setState({ title: txt })
        this.update();
    }
    update = debounce(() => {
        this.props.noteUpdate(this.state.id, {
            title: this.state.title,
            body: this.state.text
        })
    },1500);
}
export default withStyles(styles)(EditorComponent);

Заранее спасибо!

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...