### 在
Vue 项目中
本地引用 WangEditor 编辑器
要在
Vue 项目中
本地引用 WangEditor 编辑器，需要完成以下步骤：
#### 1
. 下载 WangEditor 文件
可以通过 npm 安装或者直接下载源码文件。使用 npm 安装的方式如下：
```bash
npm install @wangeditor/editor --save
```
对于
Vue 项目，也可以直接从 WangEditor 的官方资源下载所需的
JavaScript 和 CSS 文件，并将其放置在项目目录中，例如 `static/wangeditor/` 文件夹中 [^2]。
#### 2
. 在
Vue 项目中引入 WangEditor
- **引入 CSS 文件**
在 `index
.html` 文件中添加 CSS 样式文件的
引用：
```html
<link rel="stylesheet" href="
./static/wangeditor/css/index
.css">
```
- **引入
JS 文件**
在 `index
.html` 文件中添加
JS 文件的
引用：
```html
<script src="
./static/wangeditor/
js/index
.js"></script>
```
#### 3
. 在
Vue 组件中使用 WangEditor
- **创建组件**
创建一个
Vue 组件用于渲染 WangEditor 编辑器。例如，可以创建一个名为 `WangEditor
.vue` 的组件，并在其中定义一个 `div` 用于渲染编辑器：
```
vue
<template>
<div>
<div ref="editorContainer" style="text-align:left;"></div>
</div>
</template>
```
- **初始化编辑器**
在
Vue 组件的生命周期钩子（如 `mounted`）中初始化 WangEditor：
```
vue
<script>
export default {
mounted() {
const { Editor } = window
.wangEditor;
const editor = new Editor(this
.$refs
.editorContainer);
editor
.create();
}
};
</script>
```
#### 4
. 配置 WangEditor
可以通过创建一个 `config
.js` 文件来配置 WangEditor 的功能选项，例如菜单项、颜色、表情等 [^4]：
```
javascript
export default {
menus: [
"head", "bold", "fontSize", "italic", "underline", '|',
"strikeThrough", "indent", "lineHeight", "foreColor", "backColor", "link", '|',
"list", "image", "justify", '|', "code", "splitLine", "undo", "emoticon", "redo",
],
colors: ["#000000", "#eeece0", "#1c487f", "#4d80bf", "#f7acbc", "#5f5d46", "#deab8a", "#fedcbd", "#f0dc70", "#ef5b9c", "#7fb80e", "#d71345", "#aa363d", "#cbc547", "#0c212b", "#8a8c8e"],
initEmotions: {
title: "笑脸",
type: "emoji",
content: "😀 😃 😄 😁 😆 😅 😂 🤣 😊 😇 🙂 🙃 😉 😌 😍 🥰 😘 😗 😙 😚 😋 😛 😝 😜 🤪 🤨 🧐 🤓 😎 🤩 🥳 😏 😒 😞 😔 😟 😕 🙁 ☹ 😣 😖 😫 😩 🥺 😢 😭 😤 😠 😡 🤬 🤯 😳 🥵 🥶 😱 😨 😰 😥 😓 🤗 🤔 🤭 🤥 😶 😐 😑 😬 🙄 😯 😦 😧 😮 😲 😴 🤤 😪 😵 🤐 🥴 🤢 🤮 🤧 😷 🤒 🤕 🤑 🤠 😈 👿 👹 👺 🤡 💩 👻 💀 ☠ 👽 👾 🤖 🎃 😺 😸 😹 😻 😼 😽 🙀 😿 😾"
.split(/\s/),
},
};
```
#### 5
. 使用配置
在
Vue 组件中引入并使用配置文件：
```
vue
<script>
import config from '
./config
.js';
export default {
mounted() {
const { Editor } = window
.wangEditor;
const editor = new Editor(this
.$refs
.editorContainer);
editor
.config
.menus = config
.menus;
editor
.config
.colors = config
.colors;
editor
.config
.initEmotions = config
.initEmotions;
editor
.create();
}
};
</script>
```
###
路径选错了应该是E:\VueSpace\vue_two>npm init -y ，领会精神
这篇博客介绍了如何在E盘的VueSpace文件夹下初始化Vue项目。首先通过切换目录到指定位置，然后使用`npm init -y`命令创建项目配置文件。接着，博主尝试通过`npm install vue`安装Vue，但未展示完整执行结果。尽管如此，可以推断出项目中引用的vue.js文件是Vue框架的核心组成部分。
扫一扫
831
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
