Giter VIP home page Giter VIP logo

bin-ace-editor's Introduction

介绍

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进行构建

相关链接

bin-ace-editor's People

Contributors

wangbin3162 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.