React Example Project

[Saeeed-B]

@JiHong88 Hello, we would be grateful if you could provide examples for use in React. I do not think the side package is a good solution, because most of the time it is not compatible with the main package and it has many issues. We are very eager to use your package directly in React.

[JiHong88]

Below code is the I used in the project. Will it help?

import React, { Component, createRef } from "react";
import suneditor from "suneditor";
import {ko} from "suneditor/src/lang";
import plugins from "suneditor/src/plugins";
import CodeMirror from "codemirror";
import katex from "katex";
import "suneditor/dist/css/suneditor.min.css";
import "codemirror/mode/htmlmixed/htmlmixed";
import "codemirror/lib/codemirror.css";
import "katex/dist/katex.min.css";
import { baseURL } from '../apis'
import "./Editor.scss"

interface Props {
    contents?: string;
    onBlur?: Function;
    onSave: Function;
}

class Editor extends Component<Props> {
    txtArea: any;
    editor: any;

    constructor(props: any) {
        super(props);
        this.txtArea = createRef();
    }

    componentDidMount() {
        this.editor = suneditor.create(this.txtArea.current, {
            plugins: plugins,
            lang: ko,
            callBackSave: (contents: string) => this.props.onSave(contents),
            codeMirror: CodeMirror,
            katex: katex,
            width: '100%',
            height: 'auto',
            minHeight: '400px',
            value: this.props.contents,
            placeholder: "내용을 입력해주세요.",
            imageUploadUrl: `${baseURL}/admin/menu/contents/file`,
            imageMultipleFile: true,
            videoMultipleFile: true,
            fullScreenOffset: 71,
            attributesWhitelist: {
                img: 'alt',
            },
            previewTemplate: `
                <div style="width:auto; max-width:1136px; min-height:400px; margin:auto;">
                {{contents}}
                </div>
            `,
            buttonList: [
                ['undo', 'redo'],
                ['font', 'fontSize', 'formatBlock'],
                ['paragraphStyle', 'blockquote'],
                ['bold', 'underline', 'italic', 'strike', 'subscript', 'superscript'],
                ['fontColor', 'hiliteColor', 'textStyle'],
                ['removeFormat'],
                ['outdent', 'indent'],
                ['align', 'horizontalRule', 'list', 'lineHeight'],
                ['table', 'link', 'image', 'video'],
                ['fullScreen', 'showBlocks', 'codeView'],
                ['preview'],
                ['save'],
            ]
        });

        this.editor.onBlur = () => {
            if (typeof this.props.onBlur === 'function') this.props.onBlur()
        }
    }

    componentDidUpdate(prevProps: any) {
        if (this.props.contents !== prevProps.contents) {
            this.editor.setContents(this.props.contents);
            this.editor.core.history.reset(true);
        }
    }

    componentWillUnmount() {
        if (this.editor) this.editor.destroy();
    }

    render() {
        return <textarea ref={this.txtArea} />;
    }
}

export default Editor;

import React, { Component, createRef } from "react";
editorRef:any = createRef();

onBlurEditor() {
        const contents = this.editorRef.current.editor.getContents();
        this.setState({
            contents: contents
        })
}

save(contents: string) {
       const contents = contents || this.state.contents
}

<Editor ref={this.editorRef} contents={this.state.initContents} onBlur={this.onBlurEditor.bind(this)} onSave={this.save.bind(this)}></Editor>