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方法更改编辑器的内容。

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

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编辑器中的内容？

2 个答案: