Vue 轻量级富文本编辑器 Vue-Quill-Editor

Vue 轻量级富文本编辑器 Vue-Quill-Editor

下载 Vue-Quill-Editor

npm install vue-quill-editor -S

下载 quill(Vue-Quill-Editor 需要依赖)

npm install quill -S

组件中使用

template

div class="edit_container"

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

/div

/template

script

import { quillEditor } from 'vue-quill-editor' //调用编辑器

import 'quill/dist/quill.core.css'

import 'quill/dist/quill.snow.css'

import 'quill/dist/quill.bubble.css'

export default {

components: {

quillEditor,

},

data() {

return {

content: `p/ppbr/pollistrongemOr drag/paste an image here./em/strong/lilistrongemrerew/em/strong/lilistrongemrtrete/em/strong/lilistrongemtytrytr/em/strong/lilistrongemuytu/em/strong/li/ol`,

editorOption: {},

}

},

methods: {

onEditorReady(editor) {

// 准备编辑器

},

onEditorBlur() {}, // 失去焦点事件

onEditorFocus() {}, // 获得焦点事件

onEditorChange() {}, // 内容改变事件

},

computed: {

editor() {

return this.$refs.myQuillEditor.quill

},

},

}

/script

自定义 toolbar 菜单

editorOption: {

placeholder: "请在这里输入",

modules:{

toolbar:[

['bold', 'italic', 'underline', 'strike'], //加粗，斜体，下划线，删除线

['blockquote', 'code-block'], //引用，代码块

[{ 'header': 1 }, { 'header': 2 }], // 标题，键值对的形式；1、2表示字体大小

[{ 'list': 'ordered'}, { 'list': 'bullet' }], //列表

[{ 'script': 'sub'}, { 'script': 'super' }], // 上下标

[{ 'indent': '-1'}, { 'indent': '+1' }], // 缩进

[{ 'direction': 'rtl' }], // 文本方向

[{ 'size': ['small', false, 'large', 'huge'] }], // 字体大小

[{ 'header': [1, 2, 3, 4, 5, 6, false] }], //几级标题

[{ 'color': [] }, { 'background': [] }], // 字体颜色，字体背景颜色

[{ 'font': [] }], //字体

[{ 'align': [] }], //对齐方式

['clean'], //清除字体样式

['image','video'] //上传图片、上传视频

]

}

}

Vue-Quill-Editor 官方文档：https://www.npmjs.com/package/vue-quill-editor

Vue 轻量级富文本编辑器 Vue-Quill-Editor 相关文章

springboot+vue发送axios请求引起的跨域问题

项目场景： 提示：axios发送get和post请求都提示： Access to script at ‘XXXX’ from origin ‘null’ has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.

Vue中 v-bind的使用

1、v-bind的基本使用 作用：动态的绑定元素的属性 div id="app" !-- 这里不可以使用 mustache 语法 v-bind 有一个语法糖==》 可以直接简写为 : -- img v-bind:src="data:imageUrl" alt="博客园背景" a v-bind:href="url" target="_blank"百度一下/a !--语法糖写法

Vue3.0新特性

Vue3.0新特性 Vue3.0 的设计目标可以概括为体积更

Vue学习笔记

库和框架的区别:- 库(如jQuery) 库是工具. 提供大量API，体现了封装的思想、需要自己调用这些API- 框架 框架提供了一套完整解决方案, 使用者要按照框架所规定的某种规范进行开发 vue的基本操作： 1. body中,设置Vue管理的视图div id="app"/div 2. 引入vue.js

VUE 3.0 初体验之路

码文不易啊，转载请带上本文链接呀，感谢感谢 https://www.cnblogs.com/echoyya/p/14394057.html 在2020年9月中旬，vue.js发布了3.0正式版，在不久的将来，VUE3.0 也终将成为大前端的必然趋势， 环境搭建 node 版本要求: Node.js8.9 或更高版本 ,输入 node -

vue-amap 定位实现

vue-amap 定位实现 官方文档：vue-amap 需求：当进入地图页面，定位到当前位置，显示点坐标，搜索框显示当前坐标的具体位置。点击地图，搜索框显示点击坐标的具体位置，搜索后地图中心点为搜索后的位置。 注册并登录高德控制台 创建应用申请 key，切记一定要

v-model双向绑定原理

//Vue.js文件 class Vue { constructor(el, data) { this.el = document.querySelector(el); // this._data = data; this.data = data; this.domPool = {} this.init(); } init() { this.initData(); this.initDom() } initDom() { this.bindDom(this.el) th

总结Vue父子组件的7种通信方式

前言：：： 父子组件要始终保持单向数据流动 否则随着业务增长，代码会变得难以维护与调试，因为数据变化的触发点很难找到 解决方案： 子组件通过this.$emit()事件通知父组件来做处理(sync关键字是帮助这种情况而实现的 语法糖) 最近工作不太顺利，也非常

Vue + Element UI 视频上传及上传进度展示

Vue + Element UI 视频上传及上传进度展示 div class="album albumvideo" div p class="type_title" span视频介绍/span /p div class="pic_img" div class="pic_img_box" el-upload class="avatar-uploader" action="上传地址" v-bind:data="{FoldPath:'上传

vue + element ui 完整流程项目配置有代码

做个vue + element ui 项目，效果图如下，单页面应用，侧边切换效果： mian.js配置： // 引入vue组件import Vue from 'vue'import App from './App.vue'import './registerServiceWorker'import router from './router'import store from './store'import Co