[英]How to add Firepad to a reactjs app
I am trying to add Firepad to a reactjs application. 我正在尝试将Firepad添加到reactjs应用程序中。 Here is my code
这是我的代码
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;
I've tried a few things to no success. 我尝试了几件事没有成功。 Other solutions on stack overflow include adding these script tags to the html but that didn't seem to work.
堆栈溢出的其他解决方案包括将这些脚本标签添加到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>
Any advice would be much appreciated. 任何建议将不胜感激。
For anyone else who comes accross this question. 对于遇到这个问题的其他人。 I eventually figured it out.
我最终想通了。
The issue was the way create-react-app builds itself. 问题是create-react-app自行构建的方式。
To use imported scripts just prepend "window." 要使用导入的脚本,只需在“窗口”之前添加。 before the firebase and codemirror functions.
在Firebase和Codemirror函数之前。 IE:
IE:
var codeMirror = window.CodeMirror(document.getElementById('firepad'), { lineWrapping: true }); var codeMirror = window.CodeMirror(document.getElementById('firepad'),{lineWrapping:true});
Use these npm packages
- brace
, react-ace
, firebase
, firepad
. 使用这些
npm packages
- brace
, react-ace
, firebase
, firepad
。
Since firepad
needs ace
to be present globally, assign brace to global var like(not the best way, but works) before importing firepad
由于
firepad
需要ace
才能在全局存在,因此在导入firepad
之前将大括号分配给global var like(不是最好的方法,但是可以工作)
import brace from 'brace';
global.ace = brace;
global.ace.require = global.ace.acequire;
import Firepad from 'firepad';
Use ref
to get instance of ReactAce
and initialize it in componentDidMount
using: 使用
ref
获取ReactAce
实例,并使用以下方法在componentDidMount
进行初始化:
new Firepad.fromACE(this.firepadRef, this.aceInstance.editor, options);
Similarly for CodeMirror
editor. 对于
CodeMirror
编辑器也是如此。
Hoping, this would be of some help. 希望这会有所帮助。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.