Vue在Element UI下使用富文本框插件quill-editor（我个人不推荐用这个复杂的富文本插件）

cnpm install vue-quill-editor
cnpm install quill-image-drop-module
cnpm install quill-image-resize-module

执行上面的命令安装，然后在main.js下面加入

 //引入quill-editor编辑器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)//实现quill-editor编辑器拖拽上传图片import * as Quill from 'quill'import { ImageDrop } from 'quill-image-drop-module'Quill.register('modules/imageDrop', ImageDrop)//实现quill-editor编辑器调整图片尺寸import ImageResize from 'quill-image-resize-module'Quill.register('modules/imageResize', ImageResize)

在vue页面中使用quill-editor

<template><div class="quillEditor"><quill-editorv-model="quillEidtorValue"ref="quillEditor":options="editorOption"@blur="onEditorBlur($event)"@focus="onEditorFocus($event)"@change="onEditorChange($event)"></quill-editor><button @click="saveQuillEditorValue">保存</button></div>
</template>
<script>
export default {data() {return {quillEidtorValue: `<p>hello quillEditor!!</p>`, //默认富文本内容editorOption: {modules: { imageDrop: true }, //开启拖拽imageResize: {}, //图片大小可调theme: "snow" //默认主题}};},computed: {editor() {return this.$refs.quillEditor.quill;}},methods: {onEditorReady(editor) {}, // 准备编辑器onEditorBlur() {}, // 失去焦点事件onEditorFocus(val, editor) {// console.log(val); // 富文本获得焦点时的内容// editor.enable(false); // 在获取焦点的时候禁用}, // 获得焦点事件onEditorChange() {}, // 内容改变事件saveQuillEditorValue: function(event) {alert(this.quillEidtorValue);}}
};
</script>

Vue在Element UI下使用富文本框插件quill-editor（我个人不推荐用这个复杂的富文本插件）相关推荐

【Vue】 element ui 引入第三方图标
最近一个项目用到 vue 和 element ui开发前端.使用element ui自带的icon太少,所以引入第三方的.截止目前为止国内外网络上的相关教程我搜索到没超过5篇,而且都不详细,即使全部阅 ...
Vue安装element ui踩坑
在vue安装element ui 的过程中报了许多错误,慢慢踩坑,希望能帮到各位 1. 输入 vue add element 输入 y y zh-CN 如果报错 ERROR comman ...
关于vue.js element ui 表单验证 this.$refs[formName].validate()的问题
方法使用前需了解: 来自"和"小编的小提示: 首先打印一下this.$refs[formName],检查是否拿到了正确的需要验证的form. 其次在拿到了正确的form后,检查 ...
Node mysql mvc vue_net MVC +Vue.js+Element UI 笔记
最近项目需求,要在MVC里用Vue 与 Element UI,故而做个笔记来记录一些遇到的问题和处理思路 (方式比较麻瓜,如果不是临时用的话,建议还是学一下Vue-cli,新项目还是老老实实前后端分离 ...
Vue +vue-quill-editor+ Element UI使用富文本编辑器(后续更新上传视频、链接、表格....)
如果你们有问题,可以发评论提问,我看见一定回复!!!!! 文章目录一.基本使用 1.下载vue-quill-editor组件 2.引入· 富文本组件 3.工具栏相关配置 4.设置工具栏中文提示 5. ...
vue element ui下拉菜单和不是table列表全选功能问题解决方案
这半个月都在折腾vue的项目,虽然不是很复杂,但对于刚入门的小白来说,踩到的坑不少,常常因为一个小问题就得浪费好久问题,不过娃不在身边,晚上和周末可以继续研究,趁睡觉前,把今天遇到的问题给总结一下,做 ...
Vue实现Element UI的下拉框默认选中，值来自父组件或异步获取
子组件使用watch监听父组件传过来的值,并且赋值给子组件的data参数. 1.父组件传了一个userId属性给子组件 <Children@searchForm="searchForm ...
Vue+Element UI 下，如何给一个表单设置自定义规则或多个验证规则（：rules）
依旧是公司里那个Vue+Element UI的项目.今天遇到了一个新的问题:表单中某个选择器的值不同,控制着下面表单内容是否显示. 大概就是这个样子.由后台返回的"发放方式"的数值 ...
vue下拉框值改变事件_vue和element ui 下拉框select的change事件
1 在线编辑测试工具编辑好代码后点击 run 即可 2 vue原生写法 2.1 html部分新增空 {{ drug.name }} 刪除尚未新增任何資料總金額:{{ totalMoney } ...

Vue在Element UI下使用富文本框插件quill-editor（我个人不推荐用这个复杂的富文本插件）

Vue在Element UI下使用富文本框插件quill-editor（我个人不推荐用这个复杂的富文本插件）相关推荐

最新文章

热门文章