如何將Firepad添加到reactjs應用

Question

我正在嘗試將Firepad添加到reactjs應用程序中。 這是我的代碼

import React, { Component } from "react";
import firebase from "firebase";
import Firepad from "firepad";
import CodeMirror from 'codemirror';

class CourseNotes extends Component {
  componentDidMount() {
    var firepadRef = firebase.database().ref();
    var codeMirror = CodeMirror(document.getElementById('firepad'), { lineWrapping: true });
    var firepad = Firepad.fromCodeMirror(firepadRef, codeMirror, {
            richTextShortcuts: true,
            richTextToolbar: true,
            defaultText: 'Hello, World!'
          });
  }

  render() {
    return (
      <div>
        <div>testing </div>
        <div id="firepad" />
      </div>
    );
  }
}

export default CourseNotes;

我嘗試了幾件事沒有成功。 堆棧溢出的其他解決方案包括將這些腳本標簽添加到html中，但這似乎不起作用。

<!-- CodeMirror -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.17.0/codemirror.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.17.0/codemirror.css" />

<!-- Firepad -->
<link rel="stylesheet" href="https://cdn.firebase.com/libs/firepad/1.4.0/firepad.css" />
<script src="https://cdn.firebase.com/libs/firepad/1.4.0/firepad.min.js"></script>

任何建議將不勝感激。

Answer 1

對於遇到這個問題的其他人。 我最終想通了。

問題是create-react-app自行構建的方式。

要使用導入的腳本，只需在“窗口”之前添加。 在Firebase和Codemirror函數之前。 IE：

var codeMirror = window.CodeMirror（document.getElementById（'firepad'），{lineWrapping：true}）;

Answer 2

使用這些npm packages - brace ， react-ace ， firebase ， firepad 。

由於firepad需要ace才能在全局存在，因此在導入firepad之前將大括號分配給global var like（不是最好的方法，但是可以工作）

import brace from 'brace';
global.ace = brace;
global.ace.require = global.ace.acequire;
import Firepad from 'firepad';

使用ref獲取ReactAce實例，並使用以下方法在componentDidMount進行初始化：

new Firepad.fromACE(this.firepadRef, this.aceInstance.editor, options);

對於CodeMirror編輯器也是如此。

希望這會有所幫助。