代码拉取完成,页面将自动刷新
bin-editor-next 基于原有bin-ace-editor而来,支持vue3,说明文档
通过unpkg.com/bin-editor-next 可以看到 bin-editor-next 最新版本的资源,也可以切换版本选择需要的资源,在页面上引入 js 和 css 文件即可开始使用:
<!-- import Vue.js -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<!-- import bin-editor-next -->
<script src="https://unpkg.com/bin-editor-next@1.0.0/lib/index.min.js"></script>
推荐使用npm安装,它能更好地和webpack打包工具配合使用。而且可以更好的和 es6配合使用。并且支持按需引入
npm i bin-editor-next -S
# or
yarn add bin-editor-next
在 main.js 中写入以下内容:
import { createApp } from 'vue'
import Editor from 'bin-editor-next';
import App from './App.vue';
import * as ace from 'brace'
import 'brace/ext/emmet'
import 'brace/ext/language_tools'
import 'brace/mode/json'
import 'brace/snippets/json'
import 'brace/theme/chrome'
const app = createApp(App)
app.component(Editor.name, Editor)
app.mount('#app', true)
快速构建一个编辑器需要依赖 ace-builds 构建,去下载对应资源放置到项目中或使用cdn
<script src="../lib/bin-editor-next/src-min-noconflict/ace.js"></script>
<script src="../lib/bin-editor-next/src-min-noconflict/ext-beautify.js"></script>
<script src="../lib/bin-editor-next/src-min-noconflict/ext-language_tools.js"></script>
<script src="../lib/bin-editor-next/src-min-noconflict/mode-json.js"></script>
<script src="../lib/bin-editor-next/src-min-noconflict/snippets/json.js"></script>
<script src="../lib/bin-editor-next/bin-editor-next.min.js"></script>
上面五个是依赖,根据需要实现的语言类型引入
推荐使用npm方式来进行使用,这样可以更好的配合webpack进行构建
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。