如何将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编辑器也是如此。

希望这会有所帮助。