第一步,下载依赖

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. 洛谷P4482 [BJWC2018]Border 的四种求法 字符串,SAM,线段树合并,线段树,树链剖分,DSU on Tree

    原文链接https://www.cnblogs.com/zhouzhendong/p/LuoguP4482.html 题意 给定一个字符串 S,有 q 次询问,每次给定两个数 L,R ,求 S[L.. ...

  2. 同源策略jsonp和cors

    同源策略: 同源策略(Same origin policy)是一种约定,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,则浏览器的正常功能可能都会受到影响.可以说Web是构建在同源策略基础之上 ...

  3. docker环境中安装node、pm2,映射项目文件守护程序

    1.docker安装完成后,获取对应版本,可自定义node版本,默认为最新版本. git pull node:<version> 2.编写Dockerfile,在文件中添加安装pm2命令. ...

  4. idea使用配置

    一,打开窗口多行显示, Window→Editor Tabs→Tabs Placement→Show Tabs in Single Row 取消选中后即可在多行显示 2 .还可以自行设置打开文件窗口数 ...

  5. 条件结构if

    教程: 高能:语句结构都是由关键字开头,用冒号结束! 一:语句结构    if condition_1:    statement_block_1elif condition_2:    statem ...

  6. php 一行代码解决二维数组去重

    array_unique($array, SORT_REGULAR);

  7. disconf安装问题

    安装参考文档:https://blog.csdn.net/fengyao1995/article/details/66491226 主要说说遇到的几个问题 1.在步骤6构建的时候,用jdk1.8,进行 ...

  8. foreach next 操作数组指针移动问题

    2018年10月20日10:39:40 先说结论,foreach 维护的是一套属于自己的数组指针 会在操作数据的时候,分裂一套变量地址,即使你强制使用 & 取地址一样会分裂,不会引用同一套指针 ...

  9. Troubleshooting tips for using Java on Windows 8

    This article applies to: Platform(s): Windows 8 Will Java run in Start screen on Windows 8? Microsof ...

  10. 【Python基础】lpthw - Exercise 39 字典

    1. 字典和列表的区别 对于列表,它是一些项的有序排列,只能通过数值来进行索引:对于字典,则可以通过许多东西进行索引,它采用键-值映射的方式,不存在一个特定的顺序,因此不能用类似列表的数值索引,但它的 ...