富文本编辑器

芋圆味糖罐

已于 2022-02-15 20:15:54 修改

阅读量204

点赞数

文章标签： vue.js javascript 前端

于 2022-02-14 19:02:04 首次发布

本文链接：https://blog.csdn.net/m0_62351775/article/details/122930325

版权

本文档展示了如何在Vue项目中安装并使用vue-quill-editor组件，包括在main.js中的导入和全局注册，以及在页面中创建富文本编辑器组件的详细步骤。通过这个教程，你可以创建一个用于添加商品内容的富文本编辑界面，并添加提交商品的按钮。

摘要由CSDN通过智能技术生成

下载依赖

cnpm i vue-quill-editor --S

在main.js中导入

//导入vue-quill-editor（富文本编辑器）
import VueQuillEditor from 'vue-quill-editor'
//导入vue-quill-editor的样式
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'

//全局注册富文本组件
Vue.use(VueQuillEditor)

在页面中使用

<el-tab-pane label="商品内容" name="4">
	// 富文本编辑器组件
  	<quill-editor v-model="addForm.goods_introduce"></quill-editor>
  	// 添加商品按钮
	<el-button type="primary" class="btnAdd">添加商品</el-button>
</el-tab-pane>