1

几个星期以来，我一直在寻找这个问题的答案，并且我已经阅读了我能找到的所有相关内容（在 SO、React 的文档中、在相关库（如 react-codemirror 等）的源代码中），并且找不到我能理解的答案。我在 React 上有点弱，这可能就是我失败的地方。

我正在开发一个使用 Firepad 的 React 项目（称为 Pharaoh，一个用于课堂的浏览器和桌面编辑器）（因此，我喜欢使用 Firebase 和 CodeMirror）。我已经使用了以上所有技术，包括使用 CodeMirror 编写桌面 Markdown 编辑器和使用 Firebase 的一些演示/实践应用程序。我在这里的问题几乎肯定是没有很好地理解 React 的问题之一。

我想要做的是能够将文件从我们的 Firepad/CodeMirror 实例中保存（到桌面）。我通常知道如何使用 FileReader 和 HTML5 Filesystem API，这甚至可以用 来完成node-fs，因为我的目标是我们的桌面应用程序（在 NW.js 上运行）。

CodeMirror 有一些非常有用的方法，例如editorName.codeMirror.doc.getValue()可以完美运行；Firepad 有更简单的editorName.firepad.getText()（.setText()我最终也会用它来从文件系统加载文件）。我知道这些是如何工作的，并且可以看到我将如何将它们返回并保存起来，这没问题。我的问题是我实际上无法访问这些方法。这可能是我应该知道的关于从第三方库或一般组件访问方法的一些愚蠢的事情，但我有点难过。我在工作中经常使用的一个工具 Codeshare.io，我相信它是内置在 React 中并使用 Firepad，它暴露了这些方法，所以我要深入研究它们的源代码（对 cURL 来说是的），看看我是否能找到任何答案，但任何更快的东西都会非常有帮助。

非常感谢！

注意：我想我需要获得更多的 SO 声誉；在发布之前删除/更改了一堆链接。

4

1 回答 1

1

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

由于firepad需要ace全局存在，因此在导入之前将大括号分配给 global var like（不是最好的方法，但有效）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-07T11:54:50.023 回答