How to set codeView to be activated per default?

[a-tonchev]

I would like to have the codeView activated per default, is this possible?

I am using the react-suneditor right now.

[JiHong88]

editorInstance.onload = (core, reload) => {
  core.toggleCodeView()
}

[a-tonchev]

@JiHong88 somehow it don't work:

Here an example:

https://codesandbox.io/s/suneditor-react-forked-w5eyji?file=/src/App.js

[JiHong88]

Submit an issue to "https://github.com/mkhstar/suneditor-react", or implement it directly in React with this package.

[JiHong88]

Simple example

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";


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

interface State {
    imageList: any[];
    selectedImages: any[];
    imageSize: string;
}

class Editor extends Component<Props, State> {
    txtArea: any;
    editor: any;
        
    constructor(props: any) {
        super(props);
        this.txtArea = createRef();
        this.state = {
            imageList: [],
            selectedImages: [],
            imageSize: "0KB",
          };
    }

    componentDidMount() {
        const editor: any = this.editor = suneditor.create(this.txtArea.current, {
            plugins: plugins,
            lang: ko,
            callBackSave: (contents: string) => this.props.onSave(contents),
            codeMirror: CodeMirror,
            stickyToolbar: 57,
            katex: katex,
            width: '100%',
            height: 'auto',
            value: this.props.contents,
            previewTemplate: `
                <div style="width:auto; max-width:1136px; min-height:400px; margin:auto;">
                {{contents}}
                </div>
            `,
            buttonList: [
                // default
                ['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'],
                // responsive
                ['%1161', [
                    ['undo', 'redo'],
                    [':p-문단&글꼴-default.more_paragraph', 'font', 'fontSize', 'formatBlock', 'paragraphStyle', 'blockquote'],
                    ['bold', 'underline', 'italic', 'strike', 'subscript', 'superscript'],
                    ['fontColor', 'hiliteColor', 'textStyle'],
                    ['removeFormat'],
                    ['outdent', 'indent'],
                    ['align', 'horizontalRule', 'list', 'lineHeight'],
                    ['-right', 'save'],
                    ['-right', ':i-기타-default.more_vertical', 'fullScreen', 'showBlocks', 'codeView', 'preview'],
                    ['-right', ':r-테이블&미디어-default.more_plus', 'table', 'link', 'image', 'video'],
                ]],
                ['%893', [
                    ['undo', 'redo'],
                    [':p-문단&글꼴-default.more_paragraph', 'font', 'fontSize', 'formatBlock', 'paragraphStyle', 'blockquote'],
                    ['bold', 'underline', 'italic', 'strike'],
                    [':t-글자 스타일-default.more_text', 'subscript', 'superscript', 'fontColor', 'hiliteColor', 'textStyle'],
                    ['removeFormat'],
                    ['outdent', 'indent'],
                    ['align', 'horizontalRule', 'list', 'lineHeight'],
                    ['-right', 'save'],
                    ['-right', ':i-기타-default.more_vertical', 'fullScreen', 'showBlocks', 'codeView', 'preview'],
                    ['-right', ':r-테이블&미디어-default.more_plus', 'table', 'link', 'image', 'video'],
                ]],
                ['%855', [
                    ['undo', 'redo'],
                    [':p-문단&글꼴-default.more_paragraph', 'font', 'fontSize', 'formatBlock', 'paragraphStyle', 'blockquote'],
                    [':t-글자 스타일-default.more_text', 'bold', 'underline', 'italic', 'strike', 'subscript', 'superscript', 'fontColor', 'hiliteColor', 'textStyle'],
                    ['removeFormat'],
                    ['outdent', 'indent'],
                    ['align', 'horizontalRule', 'list', 'lineHeight'],
                    [':r-테이블&미디어-default.more_plus', 'table', 'link', 'image', 'video'],
                    ['-right', 'save'],
                    ['-right', ':i-기타-default.more_vertical', 'fullScreen', 'showBlocks', 'codeView', 'preview'],
                ]],
                ['%563', [
                    ['undo', 'redo'],
                    [':p-문단&글꼴-default.more_paragraph', 'font', 'fontSize', 'formatBlock', 'paragraphStyle', 'blockquote'],
                    [':t-글자 스타일-default.more_text', 'bold', 'underline', 'italic', 'strike', 'subscript', 'superscript', 'fontColor', 'hiliteColor', 'textStyle'],
                    ['removeFormat'],
                    ['outdent', 'indent'],
                    [':e-리스트&라인-default.more_horizontal', 'align', 'horizontalRule', 'list', 'lineHeight'],
                    [':r-테이블&미디어-default.more_plus', 'table', 'link', 'image', 'video'],
                    ['-right', 'save'],
                    ['-right', ':i-기타-default.more_vertical', 'fullScreen', 'showBlocks', 'codeView', 'preview'],
                ]],
                ['%458', [
                    ['undo', 'redo'],
                    [':p-문단&글꼴-default.more_paragraph', 'font', 'fontSize', 'formatBlock', 'paragraphStyle', 'blockquote'],
                    [':t-글자 스타일-default.more_text', 'bold', 'underline', 'italic', 'strike', 'subscript', 'superscript', 'fontColor', 'hiliteColor', 'textStyle', 'removeFormat'],
                    [':e-리스트&라인-default.more_horizontal', 'outdent', 'indent', 'align', 'horizontalRule', 'list', 'lineHeight'],
                    [':r-테이블&미디어-default.more_plus', 'table', 'link', 'image', 'video'],
                    ['-right', 'save'],
                    ['-right', ':i-기타-default.more_vertical', 'fullScreen', 'showBlocks', 'codeView', 'preview'],
                ]]
            ]
        });

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

        editor.onload = (core:any, reload:boolean) => {
            core.toggleCodeView()
        }
    }

    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 <div>
            <textarea ref={this.txtArea} />
        </div>;
    }
}

export default Editor;