Question

我正在尝试使用reactace或reactcodemirror实现Live Preview APP编辑器。我希望用户可以像创建代码学院一样创建文件并编辑每个文件，然后在预览文件时获得预览。

我已经使用了Aceeditor代码，该代码效果很好，但是无法在右侧进行预览，而在左侧进行说明。

import React from 'react';

// Import Brace and the AceEditor Component
import brace from 'brace';
import AceEditor from 'react-ace';

// Import a Mode (language)
import 'brace/mode/html';

// Import a Theme (okadia, github, xcode etc)
import 'brace/theme/monokai';

export default class App extends React.Component {

    constructor(props, context) {
        super(props, context);

        this.onChange = this.onChange.bind(this);
    }

    onChange(newValue) {
        console.log('change', newValue);
    }

    render() {
        return (
            <div>
                {/* <AceEditor
                    mode="html"
                    theme="monokai"
                    onChange={this.onChange}
                    name="UNIQUE_ID_OF_DIV"
                    defaultValue=""
                    editorProps={{
                        $blockScrolling: true
                    }}
                /> */}
          <AceEditor
              placeholder="Placeholder Text"
              mode="html"
              theme="monokai"
              name="blah2"
              onLoad={this.onLoad}
              onChange={this.onChange}
              fontSize={14}
              showPrintMargin={true}
              showGutter={true}
              highlightActiveLine={true}
              value={`function onLoad(editor) {
              console.log("i've loaded");
            }`}
              setOptions={{
              enableBasicAutocompletion: false,
              enableLiveAutocompletion: false,
              enableSnippets: true,
              showLineNumbers: true,
              tabSize: 2,
              }}
            />

            </div>
        );
    }
}

我需要您提供有关如何添加一些可重用组件的建议，以在右侧预览代码，并可能在左侧添加一些说明

React Ace编辑器实时预览

0 个答案: