技术标签： 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 | 驼峰属性 |
文章浏览阅读685次。1.1.什么是有状态？有状态服务，即服务端需要记录每次会话的客户端信息，从而识别客户端身份，根据用户身份进行请求的处理，典型的设计如tomcat中的session。例如登录：用户登录后，我们把登录者的信息保存在服务端session中，并且给用户一个cookie值，记录对应的session。然后下次请求，用户携带cookie值来，我们就能识别到对应session，从而找到用户的信息。缺点是什么？服务端保存大量数据，增加服务端压力 服务端保存用户状态，无法进行水平扩展 客户端请求依赖服务.._无状态token登录
文章浏览阅读293次。SDUT OnlineJudge#include<iostream>using namespace std;int main(){int a,b,c,d;cin>>a;b=a%10;c=a/10%10;d=a/100%10;int key[3];key[0]=b;key[1]=c;key[2]=d;for(int i = 0;i<3;i++){ if(key[i]!=0) { cout<<key[i.
文章浏览阅读2.2k次。年终奖采用的平均每月的收入来评定缴税级数的，速算扣除数也按照月份计算出来，但是最终减去的也是一个月的速算扣除数。为什么这么做呢，这样的收的税更多啊，年终也是一个月的收入，凭什么减去12*速算扣除数了？这个霸道（不要脸）的说法，我们只能合理避免的这些跨级的区域了，那具体是那些区域呢？可以参考下面的表格：年终奖一列标红的一对便是盲区的上下线，发放年终奖的数额一定一定要避免这个区域，不然公司多花了钱..._年终奖盲区表
文章浏览阅读7.5k次，点赞5次，收藏19次。matlab结构体struct字段变量值提取_matlab读取struct类型数据中的值
文章浏览阅读4.8k次。1，什么情况下使用fragment通常用来作为一个activity的用户界面的一部分例如, 一个新闻应用可以在屏幕左侧使用一个fragment来展示一个文章的列表,然后在屏幕右侧使用另一个fragment来展示一篇文章 – 2个fragment并排显示在相同的一个activity中,并且每一个fragment拥有它自己的一套生命周期回调方法,并且处理它们自己的用户输_android reader fragment
文章浏览阅读2.8k次。FFT of waveIn audio signalsBy Aqiruse An article on using the Fast Fourier Transform on audio signals. IntroductionThe Fast Fourier Transform (FFT) allows users to view the spectrum content of _fft of wavein audio signals
文章浏览阅读5.9k次。https://jaywcjlove.github.io/awesome-mac/ 这个仓库主要是收集非常好用的Mac应用程序、软件以及工具，主要面向开发者和设计师。有这个想法是因为我最近发了一篇较为火爆的涨粉儿微信公众号文章《工具武装的前端开发工程师》，于是建了这么一个仓库，持续更新作为补充，搜集更多好用的软件工具。请Star、Pull Request或者使劲搓它 issu_awesomemac
文章浏览阅读616次。一.jquery简介 jQuery是一个快速的，简洁的javaScript库，使用户能更方便地处理HTML documents、events、实现动画效果，并且方便地为网站提供AJAX交互 jQuery 的功能概括1、html 的元素选取2、html的元素操作3、html dom遍历和修改4、js特效和动画效果5、css操作6、html事件操作7、ajax_简介java中jquery技术
文章浏览阅读1.6w次，点赞5次，收藏19次。我修改的是表格的固定列滚动而产生的滚动条引用Table的组件的css文件中加入下面的样式：.ant-table-body{ &amp;::-webkit-scrollbar { height: 5px; } &amp;::-webkit-scrollbar-thumb { border-radius: 5px; -webkit-box..._ant design ::-webkit-scrollbar-corner
文章浏览阅读269次。基于JSP的健身俱乐部会员管理系统项目分享:见文末!
文章浏览阅读1.8k次，点赞2次，收藏15次。同学们，是不是又到了一年一度写开题报告的时候呀？是不是还在为不知道论文的开题报告怎么写而苦恼?Take it easy!我带着倾尽我所有开题报告写作经验总结出来的最强保姆级开题报告解说来啦，一定让你脱胎换骨，顺利拿下开题报告这个高塔，你确定还不赶快点赞收藏学起来吗？_开题报告研究难点
文章浏览阅读6k次，点赞4次，收藏17次。原生先获取对象var a = document.getElementById("dom");vue先添加ref <div class="" ref="divBox">获取对象let a = this.$refs.divBox获取父、子、兄弟节点方法var b = a.childNodes; 获取a的全部子节点 var c = a.parentNode; 获取a的父节点var d = a.nextSbiling; 获取a的下一个兄弟节点 var e = a.previ_获取子节点的路径 vue