Github https://github.com/securingsincity/react-ace
在线预览 https://securingsincity.github.io/react-ace
react-ace 是Ace 的react 封装版本

  1. yarn add react-ace
  • enableBasicAutocompletion 普通自动完成，可选类型(true/false)
  • enableLiveAutocompletion 实时自动完成，可选类型(true/false)
  • enableSnippets 代码自动补全，可选类型(true/false)
  • onLoad:加载完成后执行的函数，第一个参数是编辑器的实例
  • 支持代码 diff对比

AceEditor

image.png

  1. import React, { useState, useEffect, forwardRef } from 'react';
  2. import { string, bool, number, func } from 'prop-types';
  3. import cls from 'classnames';
  4. import { isEqual, noop } from 'lodash';
  6. import AceEditor from 'react-ace'; // 488.kb gzip 132k
  7. // 引入 mode
  8. import "ace-builds/src-noconflict/mode-json";
  9. // 引入 theme
  10. import "ace-builds/src-noconflict/theme-github";
  11. // 如果要代码提示，这个必须引入!!!
  12. import "ace-builds/src-noconflict/ext-language_tools";
  14. const EditorRef = forwardRef(Editor);
  16. export default EditorRef;
  18. EditorRef.propTypes = {
  19.   onChange: func,
  20.   mode: string,
  21.   theme: string,
  22.   showGutter: bool,
  23.   tabSize: number,
  24. };
  25. EditorRef.defaultProps = {
  26.   onChange: noop,
  27.   mode: 'json', // 解析和代码突出显示的语言
  28.   theme: 'github',
  29.   showGutter: true, // false隐藏行号
  30.   tabSize: 2,
  31. }
  33. function Editor(props, ref){
  34.   const {
  35.     value,
  36.     onChange,
  37.     className,
  38.     ...rest
  39.   } = props;
  41.   const [state, setState] = useState();
  43.   useEffect(() => {
  44.     if (isEqual(value, state)) return;
  45.     setState(value ?? undefined);
  46.   }, [value]);
  48.   function handleChange(values){
  49.     setState(values);
  50.     onChange(values);
  51.   }
  53.   return (
  54.     <AceEditor
  55.       ref={ref}
  56.       value={state}
  57.       className={cls('full', className)}
  58.       onChange={handleChange}
  59.       wrapEnabled // 换行
  60.       highlightActiveLine // 突出活动线
  61.       readOnly // 只读，禁止编辑
  62.       debounceChangePeriod={60} // onChange事件的抖动延迟
  63.       style={{ backgroundColor: 'rgba(245,245,245,0.7)'}}
  64.       editorProps={{ $blockScrolling: true }}
  65.       // 设置编辑器格式化和代码提示
  66.       setOptions={{
  67.         enableBasicAutocompletion: true, // 代码基本提示
  68.         enableLiveAutocompletion: true, // 代码智能提示
  69.         enableSnippets: true, // 显示代码片段
  70.         showLineNumbers: true, // 显示行号
  71.         useWorker: false,
  72.         tabSize: 2,
  73.       }}
  74.       // annotations={
  75.       //  [{row: 0, column: 2, type: 'error', text: '手动设置错误' }]
  76.       // }
  77.       {...rest}
  78.     />
  79.   );
  81. }

mode

mode & theme文档 https://github.com/securingsincity/react-ace/blob/master/docs/Modes.md
默认支持常见的 16中语言，常用的 mode

  • html，css
  • json
  • javascript，typescript，jsx
  • sql
    1. [
    2. "csharp","css","elixir",
    3. "golang","handlebars","html",
    4. "java","javascript","json",
    5. "markdown","mysql","python",
    6. "ruby","sass","typescript",
    7. "xml"
    8. ]

theme

默认支持 10种主题，常用的主题有

  • github，solarized_light 亮色
  • monokai，solarized_dark 暗色
    1. [
    2. "github","kuroir","monokai",
    3. "solarized_dark","solarized_light","terminal",
    4. "textmate","tomorrow","twilight",
    5. "xcode"
    6. ]

AceEditor事件

Ace参数及事件 https://github.com/securingsincity/react-ace/blob/master/docs/Ace.md

  1. onLoad 编辑器加载时调用。第一个参数是编辑器的实例 ace
  2. onBeforeLoad 编辑器加载之前调用。第一个参数是的实例ace
  3. onChange 文档改变，有2个参数，每个编辑器的值和事件
  4. onCopy 编辑器copy事件触发，将文本作为参数传递
  5. onPaste 编辑器paste事件触发，将文本作为参数传递
  6. onSelectionChange 编辑器selectionChange事件触发
    1. 将Selection作为第一个参数传递，事件作为第二个参数传递
  7. onCursorChange 编辑器changeCursor事件触发
    1. 将Selection作为第一个参数传递，事件作为第二个参数传递
  8. onFocus 编辑器focus事件触发
  9. onBlur 编辑器blur事件触发
  10. onInput 编辑器input事件触发
  11. onScroll 编辑器scroll事件触发

onPaste 粘贴

onCopy 复制

getCompletions 自定义代码段

  1. const completers = [
  2.   {
  3.     name: 'name',
  4.     value: 'one',
  5.     score: 100,
  6.     meta: '手动添加1'
  7.   },
  8.   {
  9.     name: 'name',
  10.     value: 'two',
  11.     score: 100,
  12.     meta: '手动添加2'
  13.   }
  14. ];
  16. complete(editor) {
  17.   const snippet = {
  18.     getCompletions: (callback) => {
  19.       callback(null, completers);
  20.     }
  21.   }
  22.   //向编辑器中添加自动补全列表
  23.   editor.completers.push(snippet);
  24. }

DiffEditor 代码对比

https://github.com/securingsincity/react-ace/blob/master/docs/Diff.md

AceEditor 常见问题

webpack-resolver 打包问题

加上 webpack-resolver 打包后， 40.1MB
文件被拆分成一个个小文件

  1. import AceEditor from 'react-ace';
  2. // import 'ace-builds/webpack-resolver';
  3. import 'ace-builds/src-noconflict/mode-json';

未捕获的DOMException：无法在’WorkerGlobalScope’上执行’importScripts’
‘http://localhost:9000/worker-html.js'上的脚本无法加载
https://github.com/securingsincity/react-ace/issues/725
解决：setOptions={{ useWorker: false }}

react-ace参考：react-ace实现代码编辑
https://www.jianshu.com/p/cc9f5eb87aa2