vue-quill-editor

npm install vue-quill-editor –save
or
yarn add vue-quill-editor

文件中使用

<template><page-header-wrapper content="富文本编辑器转换成html,基于Vue-Quill-Editor,返回的数据需要转码再生成Html"><a-row :gutter="16"><a-col :span="12"><a-card :hoverable="true"><quill-editorv-model="editContent"ref="myQuillEditor":options="editorOption"@blur="onEditorBlur($event)"@focus="onEditorFocus($event)"@change="onEditorChange($event)"></quill-editor></a-card></a-col><a-col :span="12"><a-card :hoverable="true" title="富文本编辑器转换成html演示"><!-- 从数据库读取展示 --><div class="ql-container ql-snow"><div class="ql-editor">{{ conversion }}</div></div></a-card></a-col></a-row></page-header-wrapper>
</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 {editContent: '<h1><strong>Vue XmwPro</strong></h1>', // 编辑器内容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'], //上传图片、上传视频],},},conversion: '', // 演示内容}},methods: {onEditorReady(editor) {// 准备编辑器},onEditorBlur() {}, // 失去焦点事件onEditorFocus() {}, // 获得焦点事件// 内容改变事件onEditorChange() {this.conversion = this.escapeStringHTML(this.editContent)},// 转码escapeStringHTML(content) {content = content.replace(/&lt;/g, '<')content = content.replace(/&gt;/g, '>')return content},},computed: {editor() {return this.$refs.myQuillEditor.quill},},mounted() {this.$nextTick(() => {this.conversion = this.escapeStringHTML(this.editContent)})},
}
</script><style lang="less" scoped>
.quill-editor /deep/ .ql-container {min-height: 490px;
}
.ql-container {min-height: 500px;
}
</style>

小图标样式排布错乱在标签上添加类名

<quill-editor class="ql-editor"></quill-editor>

Vue富文本编辑器vue-quill-editor-使用-bug问题-教程相关推荐

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

Vue富文本编辑器vue-quill-editor-使用-bug问题-教程

vue-quill-editor

文件中使用

Vue富文本编辑器vue-quill-editor-使用-bug问题-教程相关推荐

最新文章

热门文章