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="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