前端学习（2732）：重读vue电商网站42之添加富文本编辑器

 

vue-quill-editor 官方文档传送门

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

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 themeVue.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 上。


最终实现效果如下：

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/414746.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

1、Flutter_初体验_创建第一个应用_AndroidStudio_windows

1、Flutter_初体验_创建第一个应用_AndroidStudio_windows

1.前言 至于 Flutter 是啥，我就不在这啰嗦了，下面以 windows 为例，展示一下从安装 Flutter 到运行 APP 整个过程； 2.安装 Flutter 2.1、中文介绍文档：https://flutterchina.club/get-started/install/ （我的…
阅读更多...
jquery.min.js一引入到工程中显示红叉，或其他.js文件显示红叉

jquery.min.js一引入到工程中显示红叉，或其他.js文件显示红叉

1.可能的原因： Eclipse或者MyEclipse校验失败的错误，不影响程序正常执行 2.解决方案： 选择项目，右键 Myeclipse--> ManaValidation--> ExcludeResource 将出现问题的js前的复选框选中。点击“应用” “确定”。如果以上…
阅读更多...
【JEECG技术文档】Online唯一校验使用说明

【JEECG技术文档】Online唯一校验使用说明

1、功能介绍 配置了唯一校验的字段，在录入和编辑页面中，动态查询用户输入值是否存在校验。 要使用online唯一校验功能必须先在online表单开发中配置唯一字段的校验方式为唯一校验。 2、配置唯一校验 登录系统，在线开发-online表单开发&#x…
阅读更多...
026_lsof命令经验总结

026_lsof命令经验总结

一、lsof处理删除文件未释放句柄问题. 但是如果你不知道是哪个文件，或者是很多文件都有这样的情况，那你需要使用如下命令 lsof |grep deleted 注:这个deleted表示该已经删除了的文件，但是文件句柄未释放,这个命令会把所有的未释放文件句柄…
阅读更多...
错误记录--更改tomcat端口号方法，Several ports (8005, 8080, 8009)

错误记录--更改tomcat端口号方法，Several ports (8005, 8080, 8009)

启动Tomcat服务器报错： Several ports (8005, 8080, 8009) required by Tomcat v5.5 Server at localhost are already in use. The server may already be running in another process, or a system process may be using the port. To start this server you wil…
阅读更多...
eclipse 安装 lombok插件

eclipse 安装 lombok插件

下载插件 官网下载 ：https://projectlombok.org/ 有些小伙伴官网可能打不开，现提供我的下载地址：https://files.cnblogs.com/files/niceyoo/lombok.zip 安装 lombok 插件 1、右键打开 2、选择 eclipse.exe > install 博客地址：…
阅读更多...
关于 spring MVC 配置自动扫描中 use-default-filters 属性

关于 spring MVC 配置自动扫描中 use-default-filters 属性

1、springMVC 设置扫描 Bean 的两种常见写法 1.1、先看第一种常见的配置&#xff1a;默认 <!-- 配置Controller扫描 --> <context:component-scan base-package"com.jeenotes.ssm" /> 1.2、第二种&#xff0c;自定义&#xff0c;只扫描 control <!-- …
阅读更多...
C语言的基本构成

C语言的基本构成

C语言的基本构成 知识点&#xff1a;C语言的注释&#xff1b;关键字&#xff1b;书写风格&#xff1b;常量和变量 重要程度&#xff1a;★★★★ 1、C语言的良好风格 用C语言编写的程序&#xff0c;称为C语言源程序&#xff0c;简称C程序。 本节将通过一个简单的C程序例子&…
阅读更多...
Android.View.InflateException: Binary XML File Line #异常的解决

Android.View.InflateException: Binary XML File Line #异常的解决

