如何在ReactJS中正确使用ACE编辑器

本文概述

为什么我应该使用另一个第三方库而不是仅使用ACE？
1.安装react-ace
2.使用ACE Editor
3.创建一个拆分编辑器

几乎每个前端开发人员(至少是那些在某些代码沙箱上工作的前端开发人员)都知道基于HTML和JS的出色代码编辑器插件Ace Editor。它与Sublime, Vim和TextMate等本机编辑器的功能和性能相匹配。它可以轻松地嵌入到任何网页和JavaScript应用程序中, 并作为Cloud9 IDE的主要编辑器进行维护, 并且是Mozilla Skywriter(Bespin)项目的后继者。
【如何在ReactJS中正确使用ACE编辑器】如果你正在使用React, 那么我们建议你使用开源的react-ace组件, 它将帮助你轻松地在应用程序中实现ace编辑器。
为什么我应该使用另一个第三方库而不是仅使用ACE？好的, 除了该库提供了可与ReactJS一起使用的即用型ACE组件(你可以自己轻松完成的事情)外, ace编辑器还通过辅助脚本URL创建WebWorkers。这要求工作脚本位于服务器上, 并强制你在服务器上托管ace编辑器。尽管在大多数情况下可以这样做, 但是它使你无法提供一个可以正常使用的ace编辑器软件包。这就是Brace出现在游戏中的地方, 它是ace编辑器的与浏览器兼容的版本。 Brace具有一个更新脚本, 该脚本会自动拉出ace构建并将其重构以提供以下内容：

内联所有支持的工人
自动要求工作人员使用” 模式” (语言)取决于模式文件本身
在与ace的setMode和setTheme使用相同的路径上提供模式和主题(只需将” ace” 替换为” brace” )

因此, 模块本身就是在后台使用Brace的包装器。
1.安装react-ace 要开始在你的React应用程序中实现Ace编辑器, 请安装react-ace模块。该模块是一组用于Ace / Brace的react组件, 可以轻松地嵌入到你的项目中。要安装, 请打开一个终端, 切换到项目目录并运行以下命令：

npm install react-ace

安装模块后, 你将能够导入组件以在视图中呈现。有关此模块的更多信息, 请访问Github上的官方存储库。
2.使用ACE Editor React中Ace Editor的用法非常简单, 因为所有内容都已抽象为一个组件, 即< AceEditor> 。该组件几乎需要原始AceEditor的所有属性, 但是它们不是通过对象传递而是通过props提供：

import React from 'react'; // Import Brace and the AceEditor Componentimport brace from 'brace'; import AceEditor from 'react-ace'; // Import a Mode (language)import 'brace/mode/java'; // Import a Theme (okadia, github, xcode etc)import 'brace/theme/github'; export default class App extends React.Component {constructor(props, context) {super(props, context); this.onChange = this.onChange.bind(this); }onChange(newValue) {console.log('change', newValue); }render() {return (< div> < AceEditormode="java"theme="github"onChange={this.onChange}name="UNIQUE_ID_OF_DIV"editorProps={{$blockScrolling: true}}/> < /div> ); }}

要检查此组件的所有可用属性, 请不要忘记在此处阅读官方文档。
3.创建一个拆分编辑器你可以创建拆分编辑器, 也可以从react ace模块而不是默认组件导入拆分组件。然后, 你可以提供将显示为单个组件的编辑器数量, 根据你的需要, 方向可以在旁边或下面：

import React from 'react'; // Import Brace and the AceEditor Componentimport brace from 'brace'; import {split as SplitEditor} from 'react-ace'; // Import a Mode (language)import 'brace/mode/java'; // Import a Theme (okadia, github, xcode etc)import 'brace/theme/github'; export default class App extends React.Component {constructor(props, context) {super(props, context); this.onChange = this.onChange.bind(this); }onChange(newValue) {console.log('change', newValue); }render() {return (< div> < SplitEditormode="java"theme="github"splits={2}orientation="beside"value=http://www.srcmini.com/{['hi', 'hello']}name="UNIQUE_ID_OF_DIV"editorProps={{$blockScrolling: true}}/> < /div> ); }}

在这种情况下, 由于我们的split道具的值为2且方向为” 旁边” , 因此该组件将呈现：