AceEditor与Ant Design结合

  • 2019-10-21
  • 971
  • 1

在上篇文章中介绍了code Mirror在Ant Design下的使用,本文介绍下Ace Editor如何与Ant Design结合。Ace与Code Mirror的功能类似,都可以作为在线代码编辑器使用,都支持:Java、C、C#、Html、Json、markDown等主流的代码语言。

官方链接:

官方地址:https://ace.c9.io/

github:https://github.com/ajaxorg/ace

Demo: https://ace.c9.io/build/kitchen-sink.html

使用:

1、引入npm包

除了引入Ace Editor包之外,还需要引入brace包,ace 只是提供一个编辑器功能,真正的语法格式支持、高亮、校验都是在brace中提供的。这里说下brace和ace-builds的差异,他们的功能类似,看你喜好选择使用brace还是ace builds。如果你使用的是ReactJs开发的单页应用那么我推荐你使用brace。 因为ace builds跟brace相比有下面这些缺点:

  • ace-builds在前端项目构建时会打出很多的js文件,很多语法类型检查等都在这些js文件里面的,而且这些js文件还需要放在本地部署环境中,因为ace builds在语法检查的时候是读取本地环境的js文件。如果这些js文件部署到cdn的话是拿不到的。
  • 对单页应用来说只需要一个js、css文件就可以,引入ace builds之后就需要引入过多的js文件,显得很臃肿。
tnpm install react-ace --save
tnpm install brace --save

2、在ant Design项目中引入

因为我在项目很多地方都需要Ace Editor作为json编辑器来使用,所以这里我封装成了一个单独的组件,方便其他地方引用。

import React, { PureComponent } from '@alipay/bigfish/react';

import AceEditor from 'react-ace';
import brace from 'brace';
import 'brace/mode/json';
import 'brace/mode/html';
import 'brace/theme/github';
import 'brace/theme/monokai';
import 'brace/ext/language_tools';

export default class AceEditorComp extends PureComponent {
  render() {
    const { model, theme, name, height, width, placeholder, value, onChange } = this.props;
    return (
      <AceEditor
        placeholder={placeholder || ''}
        mode={model || 'json'}
        theme={theme || 'monokai'}
        name={name || ''}
        editorProps={{ $blockScrolling: true }}
        fontSize={14}
        height={height || '400px'}
        width={width || '100%'}
        showPrintMargin
        showGutter
        useWorker={false}
        highlightActiveLine
        onChange={onChange}
        value={value}
        enableBasicAutocompletion
        enableLiveAutocompletion
        enableSnippets
        showLineNumbers
        tabSize={2}
        setOptions={{
          enableBasicAutocompletion: true,
          enableLiveAutocompletion: true,
          enableSnippets: true,
          showLineNumbers: true,
          tabSize: 2,
        }}
      />
    );
  }
}

3、form表单使用

 <Form labelCol={{ span: 5 }} wrapperCol={{ span: 15 }}>
        <FormBuilder meta={formMeta} form={form} />
        <FormItem
        label="控制内容"
        className={styles.formBottom}
      >
        {form.getFieldDecorator('controlmodel', {
          rules: [{ required: false, message: '控制内容' }],
        })(<AceEditorComp
          mode="json"
          theme="monokai"
          name="controlmodel"
          height="400px"
        />)}
        </FormItem>
        <FormItem className={styles.formBtnCls}>
          <Button type="primary" htmlType="submit" onClick={() => handleUpdateControlModel()}>
            保存
          </Button>
        </FormItem>
      </Form>

总结(Code Mirror与Ace对比)

特性Code MirrorAce Edior
功能完备
扩展性插件、主题、mode扩展插件、主题、mode扩展
外观/交互支持多款主题和部件
基础UI较为简单
支持多款主题
文档/demo官网详细的api文档
demo单页展示
官网包含特性支持
mode创建教程
api文档
demo操作区
支持/社区独立社区
star:13K+ issue:200+
star:16k+ issue:500+
兼容性Firefox3+ ,chrome,Safari 3+
IE 8+,Opera 9+
Firefox 3.5+,Safari 4+
chrome,IE 8+,Opera 11.5+
与AntDesign融合支持(form表单需特殊处理)支持

感谢打赏!
微信

评论