富文本编辑器vue-quill-editor的安装以及自定义字体和字号(最为重要的是解决获取不到编辑框中的内容)

已于 2023-07-09 14:14:16 修改
阅读量1.9k 收藏 3
点赞数
文章标签： vue.js 前端 javascript
于 2023-07-06 21:27:19 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43123560/article/details/131585509
版权

安装

第一步：安装


npm install @vueup/vue-quill@latest --save




第三步：在需要的页面中引入
<template>
<div>
 <QuillEditor  theme="snow" :options="editor.editorOption"  />
</div>
</template>


<script lang="ts" setup>
import {Quill} from "@vueup/vue-quill";
// 自定义字体大小
const Size = Quill.import('attributors/style/size')
Size.whitelist = [false, '12px', '14px', '16px', '18px', '20px', '32px']
Quill.register(Size, true)

// 自定义字体类型
const fonts = [false, 'SimSun', 'SimHei', 'Microsoft-YaHei', 'KaiTi', 'FangSong', 'Arial', 'Times-New-Roman', 'sans-serif',
    '宋体', '黑体'
]
// const Font = Quill.import('formats/font') 不可用
const Font = Quill.import('attributors/style/font')
Font.whitelist = fonts
Quill.register(Font, true)



const editor = ref({
    content: '',
    editorOption: {
        modules: {
            toolbar: [
                ['bold', 'italic', 'underline', 'strike'], // 加粗 斜体 下划线 删除线
                ['blockquote', 'code-block'], // 引用  代码块
                [{ list: 'ordered' }, { list: 'bullet' }], // 有序、无序列表
                [{ script: 'sub' }, { script: 'super' }], // 上标/下标
                [{ indent: '-1' }, { indent: '+1' }], // 缩进
                // [{ size: ['small', 'normal', 'large', 'huge'] }], // 字体大小
                [{ size: Size.whitelist }], // 字体大小
                [{ header: [1, 2, 3, 4, 5, 6, false] }], // 标题
                [{ color: [] }, { background: [] }], // 字体颜色、字体背景颜色
                [{ font: Font.whitelist }], // 字体种类
                [{ align: [] }], // 对齐方式
                ['clean'], // 清除文本格式
                // ['link', 'image', 'video'] // 链接、图片、视频
                ['link', 'image'] // 链接、图片、视频
            ]
        },
        placeholder: '请输入内容...'
    }
})
</script>
<style scoped lang='less'>
p {
    margin: 10px;
}
.edit_container,
.quill-editor {
    width: 1010px;
    height: 460px;
}

/deep/ .ql-snow .ql-picker {
    line-height: 24px;
}
/deep/ .ql-container {
    height: 400px;
    overflow: auto;
}
/deep/ .ql-snow .ql-picker.ql-size .ql-picker-label::before,
/deep/.ql-snow .ql-picker.ql-size .ql-picker-item::before {
    content: "字号";
}

/deep/.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="12px"]::before,
/deep/.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="12px"]::before {
    content: '12px';
}
/deep/.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="14px"]::before,
/deep/.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="14px"]::before {
    content: "14px";
}
/deep/ .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="16px"]::before,
/deep/ .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="16px"]::before {
    content: "16px";
}
/deep/ .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="18px"]::before,
/deep/ .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="18px"]::before {
    content: "18px";
}
/deep/ .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="20px"]::before,
/deep/ .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="20px"]::before {
    content: "20px";
}
/deep/ .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="32px"]::before,
/deep/ .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="32px"]::before {content: "32px";
}

/deep/ .ql-snow .ql-picker.ql-header .ql-picker-label::before,
/deep/.ql-snow .ql-picker.ql-header .ql-picker-item::before {
    content: "正文" !important;
}
/deep/ .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="1"]::before,
/deep/.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="1"]::before {
    content: "标题1" !important;
}
/deep/ .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="2"]::before,
/deep/.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="2"]::before {
    content: "标题2" !important;
}
/deep/ .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="3"]::before,
/deep/.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="3"]::before {
    content: "标题3" !important;
}
/deep/ .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="4"]::before,
/deep/ .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="4"]::before {
    content: "标题4" !important;
}
/deep/ .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="5"]::before,
/deep/.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="5"]::before {
    content: "标题5" !important;}
