UNPKG

2.1 kBMarkdownView Raw
1## 介绍
2
3fei-editor vue3+版本
4
5### 最新版本
6
7[![NPM version](https://img.shields.io/npm/v/fei-editor.svg)](https://www.npmjs.com/package/fei-editor)
8
9## 安装
10
11通过[unpkg.com/fei-editor](https://unpkg.com/fei-editor/) 可以看到 fei-editor 最新版本的资源,也可以切换版本选择需要的资源,在页面上引入 js
12和 css 文件即可开始使用:
13
14```javascript
15<!-- import Vue.js -->
16<script src="https://cdn.jsdelivr.net/npm/vue"></script>
17<!-- import fei-editor -->
18<script src="https://unpkg.com/fei-editor@0.0.2/lib/index.min.js"></script>
19```
20
21### npm 安装
22
23推荐使用npm安装,它能更好地和[webpack](https://webpack.js.org/)打包工具配合使用。而且可以更好的和
24es6配合使用。并且支持按需引入
25
26```shell
27npm i fei-editor -S
28# or
29yarn add fei-editor
30```
31
32## 引入
33
34在 main.js 中写入以下内容:
35
36```javascript
37import { createApp } from 'vue'
38import Editor from 'fei-editor';
39import App from './App.vue';
40
41import * as ace from 'brace'
42import 'brace/ext/emmet'
43import 'brace/ext/language_tools'
44import 'brace/mode/json'
45import 'brace/snippets/json'
46import 'brace/theme/chrome'
47
48const app = createApp(App)
49app.component(Editor.name, Editor)
50app.mount('#app', true)
51```
52
53### CDN 安装
54
55快速构建一个编辑器需要依赖 [ace-builds](https://github.com/ajaxorg/ace-builds/) 构建,去下载对应资源放置到项目中或使用cdn
56
57```javascript
58<script src="../lib/fei-editor/src-min-noconflict/ace.js"></script>
59<script src="../lib/fei-editor/src-min-noconflict/ext-beautify.js"></script>
60<script src="../lib/fei-editor/src-min-noconflict/ext-language_tools.js"></script>
61<script src="../lib/fei-editor/src-min-noconflict/mode-json.js"></script>
62<script src="../lib/fei-editor/src-min-noconflict/snippets/json.js"></script>
63
64<script src="../lib/fei-editor/fei-editor.min.js"></script>
65```
66
67上面五个是依赖,根据需要实现的语言类型引入
68
69推荐使用npm方式来进行使用,这样可以更好的配合webpack进行构建