第一步,下载依赖

cnpm install vue-quill-editor --save

第二步,再main.js里引入组件(我这里是全局注册)

// 富文本编辑器
import VueQuillEditor from 'vue-quill-editor'
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css' Vue.use(VueQuillEditor)

第三步,如果要上传图片到自己服务器的话如下

cnpm install vue-quill-editor-upload --save

接下来再组件中使用

//js布冯
import {quillRedefine} from 'vue-quill-editor-upload'
data(){
return{
editorOption: {
modules:{
toolbar:[
['image'],
[{ 'color': [] }, { 'background': [] }]
]
}
},
}
},
components: {quillRedefine},
computed: {
editor() {
return this.$refs.myQuillEditor.quill;
}
},
methods: {
onEditorReady(editor) { // 准备编辑器
},
onEditorBlur(){}, // 失去焦点事件
onEditorFocus(){}, // 获得焦点事件
onEditorChange(event){
console.log(event.html)
this.htmls = event.html
}, // 内容改变事件
},
created: function() {
let that = this;
that.upLoadUrl=upLoadUrl+'/?width=300';
that.editorOption = quillRedefine(
{
// 图片上传的设置
uploadConfig: {
action: that.upLoadUrl, // 必填参数 图片上传地址
// 必选参数 res是一个函数,函数接收的response为上传成功时服务器返回的数据
// 你必须把返回的数据中所包含的图片地址 return 回去
res: (respnse) => {
console.log(respnse)
var path = respnse.path//这里return你的图片地址即可
return path
},
name: 'img' // 图片上传参数名
},
toolOptions: [
[{'color': []}, {'background': []}],
[ 'image']
]
}
)
}

temple里的代码是

<quill-editor
v-model="dataInfo.description"
ref="myQuillEditor"
:options="editorOption"
@blur="onEditorBlur($event)"
@focus="onEditorFocus($event)"
@change="onEditorChange($event)">
</quill-editor>

这样就可以正常操作了,注:上方的 upLoadUrl 需要根据你们的上传地址修改

vue中使用vue-quill-editor及上传图片到自己服务器的更多相关文章

  1. Vue中通过Vue.extend动态创建实例

    Vue中通过Vue.extend动态创建实例 在Vue中,如果我们想要动态地来控制一个组件的显示和隐藏,比如通过点击按钮显示一个对话框或者弹出一条信息.我们通常会提前写好这个组件,然后通过v-if = ...

  2. Vue 中的Vue Router一级路由,二级路由,三级路由以及跳转

    今天编写了一下Vue中的路由 先用命令行新建一个空的项目,并且我知道要用路由,就下载了路由的相关依赖 vue init webpack demo5 完毕之后进入所在的项目 cd demo5 之后用vs ...

  3. vue中 裁剪,预览,上传图片 的插件

    参考地址: https://github.com/dai-siki/vue-image-crop-upload

  4. Vue中使用Vue.component定义两个全局组件,用单标签应用组件时,只显示一个组件的问题和 $emit的使用。

    解决方法: 定义了两个 Vue.component 在 el 中使用的时候要用 双标签, 用单表标签的时候,只会显示第个 组件间 这样写只显示 welcome-button 组件 <welcom ...

  5. vue中使用定时器时this指向问题

    在写一个很小的demo时,用的普通函数写法,没有用es6箭头函数,发现this变化了,后来查找到了问题所在: 箭头函数中的this指向是固定不变(定义函数时的指向),在vue中指向vue 普通函数中的 ...

  6. [Vue 牛刀小试]:第十二章 - 使用 Vue Router 实现 Vue 中的前端路由控制

    一.前言 前端路由是什么?如果你之前从事的是后端的工作,或者虽然有接触前端,但是并没有使用到单页面应用的话,这个概念对你来说还是会很陌生的.那么,为什么会在单页面应用中存在这么一个概念,以及,前端路由 ...

  7. 聊聊 Vue 中 provide/inject 的应用

    众所周知,在组件式开发中,最大的痛点就在于组件之间的通信.在 Vue 中,Vue 提供了各种各样的组件通信方式,从基础的 props/$emit 到用于兄弟组件通信的 EventBus,再到用于全局数 ...

  8. vue中使用定时器时this指向

    箭头函数中的this指向是固定不变(定义函数时的指向),在vue中指向vue; 普通函数中的this指向是变化的(使用函数时的指向),谁调用的指向谁.   箭头函数: let timerOne = s ...

  9. 在django中部署vue项目,不单独抽离dist文件

    1,在django项目下(app所在目录),新建vue项目,使用脚手架构建vue项目,vue create (项目名) 2,构建好以后,配置django: (1),配置settings: · 修改te ...

随机推荐

  1. MQTT服务器的搭建(Windows平台)

    人工智能.智能家居越来越火,在服务器和多个终端进行通信的过程中使用传统的请求/回答(Request/Response)模式已经过时,伴随而来的是发布/订阅(Publish/Subscribe)模式-- ...

  2. Linux 包管理

    1 文集 <Linux 包管理基础:apt.yum.dnf 和 pkg>,由Snapcrafter翻译,英文原创(作者Brennen)地址在这里. 这是一篇不错的概括性的文章,系统介绍了D ...

  3. HttpSession与JSESSIONID的"盗用"

    https://blog.csdn.net/qq1437715969/article/details/75331652

  4. spring-boot-maven-plugin 安装本地jar 包

    本地使用nexus 进行maven仓库管理.项目deploy 引入之后,总是找不到jar中定义的class或者配置文件等. 从截图上可以看到虽然class文件是有的,但是引用的时候却是找不到的. Sp ...

  5. pycharm的一些快捷键

    [转]pycharm的一些快捷键 忙了好一阵终于忙完了,最近在重构代码,有许多地方要注释什么的,在多行注释时总是很麻烦,就想着pycharm有没有快捷键,就像visual studio一样.于是上Go ...

  6. mongodb聚合命令

    聚合aggregate 聚合(aggregate)是基于数据处理的聚合管道,每个文档通过一个由多个阶段(stage)组成管道,可以对每个阶段的管道进行分组.过滤等功能,然后经过一系列的处理,输出相应的 ...

  7. 【ASP.NET】Validation 服务器控件

    Validation 服务器控件 Validation 服务器控件用于验证输入控件的数据.如果数据未通过验证,则向用户显示错误消息. 创建 Validation 服务器控件的语法是: <asp: ...

  8. Selenium 3----鼠标、键盘操作常用方法

    [鼠标] 在 WebDriver 中, 关于鼠标操作的方法封装在 ActionChains 类中. ActionChains 类提供了鼠标操作的常用方法: perform(): 执行所有 Action ...

  9. linux更换jdk版本

    参考:https://blog.csdn.net/meilin_ya/article/details/80650945 1.将两个版本的jdk放到linux环境2.设置选择使用alternatives ...

  10. 【转】tars源码漫谈第1篇------tc_loki.h (牛逼哄哄的loki库)

    loki库是C++模板大牛Andrei写的, 里面大量运用模板的特性, 而tc_loki.h借用了loki库的部分代码, 形成了一个基本的文件tc_loki.h, 来看看: #ifndef __TC_ ...