这个运行错误&#xff0c;主要出现在安卓系统5.0一下手机系统。在5.0以上手机系统&#xff0c;不会出现这个错误 错误如下&#xff1a;在引入自定义VIEW时报错 原因&#xff1a;资源文件shape_new_message.xml在drawable-v24文件夹下&#xff0c;而不在drawable文件夹下 解决…
阅读更多...
前端学习（2746）：uniapp--基本介绍

前端学习（2746）：uniapp--基本介绍

阅读更多...
shiro 角色与权限的解读

shiro 角色与权限的解读

1、为什么 shiro 有了《角色》后&#xff0c;还要设置《角色权限》呢&#xff1f;&#xff08;问题&#xff09; 思考&#xff1a;设置好角色了&#xff0c;那么就代表什么操作都可以执行了吗&#xff1f; 理解&#xff1a;如果上边回答是的话&#xff0c;那么只是《角色》层次…
阅读更多...
前端学习（2747）：uniapp环境搭建

前端学习（2747）：uniapp环境搭建

Hbu微信开发者工具
阅读更多...
Android添加Header请求参数实例，java响应header请求实现demo

Android添加Header请求参数实例，java响应header请求实现demo

1、首先添加AsyncHttpClient.jar包到libs文件夹下 2、初始化请求类以及响应回调类 private AsyncHttpClient client; private AsyncHttpResponseHandler asyncHttpResponseHandler; 3、网络权限 <!-- 网络链接 --> <uses-permission android:name"android.perm…
阅读更多...
代码整洁之道pdf

代码整洁之道pdf

下载地址&#xff1a;网盘下载内容简介 《代码整洁之道(英文版)》提出一种观念&#xff1a;代码质量与其整洁度成正比。干净的代码&#xff0c;既在质量上较为可靠&#xff0c;也为后期维护、升级奠定了良好基础。作为编程领域的佼佼者&#xff0c;《代码整洁之道(英文版)…
阅读更多...
苹果 ios 微信浏览器界面 ajax 提交带 file 的 form 总是走error方法

苹果 ios 微信浏览器界面 ajax 提交带 file 的 form 总是走error方法

1. 问题 问题出在微信端&#xff0c;而且是苹果机的微信端(苹果你咋这么矫情&#xff0c;安卓正常).&#xff1b;代码还是之前的代码&#xff0c;貌似是苹果升级系统后部分版本出现的 BUG&#xff0c;后来证明确实跟 ios 版本有关&#xff0c;网上也找过类似的解决措施&#xf…
阅读更多...
前端学习（2748）：uniapp创建项目和演示

前端学习（2748）：uniapp创建项目和演示

1创建项目 2运行项目 3配置在微信小程序注意 配置路径 4注意开启端口号
阅读更多...
HttpServletResponse.getWriter().print乱码，request.getHeader乱码，解决方法

HttpServletResponse.getWriter().print乱码，request.getHeader乱码，解决方法

1、添加响应类型即可 //这句话的意思&#xff0c;是让浏览器用utf8来解析返回的数据 response.setHeader("Content-type", "text/html;charsetUTF-8"); 添加前后&#xff1a; 如果是header参数乱码&#xff0c;解决方法如下&#xff1a; HTTP H…
阅读更多...
设计图与html 对比

设计图与html 对比

简易打开旧版火狐 网页版火狐添加组件 新版有时也会没有 谷歌是腾讯的转载于:https://www.cnblogs.com/byksj/p/8426291.html
阅读更多...
前端学习（2749）：uniapp项目目录结构介绍

前端学习（2749）：uniapp项目目录结构介绍

规范
阅读更多...
jsr-303 参数校验-学习（转）

jsr-303 参数校验-学习（转）

1、是什么&#xff1f; JSR303 是一套 JavaBean 参数校验的标准&#xff0c;它定义了很多常用的校验注解&#xff0c;比如&#xff1a;------------------------------------------------- NotNull(message"名字不能为空") private String userName; Max(value90,mes…
阅读更多...
最新文章

Copyright @ 2022~2023