React中使⽤react-ace实现代码编辑框⾃动提词功能
简介
Ace是⼀个⽤JavaScript编写的可嵌⼊代码编辑器。它与Sublime，Vim和TextMate等本机编辑器的功能和性能相匹配。它可以轻松地嵌⼊任何⽹页和JavaScript应⽤程序中，React-Ace是Ace 的react 封装版本，使⽤简单，⽅便配合form表单使⽤。
安装
npm install react-ace ace-builds
或者
yarn add react-ace ace-builds
业务背景
需要在前端页⾯实现sql和javascript配置，后台解析，计算结果，（结算引擎）
react-ace 编辑器属性
Prop Defa
ult
Type Description
name 'ace-
edito
r'
String⽤于编辑器的唯⼀ID
mode''String解析和代码突出显⽰的语⾔splits2Number视图拆分
orientation 'besi
de'
String拆分的⽅向在旁边还是在下⾯
theme''String使⽤的主题
value''Array of
Strings
设置值
defaultValue''Array of
Strings
每个编辑器的默认值
height '500
px'
String⾼度的CSS值
width '500
px'
String宽度的CSS值
className String⾃定义类名fontSize12Number字体⼤⼩的像素值showGutter true Boolean显⽰槽showPrintMarg
in
true Boolean显⽰打印边距
highlightActive
Line
true Boolean突出显⽰活动⾏focus false Boolean是否聚焦
cursorStart1Number光标的位置
wrapEnabled false Boolean包装线
readOnly false Boolean使编辑器为只读
minLines Number显⽰的最⼩⾏数
maxLines Number显⽰的最⼤⾏数enableBasicAu
tocompletion
false Boolean启⽤基本⾃动补全
enableLiveAut
ocompletion
false Boolean启⽤实时⾃动补全enableSnippets false Boolean启⽤摘要
tabSize4Number tab空格值
debounceChan
gePeriod
null Number onChange事件的抖动延迟时间
blur事件
onLoad Functio
n
在编辑器加载时调⽤。第⼀个参数是编辑器的实例
onBeforeLoad Functio
n
在编辑器加载之前调⽤。第⼀个参数是的实例ace
onChange Functio
n
发⽣在⽂档更改上，它具有2个参数，每个编辑器的值和事件
onCopy Functio
n
由编辑器copy事件触发，并将⽂本作为参数传递
onPaste Functio
n
由编辑器paste事件触发，并将⽂本作为参数传递
onSelectionCh ange Functio
n
由编辑器selectionChange事件触发，并且将Selection作为第⼀个参数传递，并将
事件作为第⼆个参数传递
onCursorChan ge Functio
n
由编辑器changeCursor事件触发，并且将Selection作为第⼀个参数传递，并将事
件作为第⼆个参数传递
onFocus Functio
n
由编辑器focus事件触发
onBlur Functio
n
由编辑器blur事件触发
onInput Functio
n
由编辑器input事件触发
onScroll Functio
n
由编辑器scroll事件触发
editorProps Object可直接应⽤于Ace编辑器实例的属性
setOptions Object直接应⽤于Ace编辑器实例的选项
keyboardHandl
er
String对应于要设置的绑定模式（例如vim或emacs）commands Array新命令添加到编辑器
annotations Array of
Arrays
要在编辑器中[{ row: 0, column: 2, type: ‘error’, text: ‘Some error.’}]显⽰
的注释，即在装订线中显⽰
Array of要在编辑器中显⽰的标记，即[{ startRow: 0, startCol: 2, endRow: 1, endCol:
Prop Defa
ult
Type Description
import 'ace-builds/src-noconflict/theme-xcode'
import 'ace-builds/src-noconflict/ext-language_tools'
import 'ace-builds/webpack-resolver'
// 编辑器需要⾃定义时的数据结构
// const completers = [
//  {
//    // name: 'name',
//    value: 'price',
//    // score: 100,
//    meta: '变量类-单价',
//  },
/
/  {
//    // name: 'name',
//    value: 'Waybill.price',
//    // score: 100,
//    meta: '变量类-单价',
//  },
// ]
const SqlEditor = (props: any) => {
const editorInstance = useRef<any>() // 获取编辑器实例
const { placeholder, defaultValue, onChange, completers } = props  const complete = (editor: any) => {
editorpleters = [
// ⾃⼰的代码提⽰
{
getCompletions: function (
editor: any,
session: any,
pos: any,
prefix: any,
callback: any
) {
callback(null, completers)
},
},
// 编辑器的代码提⽰
// ...editorpleters,
]
}
useEffect(() => {
// !动态改变编辑器的代码提⽰，必须重新设置
complete(editorInstance.current.editor)
}, [completers])
return (
<AceEditor
ref={editorInstance}
placeholder={placeholder}
mode="javascript"
theme="xcode"
name="UNIQUE_ID_OF_DIV"
fontSize={14}
defaultValue={defaultValue}
editorProps={{
$blockScrolling: false,
}}
onChange={onChange}
onPaste={onChange}
onLoad={complete}
showPrintMargin={false}
showGutter={true}
highlightActiveLine={true}
setOptions={{
useWorker: false,
enableBasicAutocompletion: true,
enableLiveAutocompletion: true,
enableSnippets: true,
showLineNumbers: false,
tabSize: 2,
}}
/>
)

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。