Ace是一个功能非常强大的编辑器。它实现了语法着色，缩进，代码提示功能。且具有大量的主题，支持大量语言。但是Ace的文档基本上是英文的。
先展示下Ace的例子。

参考地址：http://www.feiaci.com/#/JsonCrop

下面介绍下如何实现其功能。

一、普通引入使用

1. 我们可以在bootstarp cdn上下载其插件。https://www.bootcdn.cn/ace/

2. Ace有很多很多的文件，我们必须要自己需要加载相关文件。

有几个文件是必须加载的：
ace.js -- Ace项目的文件，
ext-beautify.js -- 编辑的美化
ext-language_tools.js --
mode-javascript.js -- 模式， 可以是JS，也可以是其他（java，c#）。这就是它的强大之处支持多语言。
theme-xcode.js -- 主题， 就像IDE里可以设置主题的风格。根据需要引入不同的js。

3. 网页上使用

    <div class="convertImage">
        <div class="title">
            Json 工具
        </div>
        <div class="content">
            <div id="editor">{name: 'jack', age: '20'}</div>
            <div class="btn-group button" role="group" aria-label="...">
                <button type="button" class="btn btn-default" @click="jsonFormat">Json 格式化（format)</button>
                <button type="button" class="btn btn-default" @click="jsonEncode">Json 压缩</button>
            </div>
        </div>
    </div>

引入JS

<script src="https://cdn.bootcss.com/ace/1.4.6/ace.js"></script>
<script src="https://cdn.bootcss.com/ace/1.4.6/ext-beautify.js"></script>
<script src="https://cdn.bootcss.com/ace/1.4.6/ext-language_tools.js"></script>
<script src="https://cdn.bootcss.com/ace/1.4.6/mode-javascript.js"></script>
<script src="https://cdn.bootcss.com/ace/1.4.6/theme-xcode.js"></script>

实例化

this.editor = ace.edit('editor');// 这个地方就是id是editor的div
this.editor.setTheme('ace/theme/xcode');
let jsMode = ace.require('ace/mode/javascript').Mode;
this.editor.session.setMode(new jsMode());

操作Editor

this.editor.setValue(jsonDoc);
this.editor.getValue()

更多帮助讲前往ace https://github.com/ajaxorg/ace-builds

二、vue中使用ace

1. 安装

详细请看 https://github.com/chairuosen/vue2-ace-editor

npm install --save-dev vue2-ace-editor

在代码中使用

<template>
    <div>
          <editor v-model="content" 
              @init="initEditor" 
              lang="javascript" 
              theme="chrome">
          </editor>
    </div>
</template>

<script>
export default{
    name: ''vueEditor",
    components: {
        editor: require('vue2-ace-editor');
    },
    data: {
        content: '',
    },
    methods: {
        initEditor(){
            require('brace/ext/language_tools');
            require('brace/mode/yaml');
            require('brace/mode/javascript');
            require('brace/mode/less');
            require('brace/theme/tomorrow_night_blue');
            require('brace/snippets/javascript');
        }
    }
}
</script>