/deep/ .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="6"]::before,
/deep/ .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="6"]::before {
    content: "标题6" !important;
}
/deep/ .ql-snow .ql-picker.ql-font .ql-picker-label::before,
/deep/ .ql-snow .ql-picker.ql-font .ql-picker-item::before {
    content: "字体" !important;
}
/deep/.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="Arial"]::before,
/deep/.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="Arial"]::before {
    content: "Arial" !important;
}
/deep/.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="SimSun"]::before,
/deep/.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="SimSun"]::before {
    content: "SimSun" !important;
}
/deep/.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="SimHei"]::before,
/deep/.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="SimHei"]::before {
    content: "SimHei" !important;
}
/deep/.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="Microsoft-YaHei"]::before,
/deep/.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="Microsoft-YaHei"]::before {
    content: "微软雅黑" !important;
}
/deep/.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="Arial"]::before,
/deep/.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="Arial"]::before {
    content: "Arial" !important;
}
/deep/.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="Times-New-Roman"]::before,
/deep/.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="Times-New-Roman"]::before {
    content: "罗马" !important;
}
/deep/.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="KaiTi"]::before,
/deep/.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="KaiTi"]::before {
    content: "楷体" !important;
}
/deep/.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="sans-serif"]::before,
/deep/.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="sans-serif"]::before {
    content: "sans-serif" !important;
}
/deep/.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="宋体"]::before,
/deep/.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="宋体"]::before {
    content: "宋体" !important;
}
/deep/.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="黑体"]::before,
/deep/.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="黑体"]::before {
    content: "黑体" !important;
}
/deep/.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="FangSong"]::before,
/deep/.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="FangSong"]::before {
    content: "仿宋" !important;
}
</style>

第二步：在main.js或是main.ts中全局引入（具体全局引入还是单文件引入看自己项目）,在这里我是全局引入


import { QuillEditor } from '@vueup/vue-quill'
import '@vueup/vue-quill/dist/vue-quill.snow.css';

const app = createApp(App)
app.component('QuillEditor', QuillEditor)

第三步：在需要的页面中引入


<template>
	<div>
 		<QuillEditor  theme="snow" :options="editor.editorOption"  />
	</div>
</template>


<script lang="ts" setup>
import {Quill} from "@vueup/vue-quill";
// 自定义字体大小
const Size = Quill.import('attributors/style/size')
Size.whitelist = [false, '12px', '14px', '16px', '18px', '20px', '32px']
Quill.register(Size, true)

// 自定义字体类型
const fonts = [false, 'SimSun', 'SimHei', 'Microsoft-YaHei', 'KaiTi', 'FangSong', 'Arial', 'Times-New-Roman', 'sans-serif',
    '宋体', '黑体'
]
// const Font = Quill.import('formats/font') 不可用
const Font = Quill.import('attributors/style/font')
Font.whitelist = fonts
Quill.register(Font, true)



const editor = ref({
    content: '',
    editorOption: {
        modules: {
            toolbar: [
                ['bold', 'italic', 'underline', 'strike'], // 加粗 斜体 下划线 删除线
                ['blockquote', 'code-block'], // 引用  代码块
                [{ list: 'ordered' }, { list: 'bullet' }], // 有序、无序列表
                [{ script: 'sub' }, { script: 'super' }], // 上标/下标
                [{ indent: '-1' }, { indent: '+1' }], // 缩进
                // [{ size: ['small', 'normal', 'large', 'huge'] }], // 字体大小
                [{ size: Size.whitelist }], // 字体大小
                [{ header: [1, 2, 3, 4, 5, 6, false] }], // 标题
                [{ color: [] }, { background: [] }], // 字体颜色、字体背景颜色
                [{ font: Font.whitelist }], // 字体种类
                [{ align: [] }], // 对齐方式
                ['clean'], // 清除文本格式
                // ['link', 'image', 'video'] // 链接、图片、视频
                ['link', 'image'] // 链接、图片、视频
            ]
        },
        placeholder: '请输入内容...'
    }
})
</script>
<style scoped lang='less'>
p {
    margin: 10px;
}
.edit_container,
.quill-editor {
    width: 1010px;
    height: 460px;
}

