/bin-ace-editor

新版代码编辑器，支持json、javascript、Java、sql等多种模式

Primary LanguageJavaScriptMIT LicenseMIT

介绍

document

现为了区分vue3依赖问题，新版编辑器已重新拉工程并命名为bin-editor-next，具体参考新版文档

最新版本

NPM version

安装

npm 安装

推荐使用npm安装，它能更好地和webpack打包工具配合使用。而且可以更好的和 es6配合使用。并且支持按需引入

npm i bin-ace-editor -S
# or 
yarn add bin-ace-editor

如果您了解node.js、npm安装，并希望配合webpack使用，请阅读下一节：快速上手。

引入

在 main.js 中写入以下内容：

import Vue from 'vue';
import Editor from 'bin-ace-editor';
import App from './App.vue';

// 按需引入需要的语言包皮肤等资源
require('brace/ext/emmet') // 如果是lang=html时需引入
require('brace/ext/language_tools') // language extension

require('brace/mode/json')
require('brace/snippets/json')
require('brace/theme/chrome')
// 注册组件后即可使用
Vue.component(Editor.name, Editor)

new Vue({
  el: '#app',
  render: h => h(App)
});

CDN 安装

快速构建一个编辑器需要依赖 ace-builds 构建，去下载对应资源放置到项目中或使用cdn

  <script src="../lib/bin-ace-editor/src-min-noconflict/ace.js"></script>
  <script src="../lib/bin-ace-editor/src-min-noconflict/ext-beautify.js"></script>
  <script src="../lib/bin-ace-editor/src-min-noconflict/ext-language_tools.js"></script>
  <script src="../lib/bin-ace-editor/src-min-noconflict/mode-json.js"></script>
  <script src="../lib/bin-ace-editor/src-min-noconflict/snippets/json.js"></script>

  <script src="../lib/bin-ace-editor/bin-ace-editor.min.js"></script>

上面五个是依赖，根据需要实现的语言类型引入

推荐使用npm方式来进行使用，这样可以更好的配合webpack进行构建

相关链接