Vue 富文本编辑器的使用

一、安装

npm install quill --save

二、注册

1.在.main.js中注册富文本编辑器

Vue.use(VueEditor)

三、使用

1.以下是写好的富文本编辑器，附带功能齐全，复制即用！！！（Quill官方中文文档）

2.新建一个Editor文件夹，文件夹下创建一个index.vue文件，将此复制到vue文件里

3.将Editor文件夹放入Vue项目的components组件包里方便其他页面直接引用富文本编辑器

<template><div ref="editor" class="editor" :style="styles" />
</template><script>
import Quill from 'quill'
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'export default {name: 'Editor',props: {/* 编辑器的内容 */value: {type: String,default: ''},/* 高度 */height: {type: Number,default: null},/* 最小高度 */minHeight: {type: Number,default: null}},data() {return {Quill: null,currentValue: '',options: {theme: 'snow',bounds: document.body,debug: 'warn',modules: {// 工具栏配置toolbar: [['bold', 'italic', 'underline', 'strike'], // 加粗 斜体 下划线 删除线['blockquote', 'code-block'], // 引用  代码块[{ list: 'ordered' }, { list: 'bullet' }], // 有序、无序列表[{ indent: '-1' }, { indent: '+1' }], // 缩进[{ size: ['small', false, 'large', 'huge'] }], // 字体大小[{ header: [1, 2, 3, 4, 5, 6, false] }], // 标题[{ color: [] }, { background: [] }], // 字体颜色、字体背景颜色[{ align: [] }], // 对齐方式['clean'], // 清除文本格式['link', 'image', 'video'] // 链接、图片、视频]},placeholder: '请输入内容',readOnly: false //只读模式 true}}},computed: {styles() {const style = {}if (this.minHeight) {style.minHeight = `${this.minHeight}px`}if (this.height) {style.height = `${this.height}px`}return style}},watch: {value: {handler(val) {if (val !== this.currentValue) {this.currentValue = val === null ? '' : valif (this.Quill) {this.Quill.pasteHTML(this.currentValue)}}},immediate: true}},mounted() {this.init()},beforeDestroy() {this.Quill = null},methods: {init() {const editor = this.$refs.editorthis.Quill = new Quill(editor, this.options)this.Quill.pasteHTML(this.currentValue)this.Quill.on('text-change', (delta, oldDelta, source) => {const html = this.$refs.editor.children[0].innerHTMLconst text = this.Quill.getText()const quill = this.Quillthis.currentValue = htmlthis.$emit('input', html)this.$emit('on-change', { html, text, quill })})this.Quill.on('text-change', (delta, oldDelta, source) => {this.$emit('on-text-change', delta, oldDelta, source)})this.Quill.on('selection-change', (range, oldRange, source) => {this.$emit('on-selection-change', range, oldRange, source)})this.Quill.on('editor-change', (eventName, ...args) => {this.$emit('on-editor-change', eventName, ...args)})}}
}
</script><style>
.editor, .ql-toolbar {white-space: pre-wrap!important;line-height: normal !important;
}
.quill-img {display: none;
}
.ql-snow .ql-tooltip[data-mode="link"]::before {content: "请输入链接地址:";
}
.ql-snow .ql-tooltip.ql-editing a.ql-action::after {border-right: 0;content: "保存";padding-right: 0;
}.ql-snow .ql-tooltip[data-mode="video"]::before {content: "请输入视频地址:";
}.ql-snow .ql-picker.ql-size .ql-picker-label::before,
.ql-snow .ql-picker.ql-size .ql-picker-item::before {content: "14px";
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="small"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="small"]::before {content: "10px";
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="large"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="large"]::before {content: "18px";
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="huge"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="huge"]::before {content: "32px";
}.ql-snow .ql-picker.ql-header .ql-picker-label::before,
.ql-snow .ql-picker.ql-header .ql-picker-item::before {content: "文本";
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="1"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="1"]::before {content: "标题1";
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="2"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="2"]::before {content: "标题2";
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="3"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="3"]::before {content: "标题3";
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="4"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="4"]::before {content: "标题4";
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="5"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="5"]::before {content: "标题5";
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="6"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="6"]::before {content: "标题6";
}.ql-snow .ql-picker.ql-font .ql-picker-label::before,
.ql-snow .ql-picker.ql-font .ql-picker-item::before {content: "标准字体";
}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="serif"]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="serif"]::before {content: "衬线字体";
}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="monospace"]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="monospace"]::before {content: "等宽字体";
}
</style>

