vue.js 使用 wangEditor富文本框
时间: 2024-09-25 14:13:16 浏览: 25
Vue.js是一个流行的JavaScript前端框架,它简化了构建用户界面的工作。WangEditor是一款功能强大的富文本编辑器,可以方便地集成到Vue应用中。以下是使用WangEditor的基本步骤:
1. 安装依赖:首先需要安装`wangeditor`和`vue-wangEditor`插件。你可以通过npm或yarn进行安装:
```bash
npm install wang editor vue-wangeditor
# 或者
yarn add wang editor vue-wangeditor
```
2. 引入组件:在你的Vue组件中,导入`WangEditor`组件并注册它:
```javascript
import { WangEditor } from 'vue-wangeditor';
import '@wangeditor/dist/css/wangEditor.css';
export default {
components: {
WangEditor,
},
};
```
3. 使用模板:在HTML部分添加富文本输入区,并初始化WangEditor实例:
```html
<template>
<div>
<wang-editor v-model="content" @ready="editorReady"></wang-editor>
</div>
</template>
<script>
export default {
data() {
return {
content: '',
};
},
methods: {
editorReady(editor) {
// 这里可以访问编辑器实例,进行进一步配置或监听事件
console.log('Editor ready:', editor);
},
},
};
</script>
```
4. 配置和定制:你可以在组件内或全局对WangEditor进行更多的配置,如设置主题、禁用某些功能等。