富文本编辑器

最新推荐文章于 2025-02-25 11:48:54 发布

原创最新推荐文章于 2025-02-25 11:48:54 发布 · 286 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#elementui #vue.js #javascript

本文档展示了如何在Vue项目中集成vue-quill-editor组件，用于创建商品内容的富文本编辑器。首先通过cnpm安装依赖，然后在main.js中导入并全局注册组件，最后在页面中使用quill-editor组件并添加添加商品的按钮。

下载依赖

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>