vue-quill-editor + iview 实现富文本编辑器及图片上传
1、npm 安装 vue-quill-editor
npm install vue-quill-editor
2、再main.js中引入
import VueQuillEditor from 'vue-quill-editor'
// require styles 引入样式
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css' Vue.use(VueQuillEditor)
3、创建子组件UE.vue
<template>
<div>
<Upload
:show-upload-list="false"
class="editor_upload"
:format="['jpg','jpeg','png']"
:max-size="2048"
multiple
:before-upload="handleUpload"
action="//jsonplaceholder.typicode.com/posts/"
>
<Button icon="ios-cloud-upload-outline" ></Button>
</Upload>
<quill-editor
v-model="msg"
:options="editorOption"
ref="QuillEditor">
</quill-editor>
</div>
</template>
<script>
import {PostBase64Upload} from '../../../services/pages/market'
//工具
const toolbarOptions = [
['bold', 'italic', 'underline', 'strike','blockquote', 'code-block',{'indent': '-1'}, {'indent': '+1'},{'color': []}, {'background': []},{'align': []},'image','clean'], // toggled buttonssuperscript/subscript
];
//工具名称
const titleConfig = {
'ql-bold':'加粗',
'ql-color':'颜色',
'ql-font':'字体',
'ql-code':'插入代码',
'ql-italic':'斜体',
'ql-link':'添加链接',
'ql-background':'背景颜色',
'ql-size':'字体大小',
'ql-strike':'删除线',
'ql-script':'上标/下标',
'ql-underline':'下划线',
'ql-blockquote':'引用',
'ql-header':'标题',
'ql-indent':'缩进',
'ql-align':'文本对齐',
'ql-direction':'文本方向',
'ql-code-block':'代码块',
'ql-image':'图片',
'ql-video':'视频',
'ql-clean':'清除字体样式',
};
export default {
name: 'UE',
data () {
return {
IMAGE_URL: global.IMG_URL,
QuillEditor: null,
editorOption: {
modules: {
toolbar: {
container: toolbarOptions, // 工具栏
handlers: {
'image': function (value) {
if (value) {
document.querySelector('.ivu-upload .ivu-btn').click()
} else {
this.quill.format('image', false);
}
}
}
}
}
},
file_url: '',
importFile: '',
msg: ''
}
},
props: ["defaultMsg",],
mounted() {
this.msg = this.defaultMsg;
this.addQuillTitle()
},
methods: {
// 提交文件并阻断自动上传
handleUpload(file) {
let that = this;
let time = setTimeout(function () {
that.upload(file);
clearTimeout(time);
}, 0);
return false
},
//上传图片
upload(file) {
let index = file.name.lastIndexOf("\.");
let file_url = file.name.substring(index + 1, file.name.length);
if (file_url == 'jpg' || file_url == 'jpeg' || file_url == 'png' ) {
let that = this;
let reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = function (e) {
PostBase64Upload({
base64_content: e.target.result,
module_name: 'topic'
})
.then(data => {
that.file_url = data.file_url;
that.handleSuccess(that.file_url)
})
.catch(err => {
that.$Message.error(err);
});
return false;
};
} else {
this.$Message.error("请上传'jpg','jpeg', png'格式的图片");
return false;
}
}, //图片加入到富文本框中
handleSuccess (res) {
let quill = this.$refs.QuillEditor.quill;
let length = quill.getSelection().index;
quill.insertEmbed(length, 'image', res)
quill.setSelection(length + 1);
this.msg = this.getImgSrc(this.msg);
},
//加入路径的IP
getImgSrc(content) {
// 正则替换img的路径
let that = this;
content.replace(/<img [^>]*src=['"]([^'"]+)[^>]*>/gi, function (match, capture) {
content = content.replace(new RegExp(capture, 'g'), that.IMAGE_URL + capture);//这里也可以替换成需要的路径
});
content = content.replace(/<img/g, '<img style="width: 100%;"');
return content;
}, //富文本工具添加名称
addQuillTitle () {
const oToolBar = document.querySelector('.ql-toolbar'),
aButton = oToolBar.querySelectorAll('button'),
aSelect = oToolBar.querySelectorAll('select');
aButton.forEach(function(item){
if(item.className === 'ql-script'){
item.value === 'sub' ? item.title = '下标': item.title = '上标';
}else if(item.className === 'ql-indent'){
item.value === '+1' ? item.title ='向右缩进': item.title ='向左缩进';
}else{
item.title = titleConfig[item.classList[0]];
}
});
aSelect.forEach(function(item){
item.parentNode.title = titleConfig[item.classList[0]];
});
},
},
}
</script>
<style>
.editor_upload {
display: none;
}
</style>
4、引入该组件页面
<UE :defaultMsg=defaultMsg ref="ue"></UE> <script>
import UE from "./UE"
//因子组件不能修改父组件的参数,所以父组件提交时,直接调取子组件的参数
this.$refs.ue.msg
</script>
上述的工具栏是根据我司的要求来选择的,如果你想需求的更多,我也是查看别的大神的,你也可以看看https://blog.csdn.net/div_ma/article/details/79536634,
vue-quill-editor + iview 实现富文本编辑器及图片上传的更多相关文章
- uedit富文本编辑器及图片上传控件
微力后台 uedit富文本编辑器及文件上传控件的使用,无时间整理,暂略,参考本地代码.能跑起来.
- 关于移动手机端富文本编辑器qeditor图片上传改造
日前项目需要在移动端增加富文本编辑,上网找了下,大多数都是针对pc版的,不太兼容手机,当然由于手机屏幕小等原因也限制富文本编辑器的众多强大功能,所以要找的编辑器功能必须是精简的. 找了好久,发现qed ...
- 改造百度UMeditor(UEditor-min)富文本编辑器的图片上传功能
最近项目需要新增一个发布文章的模块,用的是百度的Ueditor富文本编辑器. 公司用的是阿里云的图片服务器,需要直接把文章中图片上传到服务器上,但是这个编辑器的上传图片是直接上传到Tomcat的根目录 ...
- 在Asp.Net Core中配置使用MarkDown富文本编辑器实现图片上传和截图上传(开源代码.net core3.0)
我们的富文本编辑器不能没有图片上传尤其是截图上传,下面我来教大家怎么实现MarkDown富文本编辑器截图上传和图片上传. 1.配置编辑器到html页 <div id="test-edi ...
- wysiwyg 富文本编辑器(附带图片上传功能)
Fist: 需要的文件 font 文件夹下面的也是需要的哟 Then: 引入文件 <link href="bootstrap/css/bootstrap.css" rel=& ...
- Asp.Net Core中配置使用Kindeditor富文本编辑器实现图片上传和截图上传及文件管理和上传(开源代码.net core3.0)
KindEditor使用JavaScript编写,可以无缝的于Java..NET.PHP.ASP等程序接合. KindEditor非常适合在CMS.商城.论坛.博客.Wiki.电子邮件等互联网应用上使 ...
- UEditor富文本编辑器的图片上传 http://fex.baidu.com/ueditor/#server-deploy
http://fex.baidu.com/ueditor/#server-deploy http://fex.baidu.com/ueditor/#server-path 首先 editor配置文件中 ...
- 富文本vue-quill-editor修改图片上传方法
富文本vue-quill-editor修改图片上传方法 HTML 代码 HTML codes <!-- 上传的组件 --> <upload style="display:n ...
- 富文本编辑器handyeditor,上传和预览图片的host地址不一样
使用富文本编辑器(官网)时,大多时候都会用到图片上传,但是下载的富文本编辑器的默认配置是只有一个上传地址的host的. var he = HE.getEditor('editor', { autoHe ...
随机推荐
- IDEA 多模块工程相互依赖
最近为了结构项目,抽离通用模块,同时使用一个工程管理所有模块,使用了多模块工程.不过在依赖其他模块的编译上出现了问题,总是报找不到被依赖的jar包. 最后的解决办法也很简单,对于被依赖的模块,要在ma ...
- Uncaught TypeError: TableInit is not a constructor
我最近在做东西的时候,用到了Bootstrap的表格,我复制了一份代码使用,结果运行报错 Uncaught TypeError: TableInit is not a constructor 我点进去 ...
- 【ARTS】01_43_左耳听风-201900902~201900908
ARTS: Algrothm: leetcode算法题目 Review: 阅读并且点评一篇英文技术文章 Tip/Techni: 学习一个技术技巧 Share: 分享一篇有观点和思考的技术文章 Algo ...
- 14、OpenCV实现图像的空间滤波——图像锐化及边缘检测
1.图像锐化理论基础 1.锐化的概念 图像锐化的目的是使模糊的图像变得清晰起来,主要用于增强图像的灰度跳变部分,这一点与图像平滑对灰度跳变的抑制正好相反.而且从算子可以看出来,平滑是基于对图像领域的加 ...
- Echart timeline 高级用法!!!!
一.前言 在使用 echart timeline 来着图形可视化时,我使用的和官网也不一样,因为我有使用映射关系.比如我将 no 映射到X轴,将 d4 映射到Y轴. 二.参考 echart官网:htt ...
- windows修改系统登录密码后,出现SQLserver服务无法启动,启动报错17051
windows修改系统登录密码后,出现SQLserver服务无法启动,启动报错17051具体报错如下: 根据错误提示,去到windows的事件查看器.在win10上,右击左下角的菜单图标:然后依次点击 ...
- [转帖]Hadoop与Spark比较
Hadoop与Spark比较 https://www.cnblogs.com/charlesblc/p/6206198.html 感觉自己落下好多东西没有学习 先看这篇文章:http://www.hu ...
- 克隆centos虚拟机导致eth0网卡不可用
打开 vim /etc/udev/rules.d/70-persistent-net.rules可以看到eth0 eth1两个. 1.删除 NAME="eth0",即 # PCI ...
- python装饰器无参及有参案例
装饰器无参和有参案例:
- [BZOJ3681]Arietta(可持久化线段树合并优化建图+网络流)
暴力建图显然就是S->i连1,i->j'连inf(i为第j个力度能弹出的音符),j'->T连T[j]. 由于是“某棵子树中权值在某区间内的所有点”都向某个力度连边,于是线段树优化建图 ...