富文本vue-quill-editor修改图片上传方法

HTML 代码 HTML codes

<!-- 上传的组件 -->
<upload style="display:none" ref="articalImg" @getUrl="getImg" class="articalImg"></upload> <quill-editor v-model="dataForm.content"
ref="myQuillEditor"
class="editer"
:options="editorOption">
</quill-editor>

js代码

const toolbarOptions = [
["bold", "italic", "underline", "strike"], // toggled buttons
["blockquote", "code-block"], [{ header: 1 }, { header: 2 }], // custom button values
[{ list: "ordered" }, { list: "bullet" }],
[{ script: "sub" }, { script: "super" }], // superscript/subscript
[{ indent: "-1" }, { indent: "+1" }], // outdent/indent
[{ direction: "rtl" }], // text direction [{ size: ["small", false, "large", "huge"] }], // custom dropdown
[{ header: [1, 2, 3, 4, 5, 6, false] }],
[{ color: [] }],
[{ background: [] }],
// [{'color': []}, {'background': []}], // dropdown with defaults from theme
[{ font: [] }],
[{ align: [] }],
["link", "image", "video"],
["clean"] // remove formatting button
];
// 菜单栏中文标题
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-list": "列表",
"ql-align": "文本对齐",
"ql-direction": "文本方向",
"ql-code-block": "代码块",
"ql-formula": "公式",
"ql-image": "图片",
"ql-video": "视频",
"ql-clean": "清除字体样式",
"ql-upload": "文件"
}; export default {
data() {
return {
editorOption: {
modules: {
toolbar: {
container: toolbarOptions, // 工具栏
handlers: {
image: function(value) {
if (value) {
// this.$refs.articalImg.click()
document
.querySelector(".articalImg .el-upload__input")
.click();
} else {
this.quill.format("image", false);
}
}
}
}
}
}
};
},
computed: {
editor() {
return this.$refs.myQuillEditor.quill;
}
},
methods: {
onEditorReady(e) {
console.log("ready", e);
}, getImg(res) {
let quill = this.$refs.myQuillEditor.quill;
if (res) {
// 获取光标所在位置
let length = quill.getSelection().index;
// 插入图片,res为服务器返回的图片链接地址
quill.insertEmbed(length, "image", res);
// 调整光标到最后
quill.setSelection(length + 1);
} else {
// 提示信息,需引入Message
Message.error("图片插入失败");
}
}, }
};

富文本vue-quill-editor修改图片上传方法的更多相关文章

  1. vue项目富文本编辑器vue-quill-editor之自定义图片上传

    使用富文本编辑器的第一步肯定是先安装依赖 npm i vue-quill-editor 1.如果按照官网富文本编辑器中的图片上传是将图片转为base64格式的,如果需要上传图片到自己的服务器,需要修改 ...

  2. summernote(富文本编辑器)将附件与图片上传到自己的服务器(vue项目)

    1.上传图片至自己的服务器(这个官方都有例子,重点介绍附件上传)图片上传官方网址 // onChange callback $('#summernote').summernote({ callback ...

  3. wangEditor - 轻量级web富文本编辑器(可带图片上传)

    业务需求: 通过后台编辑文章和图片,上传到前端界面,展示新闻消息模块.这个时候,需要一款简洁的编辑器,百度编辑器是最常用的一种,但是功能太过于复杂,而wangEditor - 轻量级web富文本编辑器 ...

  4. ckeditor富文本编辑器的使用和图片上传,复制粘贴图片上传

    自动导入Word图片,或者粘贴Word内容时自动上传所有的图片,并且最终保留Word样式,这应该是Web编辑器里面最基本的一个需求功能了.一般情况下我们将Word内容粘贴到Web编辑器(富文本编辑器) ...

  5. 百度开源富文本编辑器 UEditor配置:图片上传和文件上传独立使用方法

    使用UEditor编辑器自带的插件实现图片上传和文件上传功能,这里通过配置UEditor单独使用其内置的第三方插件swfupload来实现图片和文件的上传,通过对UEditor配置轻松实现图片批量上传 ...

  6. 关于富文本复制word,里面掺杂图片上传的问题

    图片的复制无非有两种方法,一种是图片直接上传到服务器,另外一种转换成二进制流的base64码目前限chrome浏览器使用首先以um-editor的二进制流保存为例:打开umeditor.js,找到UM ...

  7. PHP ckeditor富文本编辑器 结合ckfinder实现图片上传功能

    一:前端页面代码 <script src="/www/res/ckeditor/ckeditor.js"></script> <textarea id ...

  8. kindeditor修改图片上传路径-使用webapi上传图片到图片服务器

    kindeditor是一个非常好用的富文本编辑器,它的简单使用我就不再介绍了. 在这里我着重介绍一些使用kindeditor修改图片上传路径并通过webapi上传图片到图片服务器的方案. 因为我使用的 ...

  9. kindeditor扩展粘贴图片功能&修改图片上传路径并通过webapi上传图片到图片服务器

    前言 kindeditor是一个非常好用的富文本编辑器,它的简单使用我就不再介绍了. 而kindeditor却对图片的处理不够理想. 本篇博文需要解决的问题有两个: kindeditor扩展粘贴图片功 ...

随机推荐

  1. 细数Intellij Idea10个蛋疼问题!

    Intellij Idea以下简称IJ. 昨天细数了IJ上的10大666的姿势,IJ确实很智能,在很多方便可以完爆Eclipes,可在某些方面真的被Eclipse秒杀 1.乱码 在Eclipse中很少 ...

  2. jpa现有接口方法说明 (转https://www.cnblogs.com/rulian/p/6557471.html)

    一.接口方法整理速查 下表针对于简单查询,即JpaRepository接口(继承了CrudRepository接口.PagingAndSortingRepository接口)中的可访问方法进行整理.( ...

  3. LightOJ 1341 - Aladdin and the Flying Carpet

    题目链接:http://lightoj.com/volume_showproblem.php?problem=1341 题意:给你地毯面积和最小可能边的长度,让你求有几种组合的可能. 题解:这题就厉害 ...

  4. PostgreSQL 主键自动增长

    建立主键并设置自动增加的办法好好几种,这里记录我测试过的: drop table pro_process; CREATE TABLE "public"."pro_proc ...

  5. opencv remap 函数

    remap 查看:https://blog.csdn.net/yangfengman/article/details/52769716 remap 其实就是一个坐标到另一个坐标的映射,比如经常用在鱼眼 ...

  6. poj2954Triangle

    传送门 Pick定理 定点坐标为整点的三角形,面积为S,边上的整点个数为L,三角形内部整点个数为N S=N+L/2-1 //Achen #include<algorithm> #inclu ...

  7. 国内外自然语言处理(NLP)研究组

     国内外自然语言处理(NLP)研究组 *博客地址 http://blog.csdn.net/wangxinginnlp/article/details/44890553 *排名不分先后.收集不全,欢迎 ...

  8. day 83 Vue学习四之过滤器、钩子函数、路由、全家桶等

    Vue学习四之过滤器.钩子函数.路由.全家桶等   本节目录 一 vue过滤器 二 生命周期的钩子函数 三 vue的全家桶 四 xxx 五 xxx 六 xxx 七 xxx 八 xxx 一 Vue的过滤 ...

  9. Windows与Linux获取进程集合的方法

    Windows: List<String> tasklist=new ArrayList<String>(); try { Process process = Runtime. ...

  10. JQ实现全选、全不选

    代码: <table class="table myTable table-hover"> <thead> <tr> <th> &l ...