【React】AceEditorを使ってソースコードの投稿、閲覧機能を作る

はじめに

Reactで作るWEBサイトでソースコードを登録したり閲覧する機能を作りたかったため、AceEditorというものを使ってエディターを埋め込む処理を行いました。AceEditorはJavaScriptで使うことができますが、今回はReact用にパッケージ化されている「 react-ace 」を使って実装していきます。

パッケージのインストール

npm install react-ace ace-builds
//または
yarn add react-ace ace-builds

react-aceのドキュメントがあるページ
https://www.npmjs.com/package/react-ace

実装

まずはEditor.jsという名称でコンポーネントを作りました。

import React, { Component }  from 'react';
import AceEditor from "react-ace";
import PropTypes from 'prop-types';
import "ace-builds/src-noconflict/mode-java";
import "ace-builds/src-noconflict/theme-monokai";
 

const propTypes = {
  onChangeAction: PropTypes.func,
};

class Editor extends Component {

  constructor(props) {
    super(props);
  }

  onChange(newValue) {
    return this.props.onChangeAction(newValue);
  }

  render() {
    if(this.props.readOnly){
      return (
        <AceEditor
          mode="java"
          theme="monokai"
          value={this.props.contents}
          width={null}
          onChange={this.onChange}
          readOnly={true}
          focus={false}
          highlightActiveLine={false}
          enableBasicAutocompletion={false}
          onLoad={editor => {
            editor.renderer.$cursorLayer.element.style.opacity = 0;
          }}
          name="UNIQUE_ID_OF_DIV"
          editorProps={{ $blockScrolling: true }}
        />
      )
    }  else {
      return (
        <AceEditor
          mode="java"
          theme="monokai"
          value={this.props.contents}
          width={null}
          readOnly={false}
          enableBasicAutocompletion={true}
          onChange={e => this.onChange(e)}
        />
      );
    }
  }
}
Editor.propTypes = propTypes;
export default Editor;

AceEditorの本体は<AceEditor />の中です。
mode,theme等のpropsを指定することでカスタマイズすることができます。

表示する内容は、propsで受け取るようにしています。

呼び出し元のpropsの値によって、表示用のエディターと編集用のエディターを使い分けられるようになっています。

値が書き換えられた場合は、呼び出し元の関数で処理するようにしています。

呼び出し元のコンポーネント

import Editor from './Editor';

handleContentChange(e) {
  this.setState({ 
    content: e
  });
}

～～～省略

  <Editor
    readOnly={true}
    contents={this.state.data.CONTENT}
    onChangeAction={e => this.handleContentChange(e)}
  />

～～～

表示結果

このように、手軽にエディターを埋め込むことができました