/deep/ .ql-snow .ql-picker {
    line-height: 24px;
}
/deep/ .ql-container {
    height: 400px;
    overflow: auto;
}
/deep/ .ql-snow .ql-picker.ql-size .ql-picker-label::before,
/deep/.ql-snow .ql-picker.ql-size .ql-picker-item::before {
    content: "字号";
}

/deep/.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="12px"]::before,
/deep/.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="12px"]::before {
    content: '12px';
}
/deep/.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="14px"]::before,
/deep/.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="14px"]::before {
    content: "14px";
}
/deep/ .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="16px"]::before,
/deep/ .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="16px"]::before {
    content: "16px";
}
/deep/ .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="18px"]::before,
/deep/ .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="18px"]::before {
    content: "18px";
}
/deep/ .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="20px"]::before,
/deep/ .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="20px"]::before {
    content: "20px";
}
/deep/ .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="32px"]::before,
/deep/ .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="32px"]::before {content: "32px";
}

/deep/ .ql-snow .ql-picker.ql-header .ql-picker-label::before,
/deep/.ql-snow .ql-picker.ql-header .ql-picker-item::before {
    content: "正文" !important;
}
/deep/ .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="1"]::before,
/deep/.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="1"]::before {
    content: "标题1" !important;
}
/deep/ .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="2"]::before,
/deep/.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="2"]::before {
    content: "标题2" !important;
}
/deep/ .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="3"]::before,
/deep/.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="3"]::before {
    content: "标题3" !important;
}
/deep/ .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="4"]::before,
/deep/ .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="4"]::before {
    content: "标题4" !important;
}
/deep/ .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="5"]::before,
/deep/.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="5"]::before {
    content: "标题5" !important;}
/deep/ .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="6"]::before,
/deep/ .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="6"]::before {
    content: "标题6" !important;
}
/deep/ .ql-snow .ql-picker.ql-font .ql-picker-label::before,
/deep/ .ql-snow .ql-picker.ql-font .ql-picker-item::before {
    content: "字体" !important;
}
/deep/.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="Arial"]::before,
/deep/.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="Arial"]::before {
    content: "Arial" !important;
}
/deep/.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="SimSun"]::before,
/deep/.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="SimSun"]::before {
    content: "SimSun" !important;
}
/deep/.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="SimHei"]::before,
/deep/.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="SimHei"]::before {
    content: "SimHei" !important;
}
/deep/.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="Microsoft-YaHei"]::before,
/deep/.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="Microsoft-YaHei"]::before {
    content: "微软雅黑" !important;
}
/deep/.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="Arial"]::before,
/deep/.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="Arial"]::before {
    content: "Arial" !important;
}
/deep/.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="Times-New-Roman"]::before,
/deep/.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="Times-New-Roman"]::before {
    content: "罗马" !important;
}
/deep/.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="KaiTi"]::before,
/deep/.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="KaiTi"]::before {
    content: "楷体" !important;
}
/deep/.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="sans-serif"]::before,
/deep/.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="sans-serif"]::before {
    content: "sans-serif" !important;
}
/deep/.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="宋体"]::before,
/deep/.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="宋体"]::before {
    content: "宋体" !important;
}
/deep/.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="黑体"]::before,
/deep/.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="黑体"]::before {
    content: "黑体" !important;
}
/deep/.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="FangSong"]::before,
/deep/.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="FangSong"]::before {
    content: "仿宋" !important;
}
</style>

最后有些同学可能组件上面数据双向绑定了，但是获取不到数据，在这里我们可以通过以下方式获取

