第一步,下载依赖

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. LeetCode问题

    1.Two Sum """Given an array of integers, return indices of the two numbers such that ...

  2. html+css+js整体布局——[防止浏览器扩大,界面排版混乱]

    1,body——>width:100% body { background-color: rgb(238, 238, 238); color: rgb(51, 51, 51); display: ...

  3. shullfe机制详解

    一.shuffle机制概述 shuffle机制就是发生在MR程序中,Mapper之后,Reducer之前的一系列分区排序的操作.shuffle的作用是为了保证Reducer收到的数据都是按键排序的. ...

  4. 实时流式计算框架——JStorm

    1.本地调试 a.步骤:生成Topology——实现Spout接口——实现Bolt接口——编译运行 b.加入依赖 <!-- JStorm --> <dependency> &l ...

  5. B. Nirvana Codeforces Round #549 (Div. 2) (递归dfs)

    ---恢复内容开始--- Kurt reaches nirvana when he finds the product of all the digits of some positive integ ...

  6. python爬虫遇到https站点InsecureRequestWarning警告解决方案

    python爬虫遇到https站点InsecureRequestWarning警告解决方案 加三行代码即可 from requests.packages.urllib3.exceptions impo ...

  7. linux抓包工具tcpdump使用总结

    tcpdump采用命令行方式对接口的数据包进行筛选抓取,其丰富特性表现在灵活的表达式上 1.格式 # tcpdump --help tcpdump version 4.1-PRE-CVS_2012_0 ...

  8. webpack之带有可自动打开浏览器及热重载的基本配置

    什么是Webpack WebPack可以看做是模块打包机:它做的事情是,分析你的项目结构,找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言(Scss,TypeScript等),并 ...

  9. (90)Wangdao.com第二十三天_JavaScript CSS 操作

    CSS 操作 通过 JavaScript 操作 CSS HTML 元素的 style 属性 <div style="background-color:red; border:1px s ...

  10. react_app 项目开发_遇到的坑

    1. favicon.ico <link rel="shortcut icon" type="image/x-icon" href="./fav ...