单击另一个文件时如何更改 ace 编辑器中的内容？

Question

我正在学习Reactjs并且想写一个网络编辑器。

左边是文件列表，中间是编辑器。当我点击一个文件时，编辑器的内容会发生变化

我们使用的是 brace，它是 ACE 编辑器的 commonjs 兼容版本。我们使用这样的代码将普通目录变成编辑器：

https://github.com/dujuanxian/webpanda/blob/ace/app/scripts/ui/Editor.js#L46

componentDidMount: function() {
    var editor = ace.edit(this.props.name);
    editor.getSession().setMode('ace/mode/'+this.props.mode);
    editor.setTheme('ace/theme/'+this.props.theme);
},

打开首页默认显示第一个文件，编辑器会正确显示，但如果我点击另一个文件，编辑器会消失，只留下一个正常的div内容。

您可以克隆存储库：https://github.com/dujuanxian/webpanda，以及运行：

$ git checkout ace
$ npm install
$ bower install
$ gulp watch

启动服务器并自动打开主页。

我有两个选项可以修复它，但我不知道该怎么做：

当我点击另一个文件时，再次重新创建 ACE 编辑器（这很慢，所以不是首选）
重用呈现的 ACE 编辑器，只需更改内容（我不确定是否可行）

如何解决？

Answer 1

您可以使用 editor you are using 的 setValue 方法更改编辑器的内容。

我从 section 元素中删除了 this.props.content，因为它导致 section 重新呈现，并且删除了 ace 插件生成的标记。相反，如果 this.props.content 已更改，我会在 componentDidUpdate 方法中设置内容：

componentDidMount: function() {
    this.editor = ace.edit(this.props.name);
    this.editor.getSession().setMode('ace/mode/'+this.props.mode);
    this.editor.setTheme('ace/theme/'+this.props.theme);
    this.editor.setValue(this.props.content);
},
componentDidUpdate : function(prevProps, prevState){
    if(this.props.content != prevProps.content){
       this.editor.setValue(this.props.content);
       this.editor.clearSelection();
    }
},
render: function() {
    return (<section id={this.props.name}></section>);
}

Answer 2

重用呈现的 ACE 编辑器确实是首选解决方案。为此，您需要为每个文件创建单独的会话。
使用 file.session = require("ace/ace").createEditSession(file.value) 为文件创建一个会话，并使用 editor.setSession(file.session)

将其设置到编辑器

另请注意，editor.getSession() 是旧的 api，最好使用 editor.session。

单击另一个文件时如何更改 ace 编辑器中的内容？

How to change the content inside an ace editor when I clicked on another file?

javascript

ace-editor

reactjs