如何将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构建自身的方式上。

要使用导入的脚本，只需预先加上“window”即可。在firebase和codemirror功能之前。即：

var codeMirror = window.CodeMirror(document.getElementById('firepad')，{ lineWrapping: true })；

Answer 2

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

由于firepad需要ace全局存在，因此在导入firepad之前，将brace分配给全局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编辑器也是如此。

希望这会对你有所帮助。