介绍为什么要使用vue npm install vue-quill-editor ——保存 npm install quill ——保存 import {, quillEditor },得到“vue-quill-editor",,//调用编辑器
import & # 39;羽毛/dist/quill.core.css& # 39;;
import & # 39;羽毛/dist/quill.snow.css& # 39;;
import & # 39;羽毛/dist/quill.bubble.css& # 39;; & lt; template>
,& lt; div>
& lt;才能el-upload ,,,,,//直接隐藏掉就好了,用功能不用样式
,,v-show=癴alse"
,,id=皅uill-upload"
,,action=?api/产品/upload.do"
,,name=皍pload_file"
,,多个
,,:限制=?”;
,,列表类型=皃icture"
,,:show-file-list=癴alse"
,,:before-upload=癰eforeUpload"
,,:中的=皍ploadError"
,,:成功=癶andleExceed"比;
,,& lt; el-button 大?皊mall",类型=皃rimary",祝辞& lt;/el-button>
,,& lt; div 槽=皌ip",类=癳l-upload__tip"祝辞只能上传jpg和png文件,且不超过500 kb
& lt;才能/el-upload>
& lt;才能el-row v-loading=皍illUpdateImg"比;
& lt; quillEditor。才能
,,,ref=癿yQuillEditor"
,,,@change=皁nEditorChange(事件),
,,,v模型=皏alue"
,,,:选项=癳ditorOption"/比;
& lt;才能/el-row>
,& lt;/div>
& lt;/template>
& lt; script>
{},quillEditor import 得到& # 39;vue-quill-editor& # 39;
import & # 39;羽毛/dist/quill.core.css& # 39;
import & # 39;羽毛/dist/quill.snow.css& # 39;
import & # 39;羽毛/dist/quill.bubble.css& # 39;
export default {
,名字:“richText",
,部分:{quillEditor},
,道具:[& # 39;内容# 39;),,,,,,,,,,,,,,,,//父组件传过来的,将传过来的渲染到富文本编辑器
,数据(){
返回{才能
,,uillUpdateImg:假的,,,,,,,,,,,,,//根据图片上传状态来确定是否显示加载动画
,,serverUrl: & # 39; & # 39;,,//上传的图片服务器地址
,,,的值:this.content,,,,,,,,,,,,,,//富文本内容
,,,editorOption:{,,,,,,,,,,,,,,//符文本编辑器的配置
,,,占位符:,& # 39;& # 39;
,,,主题:,& # 39;雪# 39;
,,,模块:,{
,,,,工具栏:,{
,,,,,容器:,,,,,,,,,,,,,//,工具栏配置,,默认是全部
,,,,,,(& # 39;大胆# 39;),
,,,,,,(& # 39;斜体# 39;),
,,,,,,(& # 39;强调# 39;),
,,,,,,(& # 39;罢工# 39;),
,,,,,,({& # 39;列表# 39;:& # 39;命令# 39;},{& # 39;列表# 39;:,& # 39;子弹# 39;,}),
,,,,,,(& # 39;blockquote # 39;],,(& # 39;代码# 39;),
,,,,,,(& # 39;链接# 39;),
,,,,,,(& # 39;图像# 39;),
,,,,,,({& # 39;列表# 39;:,& # 39;命令# 39;},,{& # 39;列表# 39;:,& # 39;子弹# 39;}),
,,,,,,
,,,,,处理程序:,{
,,,,,,& # 39;图像# 39;:,function (值),{
,,,,,,,if (值),{
,,,,,,,,//,给个点击触发Element-ui,输入框选择图片文件
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null小编给大家分享一下vue中使用vue-quill-editor富文本的示例分析,希望大家阅读完这篇文章之后都有所收获、下面让我们一起去探讨吧!
vue是一款友好的,多用途且高性能的JavaScript框架,使用vue可以创建可维护性和可测试性更强的代码库,vue允许可以将一个网页分割成可复用的组件,每个组件都包含属于自己的HTML, CSS, JavaScript,以用来渲染网页中相应的地方,所以越来越多的前端开发者使用vue。
vue-quill-editor是我们再使用vue框架的时候常用的一个富文本编辑器,在进行富文本编辑的时候,我们往往要插入一些图片,vue-quill-editor默认的处理方式是直接将图片转成base64编码,这样的结果是整个富文本的HTML片段十分冗余,通常来讲,每个服务器端接收的帖子的数据大小都是有限制的,这样的话有可能导致提交失败,或者是用户体验很差,数据要传递很久才全部传送到服务器。
<强> 1。下载Vue-Quill-Editor
<强> 2。下载套筒(Vue-Quill-Editor需要依赖)
<强> 3。使用
本次使用到了富文本的封装和上传图片,因要求使用element-ui框架,我上传图片的时候选择了element-ui的上传上传组件将图片上传到服务器。再将图片链接插入到富文本中,以达到最优的体验。
子组件中将改变的值,直接发送给父组件,父组件来完成逻辑处理