第一步：组件绑定ref
例如： <QuillEditor ref="quillRef" theme="snow" :options="editor.editorOption"  />
第二步：在script标签中声明 const quillRef = ref(null)
第三步：在你需要的内容的地方获取一下,具体看自己的项目，在这里我直接打印一下：
console.log(quillRef.value.getHTML())
亲测可用！！！！
herry-弟弟
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
quill-editor：Vue轻量级富文本编辑器-Vue-Quill-Editor
江咏之
09-15 1万+
先看效果图：画面太美哈哈哈 1、下载Vue-Quill-Editor npm install vue-quill-editor --save 2、下载quill（Vue-Quill-Editor需要依赖） npm install quill --save 3、代码 <template> <div class="edit_container"> <quill-editor v-model="content"
vue-quill-editor富文本编辑框---自定义字号和行高
string佳佳的博客
06-24 2992
一、效果图 二、自定义字号（采取修改源代码的方式，如有更好的方式欢迎评论区提出） 1、改变 quillOptions的配置项 [{ size: ['12px', '14px', false, '18px', '22px', '26px', '30px', '36px', '42px'] }] 2、到node_modules下面找到 quill, 对目录dist 下面的 css文件和 js文件进行修改。 quill.core.js // small,large,huge 这三个是默认的，可以删可
vue-editor设置字体font-family
最新发布
weixin_49203377的博客
06-11 274
vue-editor设置字体font-family
quill富文本编辑器 自定义字体和大小 以及提交和回显
qq_37278017的博客
10-16 3154
第一步：引入quill样式，我是下载到本地了 <!-- 主题样式 --> <link rel="stylesheet" href="${request.contextPath}/statics/css/quill.snow.css"> <link rel="stylesheet" href="${request.contextPath}/statics/css/quill.bubble.css"> <link rel="stylesheet" href="${re.
vue-quill-editor 富文本器，自定义属性字体、字号
DLM1031653077的博客
09-16 3366
解决vue-quill-editor自定义工具栏内容、包括字体、字号、等解决字体、字号重复问题
Vue 中安装使用vue-quill-editor富文本编辑器
yjxfox的专栏
05-13 3181
1、安装依赖 npm install vue-quill-editor --save 2、使用 （1）在“项目名\src\main.js”引入 import VueQuillEditor from 'vue-quill-editor' //一定要引入这三个css，不然文本编辑器会出现不规则黑白几何图形 //这三个css可以在main.js中引入，也可以在具体使用的.vue文件中引入 impo...
vue2、vue3之富文本编辑器quillEditor的一些问题（使用、字体字号不生效、内容保留样式和去掉样式）
a20001999的博客
05-26 3603
vue2之富文本编辑器quillEditor的一些问题（使用、字体字号不生效、内容保留样式和去掉样式）
文本，Vue-Quill-Editor 设置编辑器中文字的默认字体大小，自定义文字字号
weixin_54048131的博客
03-12 1909
Vue-Quill-Editor 设置编辑器中文字的默认字体大小_quill 初始 字体-CSDN博客 [{'size':fontSize}]toolbar工具栏 第三步：CSS样式文件加上这句话 这里借鉴了＊且听风吟的资料，感谢大佬的资料，以上就是置编辑器中文字的默认字体大小，自定义文字字号的方法 最后效果：
Vue 安装使用vue-quill-editor 文本编辑器
css兼容浏览器的各种背景渐变
09-08 1557
1、安装依赖 npm install vue-quill-editor --save 2、使用 （1）在“项目名\src\main.js”引入 import VueQuillEditor from ‘vue-quill-editor’ //一定要引入这三个css，不然文本编辑器会出现不规则黑白几何图形 //这三个css可以在main.js中引入，也可以在具体使用的.vue文件中引入 import ‘quill/dist/quill.core.css’ import ‘quill/dist/quill.sno
若依 vue Quill插件富文本框，文字大小设置，后台生效，手机端不生效问题
hexu_blog的博客
12-03 4480
原因，后台设置的样式，并没有加载到手机端而已，未设置情况下，查看Html class="large-xx-xx"设置后台之后： style="font-size:64px";如下是我们需要得到的文字大小和字体的效果:自定义字体、文字大小JS部分： 自定义字体、文字大小css部分 组件完整代码（含element上传组件功能）：
vue-quill-editor自定义字体大小和字体样式
weixin_53003063的博客
02-15 5633
vue-quill-editor自定义字体大小和字体样式
解决Vue的文本编辑器 vue-quill-editor 小图标样式排布错乱问题
11-19
Vue-Quill-Editor是一款基于Quill的 Vue.js 富文本编辑器组件，它提供了丰富的编辑功能，例如加粗、斜体、下划线、列表等。然而，在实际使用过程中，可能会遇到一些样式方面的问题，比如小图标排列不整齐或样式错乱...
vue3.0 vue-quill-editor.rar
09-19
Vue-Quill-Editor是一款基于Quill的 Vue.js 富文本编辑器组件，提供了丰富的文本格式化选项，如字体、字号、颜色、列表等，同时支持图片和视频的插入。在Vue3.0环境下使用Vue-Quill-Editor，需要确保组件与新版本的...
富文本编辑器组件（vue）.zip
03-29
富文本编辑器是一种在网页或应用程序中用于创建和编辑复杂文本内容的工具，它通常包含各种格式化选项，如字体、字号、颜色、对齐方式、插入图片、链接、列表等。Vue.js 是一个流行的前端JavaScript框架，用于构建...
一个nuxt版的 vue-quill-editor demo
12-20
Vue-Quill-Editor是一款基于Vue.js的富文本编辑器，它提供了丰富的编辑功能，如字体样式、字号、颜色、列表、图片上传等。Nuxt.js则是一个基于Vue.js的服务器端渲染框架，能够帮助开发者轻松构建SSR（Server-Side ...
富文本编辑器以及表格操作，可拉伸单元格宽度、增加行、增加列、合并单元格
04-21
富文本编辑器是一种常见的网页和应用中的文本输入组件，它允许用户在编辑环境中进行复杂的文本格式设置，如字体、字号、颜色、对齐方式等，同时支持插入图片、链接、表格等多种元素。在IT领域，富文本编辑器是构建...
Quill 富文本编辑器 自定义字体
笨笨的博客
04-26 676
由于官方自带的字体大小仅有SamllNormalLargeHuge这四种，所以导致在实际开发中往往不能满足我们的需求。所以本节实现字体可配置。
vue 富文本vue-quill-editor 自定义字号大小和字体样式
m0_46693606的博客
07-23 2641
一、先创建一个名为font的.css文件,然后引入自定义css // 字体样式大小 .ql-snow .ql-picker.ql-font .ql-picker-label[data-value="SimSun"]::before, .ql-snow .ql-picker.ql-font .ql-picker-item[data-value="SimSun"]::before { content: "宋体"; font-family: "SimSun"; } .ql-snow .ql-pic
vue-element安装富文本编辑器vue-quill-editor教程
于忠会的博客
12-20 642
在vue ui面板中安装vue-quill-editor依赖。在main.js导入富文本编辑器。将富文本编辑器注册为全局可用。
vue3富文本编辑器vue-quill-editor预览
07-27
你可以使用vue-quill-editor的预览功能来实现富文本编辑器的预览效果。首先，确保你已经安装了vue-quill-editor。 ```bash npm install vue-quill-editor ``` 然后，在你的Vue组件中引入并注册vue-quill-editor。 ```javascript 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, }, // ... } ``` 接下来，在模板中使用vue-quill-editor组件来创建富文本编辑器。 ```html <template> <div> <quill-editor v-model="content"></quill-editor> <div v-html="previewContent"></div> </div> </template> ``` 在data中定义一个变量`content`来存储编辑器的内容，并使用`v-model`指令将其与富文本编辑器绑定。然后，使用一个`div`元素来展示预览效果，使用`v-html`指令将`previewContent`渲染为HTML。 最后，在Vue组件的`computed`属性中定义一个计算属性`previewContent`来将编辑器内容转换为预览内容。 ```javascript export default { // ... computed: { previewContent() { return this.$refs.editor.quill.root.innerHTML; }, }, // ... } ``` 这样，当编辑器内容发生变化时，预览内容也会相应更新。 希望这能帮到你！

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

herry-弟弟

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值