1 | ## 介绍
|
2 |
|
3 | fei-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/)打包工具配合使用。而且可以更好的和
|
24 | es6配合使用。并且支持按需引入
|
25 |
|
26 | ```shell
|
27 | npm i fei-editor -S
|
28 | # or
|
29 | yarn add fei-editor
|
30 | ```
|
31 |
|
32 | ## 引入
|
33 |
|
34 | 在 main.js 中写入以下内容:
|
35 |
|
36 | ```javascript
|
37 | import { createApp } from 'vue'
|
38 | import Editor from 'fei-editor';
|
39 | import App from './App.vue';
|
40 |
|
41 | import * as ace from 'brace'
|
42 | import 'brace/ext/emmet'
|
43 | import 'brace/ext/language_tools'
|
44 | import 'brace/mode/json'
|
45 | import 'brace/snippets/json'
|
46 | import 'brace/theme/chrome'
|
47 |
|
48 | const app = createApp(App)
|
49 | app.component(Editor.name, Editor)
|
50 | app.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进行构建
|