重读vue电商网站42之添加富文本编辑器

简介: 重读vue电商网站42之添加富文本编辑器

通过 vue-ui 界面,可以安装我们所需要的依赖,或者使用下文 npm 或 yarn安装。

图片.png

NPM


Js

npm install vue-quill-editor --save
 # or
 yarn add vue-quill-editor
 Mount with global

Js

import Vue from 'vue'
 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, /* { default global options } */)
 打开 main.js 入口文件,进行全局导入和注册:

Js

// 导入富文本编辑器
 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/* { default global options } */)
 使用

通过 quill-editor 标签,然后通过 v-model 双向绑定到 form表单的商品详情描述变量 goods_introduce 上。

图片.png

最终实现效果如下:

图片.png


相关文章
|
4月前
|
存储 JavaScript 前端开发
Vue中通过集成Quill富文本编辑器实现公告的发布。Vue项目中vue-quill-editor的安装与使用【实战开发应用】
文章展示了在Vue项目中通过集成Quill富文本编辑器实现公告功能的完整开发过程,包括前端的公告发布、修改、删除操作以及后端的数据存储和处理逻辑。
Vue中通过集成Quill富文本编辑器实现公告的发布。Vue项目中vue-quill-editor的安装与使用【实战开发应用】
|
4月前
|
JavaScript
在Vue项目中vue-quill-editor的安装与使用【详细图解+过程+包含图片的缩放拖拽】
文章详细介绍了在Vue项目中安装和使用`vue-quill-editor`的步骤,包括如何通过npm安装、局部挂载、在Vue页面中引入和配置使用。同时,还提供了如何实现图片的缩放和拖拽功能的进阶教程,涉及到安装额外的插件`quill-image-drop-module`和`quill-image-resize-module`,以及对Webpack配置的调整。最后,文章还提供了实际效果展示和一些后续可能的拓展功能,如上传视频和将图片上传到服务器等。
在Vue项目中vue-quill-editor的安装与使用【详细图解+过程+包含图片的缩放拖拽】
|
5月前
|
JavaScript
【vue】 vue2 中使用 Tinymce 富文本编辑器
【vue】 vue2 中使用 Tinymce 富文本编辑器
633 6
|
5月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的在线音乐网站附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的在线音乐网站附带文章源码部署视频讲解等
70 2
|
5月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的传统文化网站附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的传统文化网站附带文章源码部署视频讲解等
38 1
|
5月前
|
JavaScript
【vue】 Tinymce 富文本编辑器 不想让上传的图片转换成base64,而是链接
【vue】 Tinymce 富文本编辑器 不想让上传的图片转换成base64,而是链接
341 0
|
5月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的学习网站系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的学习网站系统附带文章源码部署视频讲解等
42 0
|
5月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的自助甜品网站附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的自助甜品网站附带文章源码部署视频讲解等
32 0
|
5月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的浙江艾艺塑业设计公司网站附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的浙江艾艺塑业设计公司网站附带文章源码部署视频讲解等
25 0
|
5月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的国风彩妆网站附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的国风彩妆网站附带文章源码部署视频讲解等
26 0
下一篇
DataWorks