4.页面中的使用

<el-row><el-col :span="24"><el-form-item label="发布内容" prop="content">
<!--富文本编辑器   此处必须设置富文本编辑器高度--><editor v-model="form.content" :min-height="192" /></el-form-item></el-col>
</el-row>

5.页面引入刚刚写好的富文本编辑器组件

import Editor from '@/public/components/Editor';//加载私有组件components: {Editor},

6.效果：

Vue 富文本编辑器的使用相关推荐

Vue 富文本编辑器插件 vue-quill-editor 坑！
Vue3 + vue-quill-editor 安装步骤: vue3 安装vue-quill-editor npm install @vueup/vue-quill vue2 安装vue-quill- ...
vue富文本编辑器 Vue-Quill-Editor
主流富文本编辑器对比前言:vue中很多项目都需要用到富文本编辑器,在使用了ueditor和tinymce后,发现并不理想.所以果断使用vue-quill-editor来实现. wangEditor( ...
Vue富文本编辑器vue-quill-editor-使用-bug问题-教程
vue-quill-editor npm install vue-quill-editor –save or yarn add vue-quill-editor 文件中使用 <template& ...
Element Tiptap Editor - 免费开源的 Vue 富文本编辑器，专门为搭配 Element UI 使用优化，使用很简单
一款很容易上手配置的富文本编辑器,和 Element plus 一起使用效果非常好,还能自定义功能. 关于 Element Tiptap Editor Element Tiptap Editor 是一 ...
Vue富文本编辑器代码高亮
之前在Vue-awesome上面找富文本编辑器的插件,找了排名第一的vue-quill-editor,排名第一应该是相对比较好用的. 首先下载到自己的项目中 npm install vue-quill ...
vue 富文本编辑器kindeditor使用粘贴图片自动上传图片功能
Kindeditor 的使用这里不再陈述,在KindEditor.create执行时,传入afterCreate方法,在afterCreate的方法里面进行图片上传的功能,这里使用的谷歌浏览器,其他浏 ...
特别好用的Vue富文本编辑器wangEditor自己使用案例组件，附源码，直接使用
前言:已组件化,引入即可使用,包含本地图片上传可拖拽大小.效果图如下:附源码 1.首先老规矩,引入下面两个包 npm i @wangeditor/editor --save npm i @wanged ...
vue富文本编辑器中样式冲突和不能修改的问题
在vue项目中,富文本回显通常采用的是v-html指令来渲染html字符串.但是在回显的过程中,发现了一些问题,以此记录下来. 1.富文本(tinyMec)在编辑的时候采用的是iframe隔离,这样的 ...
vue 富文本编辑器 quill （含代码高亮、自定义字体、汉化、鼠标悬浮提示、组件封装等）
基本使用安装依赖 npm i quill .vue文件 <div ref="editor" :style="finalStyle"></di ...
vue问题四：富文本编辑器上传图片
vue使用富文本编辑器上传图片: 我是用的是wangEditor 富文本编辑器 demo:http://www.wangeditor.com/ 1).安装依赖:npm install wangedit ...

Vue 富文本编辑器的使用

一、安装

二、注册

1.在.main.js中注册富文本编辑器

三、使用

1.以下是写好的富文本编辑器，附带功能齐全，复制即用！！！（Quill官方中文文档）

2.新建一个Editor文件夹，文件夹下创建一个index.vue文件，将此复制到vue文件里

3.将Editor文件夹放入Vue项目的components组件包里方便其他页面直接引用富文本编辑器

4.页面中的使用

5.页面引入刚刚写好的富文本编辑器组件

6.效果：

Vue 富文本编辑器的使用相关推荐

最新文章

热门文章