如何添加Firepad到reactjs應用程序

我正在嘗試將firepad添加到reactjs應用程序。這裏是我的代碼如何添加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>

任何意見將不勝感激。

來源

2017-06-29 Noah Drabinsky

結果是什麼？控制檯中有任何錯誤？ – shotor

我收到此警告 ./~/firepad/dist/firepad.min.js 14：3292-3299嚴重依賴關係：require函數以無法靜態提取依賴關係的方式使用鉻合金中的其他錯誤控制檯：未捕獲TypeError：放置不是函數 at new Display（codemirror.js：184） at new CodeMirror（codemirror.js：75）ere is this error –

對於任何其他人來說這個問題。我終於明白了。

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

要使用導入的腳本，只需添加「窗口」即可。在firebase和codemirror功能之前。 IE：

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

來源

2017-07-27 18:54:47

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

由於firepad需要ace是目前全球範圍內，指定捆帶全局變量一樣（不是最好的方式，但工程）進口firepad

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編輯器。

希望，這將有一定的幫助。

來源

2017-12-07 12:00:17 jayiitb

如何添加Firepad到reactjs應用程序

回答

相關問題