富文本编辑器可视化面板安装依赖依赖(图)

　　富文本编辑器可视化面板安装依赖依赖(图)

　　向页面添加产品内容等信息时，需要使用富文本编辑器。下面简单介绍一下实现步骤。

　　在vue项目中安装vue-quill-editor依赖（我使用的vue-cli直接安装在可视化面板中，非常方便）。将富文本编辑器和相应的样式导入到main.js文件中，并注册为可用的s组件。

　　//导入富文本编辑器

import VueQuillEditor from 'vue-quill-editor'

import 'quill/dist/quill.core.css' // import styles

import 'quill/dist/quill.snow.css' // for snow theme

import 'quill/dist/quill.bubble.css' // for bubble theme

Vue.use(VueQuillEditor)

　　使用组件（标签表单）对添加到表单中的数据进行双向绑定

　　4.点击按钮触发添加商品事件

　　// 添加商品

add() {

// console.log(this.addForm);

this.$refs.addFormRef.validate(async valid => {

if(!valid) {

return this.$message.error('请填写必要的表单项');

}

//执行添加的业务逻辑

//lodash cloneDeep(Obj)

const form = _.cloneDeep(this.addForm);

form.goods_cat = form.goods_cat.join(',');

//处理动态参数

this.manyTableData.forEach(item => {

const newInfo = {

attr_id: item.attr_id,

attr_value: item.attr_vals.join(' ')

}

this.addForm.attrs.push(newInfo);

})

//处理静态属性

this.onlyTableData.forEach(item => {

const newInfo = {

attr_id: item.attr_id,

attr_value: item.attr_vals

}

this.addForm.attrs.push(newInfo);

})

form.attrs = this.addForm.attrs;

console.log(form);

//发起请求添加商品

//商品的名称必须是唯一的

const {data: res} = await this.$http.post('goods', form)

console.log(res);

if (res.meta.status !== 201) {

return this.$message.error('添加商品失败！');

}

this.$message.success('添加商品成功！');

this.$router.push('/goods');

});