【VUE项目实战】55、商品添加功能（五）-商品内容模块

接上篇《54、商品添加功能（四）-商品图片上传模块》
上一篇我们完成了商品图片上传模块的开发，本篇我们来完成商品内容编辑模块的开发。

一、要实现的效果

我们要实现在商品内容页签部分嵌入一个富文本编辑框，可以让用户在编辑框中编辑大段带格式的文字：

二、下载和引入富文本编辑器依赖

我们本次要使用的富文本编辑框组件，是名为“vue-quill-editor”的依赖，我们首先需要打开之前一直在使用的VUE UI可视化工具界面（打开cmd命令提示符窗口，输入“vue ui”指令即可打开图形化工具）：

找到“依赖”菜单，然后点击“安装依赖”：

在搜索框中输入“vue-quill-editor”进行依赖的搜索，选择第一个，点击下面的安装来安装此插件：

安装完成后，我们在依赖列表中就可以看到这个依赖了。然后我们点击查看详情在Github该项目的README.md内容，查看引入方式（github打不开的，可以查看https://www.npmjs.com/package/vue-quill-editor官方文档）：


可以看到上面有两种引用方式，其中一种是“mount with global”即全局引用，一种是“mount with component”即某个页面的私有子组件（局部引用）。我们这里使用第一种全局挂载的形式，来引入“vue-quill-editor”依赖。我们在项目入口文件main.js中引入富文本编辑器的依赖：

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import './plugins/element.js'
//导入全局样式表
import './assets/css/global.css'
import axios from 'axios'
import TreeTable from 'vue-table-with-tree-grid'
//导入【富文本编辑器】
import VueQuillEditor from 'vue-quill-editor'
//导入【富文本编辑器】对应的样式
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
 
axios.defaults.baseURL = 'http://127.0.0.1:8888/api/private/v1/' //定义根路径
//为axios添加拦截器
axios.interceptors.request.use(config =>{
  console.log(config);
  config.headers.Authorization = window.sessionStorage.getItem('token');
  return config;//最后必须返回config
})
Vue.prototype.$http = axios //在原型链上给$http赋值为axios对象
//https://lianghj.top:8888/api/private/v1/
//http://127.0.0.1:8888/api/private/v1/
Vue.config.productionTip = false
 
Vue.component('tree-table',TreeTable);
//将【富文本编辑器】注册为全局可用的组件
Vue.use(VueQuillEditor)
Vue.filter('dateFormat',function(originVal){
    const dt = new Date(originVal);
    const y =  dt.getFullYear();
    const m = (dt.getMonth()+1+'').padStart(2,'0');
    const d = (dt.getDate()+'').padStart(2,'0');
    const hh = (dt.getHours()+'').padStart(2,'0');
    const mm = (dt.getMinutes()+'').padStart(2,'0');
    const ss = (dt.getSeconds()+'').padStart(2,'0');
    return `${y}-${m}-${d} ${hh}:${mm}:${ss}`
});
 
new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

三、使用富文本编辑器

通过查看“vue-quill-editor”的官方文档可以了解到，其用法也有两种，一种是“SSR”，一种是“SPA”。
其中SSR（Server Side Render）即 服务端渲染。一般也称为多页面应用（Mulpile Page Application），简称 MPA。
而SPA（Single Page Application）即单页面应用。一般也称为客户端渲染（Client Side Render），简称CSR。SPA所需的资源，如HTML、CSS和JS 等，会在一次请求中就加载完成。
我们的这个项目是前后端分离的，所有的前端页面要素都是前端加载的，不是后端服务器渲染的，所以是SPA应用，所以我们需要选择“SSR”的使用方式。

我们回到商品添加组件Add.vue页面，在“商品内容”区域，将富文本编辑器代码编写在里面：

<el-tab-pane label="商品内容" name="5">
    <!-- 富文本编辑器组件 -->
    <quill-editor v-model="addForm.goods_introduce"></quill-editor>
</el-tab-pane>

其中的“goods_introduce”字段，是我们参照之前API往后台提交的商品内容字段，我们把该字段定义在data区域的addForm表单对象中，

//添加商品的表单数据对象
addForm: {
    goods_name:'',
    goods_price: 0,
    goods_weight: 0,
    goods_number: 0,
    //商品所属的分类数组
    goods_cat: [],
    //图片的数组
    pics: [],
    //商品详情描述
    goods_introduce: ""
},

然后我们刷新页面，就可以看到富文本编辑框了：

我们可以看到编辑框的高度非常窄，我们需要调整一下， 在网页右击鼠标检查该组件，打开F12开发者工具，可以看到该编辑区的CSS样式名，为“ql-editor”：

我们在自己项目中的“/css/global.css”下优化该CSS样式，为其添加一个最小高度300像素：

.ql-editor{
  min-height: 300px;
}

效果：
最后，我们需要在富文本编辑框下发新增一个“添加商品”的蓝色按钮：

我们回到商品内容Html代码部分，添加一个“el-button”:

<el-tab-pane label="商品内容" name="5">
    <!-- 富文本编辑器组件 -->
    <quill-editor v-model="addForm.goods_introduce"></quill-editor>
    <el-button type="primary" style="margin-top:15px">添加商品</el-button>
</el-tab-pane>

至此我们的商品内容编辑模块的所有功能就完成了。
下一篇我们来完成整个商品内容的提交开发。

参考：黑马程序员（www.itheima.com）Vue项目实战教学视频

转载请注明出处：https://blog.csdn.net/acmman/article/details/125470397