技术标签： antd react.js react-ace reactjs javascript
Ace是一个用JavaScript编写的可嵌入代码编辑器。它与Sublime，Vim和TextMate等本机编辑器的功能和性能相匹配。它可以轻松地嵌入任何网页和JavaScript应用程序中，React-Ace是Ace 的react 封装版本，使用简单，方便配合form表单使用。
npm install react-ace ace-builds
或者
yarn add react-ace ace-builds
注：官方已经停止了对Brace的支持！
简单封装一个Ace-editor，封装的原因：1、组件复用 ，2、兼容ant design 的form.getFieldDecorator，
如果不封装组件，直接使用AceEditor组件，会导致编辑器与form 设置value会冲突 ，出现报错
Warning: getFieldDecorator will override value, so please don’t set value directly and use setFieldsValue to set it.，而封装后可以避免这个问题。
import AceEditor from "react-ace";
import "ace-builds/src-noconflict/mode-sh";
import "ace-builds/src-noconflict/mode-python";
import "ace-builds/src-noconflict/theme-monokai";
import "ace-builds/src-noconflict/ext-language_tools";
export default (props)=>{
const {
mode,height,width,name,placeholder,value,onChange} = props;
return (
<AceEditor
width={
width||'500px'}
height={
height||'300px'}
mode={
mode||'sh'}
theme='monokai'
placeholder={
placeholder || ''}
onChange={
onChange}
name={
name||'ace-editor'}
value={
value}
editorProps={
{
$blockScrolling: true }}
fontSize='14px'
showGutter = {
true}
highlightActiveLine = {
true}
showPrintMargin = {
false}
setOptions = {
{
enableBasicAutocompletion:true,
enableLiveAutocompletion:true,
enableSnippets:false
}}
// onLoad = {(editor)=>{
// console.log(editor) //onLoad 的第一个参数是编辑器实例
//}}
// commands= {[{ //键盘指令
// name:'saveFile',
// bindKey:{win:'Ctrl-S',mac:'Command-S'}
// exec:()=>{
// console.log('saveFile')
//}
//}]}
//debounceChangePeriod = {500} // 防抖时间
/>)
}
<Form labelCol={
{
span: 6 }} wrapperCol={
{
span: 18 }}>
<FormItem
label="控制内容"
>
{
getFieldDecorator('script', {
rules: [{
required: true, message: '控制内容' }],
})(<AceEditor
mode='sh'
width='100%'
height='400px'
/>)}
</FormItem>
</Form>
| Prop | Default | Type | Description |
|---|---|---|---|
| name | ‘ace-editor’ | String | 用于编辑器的唯一ID |
| mode | ‘’ | String | 解析和代码突出显示的语言 |
| splits | 2 | Number | 视图拆分 |
| orientation | ‘beside’ | String | 拆分的方向在旁边还是在下面 |
| theme | ‘’ | String | 使用的主题 |
| value | ‘’ | Array of Strings | 设置值 |
| defaultValue | ‘’ | Array of Strings | 每个编辑器的默认值 |
| height | ‘500px’ | String | 高度的CSS值 |
| width | ‘500px’ | String | 宽度的CSS值 |
| className | String | 自定义类名 | |
| fontSize | 12 | Number | 字体大小的像素值 |
| showGutter | true | Boolean | 显示槽 |
| showPrintMargin | true | Boolean | 显示打印边距 |
| highlightActiveLine | true | Boolean | 突出显示活动行 |
| focus | false | Boolean | 是否聚焦 |
| cursorStart | 1 | Number | 光标的位置 |
| wrapEnabled | false | Boolean | 包装线 |
| readOnly | false | Boolean | 使编辑器为只读 |
| minLines | Number | 显示的最小行数 | |
| maxLines | Number | 显示的最大行数 | |
| enableBasicAutocompletion | false | Boolean | 启用基本自动补全 |
| enableLiveAutocompletion | false | Boolean | 启用实时自动补全 |
| enableSnippets | false | Boolean | 启用摘要 |
| tabSize | 4 | Number | tab空格值 |
| debounceChangePeriod | null | Number | onChange事件的抖动延迟时间 |
| onLoad | Function | 在编辑器加载时调用。第一个参数是编辑器的实例 | |
| onBeforeLoad | Function | 在编辑器加载之前调用。第一个参数是的实例ace | |
| onChange | Function | 发生在文档更改上，它具有2个参数，每个编辑器的值和事件 | |
| onCopy | Function | 由编辑器copy事件触发，并将文本作为参数传递 | |
| onPaste | Function | 由编辑器paste事件触发，并将文本作为参数传递 | |
| onSelectionChange | Function | 由编辑器selectionChange事件触发，并且将Selection作为第一个参数传递，并将事件作为第二个参数传递 | |
| onCursorChange | Function | 由编辑器changeCursor事件触发，并且将Selection作为第一个参数传递，并将事件作为第二个参数传递 | |
| onFocus | Function | 由编辑器focus事件触发 | |
| onBlur | Function | 由编辑器blur事件触发 | |
| onInput | Function | 由编辑器input事件触发 | |
| onScroll | Function | 由编辑器scroll事件触发 | |
| editorProps | Object | 可直接应用于Ace编辑器实例的属性 | |
| setOptions | Object | 直接应用于Ace编辑器实例的选项 | |
| keyboardHandler | String | 对应于要设置的绑定模式（例如vim或emacs） | |
| commands | Array | 新命令添加到编辑器 | |
| annotations | Array of Arrays | 要在编辑器中[{ row: 0, column: 2, type: ‘error’, text: ‘Some error.’}]显示的注释，即在装订线中显示 | |
| markers | Array of Arrays | 要在编辑器中显示的标记，即[{ startRow: 0, startCol: 2, endRow: 1, endCol: 20, className: ‘error-marker’, type: ‘background’ }] | |
| style | Object | 驼峰属性 |
文章浏览阅读794次，点赞2次，收藏5次。XFRM框架_linux的xfrm框架
文章浏览阅读774次。DedeCMS常用标签讲解笔记整理 今天我们主要将模板相关内容，在前面的几节课中已经基本介绍过模板标签的相关内容，大家可以下载天工开物老师的讲课记录：http://bbs.dedecms.com/132951.html,这次课程我们主要讲解模板具体的标签使用，并且结合一些实例来介绍这些标签。 先前课程介绍了，网站的模板就如同一件衣服，衣服的好坏直接决定了网站的好坏，很多网站一看界面_织梦中什么页面用什么标签教学
文章浏览阅读2.5k次，点赞2次，收藏15次。编译是大部分工程师的烦恼，大家普遍喜欢去写业务代码。但我觉得基本的编译流程，我们还是需要掌握的，希望遇到相关问题，不要退缩，尝试去解决。天下文章一大抄，百度能解决我们90%的问题。_gdb编译
文章浏览阅读1.8k次，点赞4次，收藏6次。python简易爬虫v1.0作者：William Ma (the_CoderWM)进阶python的首秀，大部分童鞋肯定是做个简单的爬虫吧，众所周知，爬虫需要各种各样的第三方库，例如scrapy, bs4, requests, urllib3等等。此处，我们先从最简单的爬虫开始。首先，我们需要安装两个第三方库：requests和bs4。在cmd中输入以下代码：pip install requestspip install bs4等安装成功后，就可以进入pycharm来写爬虫了。爬
文章浏览阅读2.6k次。解决方法：解决方法可以去github重新下载一个pyflakes.vim。执行如下命令git clone --recursive git://github.com/kevinw/pyflakes-vim.git然后进入git克降目录，./pyflakes-vim/ftplugin,通过如下命令将python目录下的所有文件复制到~/.vim/ftplugin目录下即可。cp -R ...._freetorn.vim
文章浏览阅读210次，点赞7次，收藏3次。本文简述了hello.c源程序的预处理、编译、汇编、链接和运行的主要过程，以及hello程序的进程管理、存储管理与I/O管理，通过hello.c这一程序周期的描述，对程序的编译、加载、运行有了初步的了解。_hit csapp
文章浏览阅读472次。点击上方 "程序员小乐"关注,星标或置顶一起成长后台回复“大礼包”有惊喜礼包！关注订阅号「程序员小乐」，收看更多精彩内容每日英文Sometimes you play a..._挑战安卓和ios!华为官宣鸿蒙手机版,p40搭载演示曝光!高管表态:我们准备好了
文章浏览阅读3.8w次，点赞107次，收藏993次。点击上方“Python爬虫与数据挖掘”，进行关注回复“书籍”即可获赠Python从入门到进阶共10本电子书今日鸡汤昔闻洞庭水，今上岳阳楼。大家好，我是小F。Python是目前最好的编程语言之一。由于其可读性和对初学者的友好性，已被广泛使用。那么要想学会并掌握Python，可以实战的练习项目是必不可少的。接下来，我将给大家介绍20个非常实用的Python项目，帮助大家更好的..._python项目
文章浏览阅读1.3k次。在网站的导航资源里看到了一个非常好用的东西：Android Asset Studio，可以在线生成各种图标。之前一直在用一个叫做Android Icon Creator的插件，可以直接在Android Studio的插件里搜索，这个工具的优点是可以生成适应各种分辨率的一套图标，有好几种风格的图标资源，遗憾的是虽然有很多套图标风格，毕竟是有限的。Android Asset Studio可以自己选择其..._在线 android 图标
文章浏览阅读514次。无限轮播广告位没有录屏，将就将就着看，效果就是这样主要代码KsBanner.java/** * 广告位 * * Created by on 2016/12/20. */public class KsBanner extends FrameLayout implements ViewPager.OnPageChangeListener { private List
文章浏览阅读2.2k次，点赞2次，收藏6次。继续上次的echart博客，由于省会流向图是从echart画廊中直接取来的。所以直接上代码<!DOCTYPE html><html><head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /&_java+echart地图+物流跟踪
文章浏览阅读1.4k次。一、OSD模块简介1.1 消息封装：在OSD上发送和接收信息。cluster_messenger -与其它OSDs和monitors沟通client_messenger －与客户端沟通1.2 消息调度：Dispatcher类，主要负责消息分类1.3 工作队列：1.3.1 OpWQ: 处理ops（从客户端）和sub ops（从其他的OSD）。运行在op_tp线程池。1...._ceph 发送数据到其他副本的源码