当前位置：首页 > news >正文

vue-quill-editor富文本编辑器

news 2025/7/1 17:56:35

vue-quill-editor

npm install vue-quill-editor --save

新建vue-quill-editor.vue文件，在需要的地方引入

<!-- vue-quill-editor 富文本 -->
<template><div class="quill-editor-page"><quill-editor class="ql-editor" v-model="content" ref="myQuillEditor" :options="editorOption"@blur="onEditorBlur($event)" @focus="onEditorFocus($event)" @change="onEditorChange($event)"></quill-editor><div class="upload-box" style="display: none"><el-upload ref="uploadRef" class="upload-append" action="" :auto-upload="true" :limit="1":show-file-list="false" :on-exceed="handleExceed":http-request="uploadFile"accept=""><el-button type="primary" class="url-css">上传</el-button></el-upload></div></div>
</template><script>
import $api from '@/api/index'
import { quillEditor } from 'vue-quill-editor'
import Quill from 'quill'import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'const Font = Quill.import('formats/font')
Font.whitelist = ['SimSun', 'SimHei', 'Microsoft-YaHei', 'KaiTi', 'FangSong'
]
Quill.register(Font, true)export default {components: {quillEditor},data() {var _this = this;const Size = Quill.import('attributors/style/size')Size.whitelist = ['12px', '14px', '16px', '18px', '20px', '24px', '30px']Quill.register(Size, true)const toolbarOptions = [['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' }], // 文本方向['image'], // 链接、图片、视频[{ size: ['12px', false, '16px', '18px', '20px', '30px'] }], // 字体大小// [{ header: [1, 2, 3, 4, 5, 6, false] }], // 标题[{ color: [] }, { background: [] }], // 字体颜色、字体背景颜色[{ align: [] }], // 对齐方式// ['clean'], // 清除文本格式[{ font: ['Microsoft-YaHei','SimHei','SimSun', 'KaiTi', 'FangSong'] }], // 字体种类]return {content: '', //双向数据绑定数据// 富文本编辑器配置editorOption: {modules: {toolbar: {container: toolbarOptions, // 工具栏选项handlers: {'image': function (value) {if (value) {// upload点击上传事件_this.$refs.uploadRef.$el.querySelector('input').click();// document.querySelector('.avatar-uploader input').click()} else {Quill.format('image', false)}}},},},placeholder: '请输入正文'}}},methods: {// 失去焦点事件onEditorBlur(quill) {console.log('editor blur!', quill)},// 获得焦点事件onEditorFocus(quill) {console.log('editor focus!', quill)},// 准备富文本编辑器onEditorReady(quill) {console.log('editor ready!', quill)},// 内容改变事件onEditorChange({ quill, html, text }) {console.log('editor change!', quill, html, text)this.content = html},// 限制上传文件数量handleExceed(files, fileList) {this.$message.warning(`当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`)},// 新增上传方法uploadFile(file) {var _this = this;// 获取 Quill 实例const quill = this.$refs.myQuillEditor?.quill;if (!quill) {this.$message.error('编辑器未初始化，请检查组件加载状态');return;}const maxSize = 5 * 1024 * 1024; // 5MB限制if (file.file.size > maxSize) {uni.showToast({ title: `${file.file.name}超过大小限制`, icon: 'none' });this.$refs.filePicker.clear(); // 清除非法文件避免回显[4,6](@ref)return;}const formData = new FormData()formData.append('file', file.file)$api.uploadApi.uploadFile(formData).then((res) => {this.$refs.uploadRef.clearFiles()const { code, data, message, error } = res.dataif (code !== 0) return this.$message.error(message || error)this.$message.success('上传成功')// 获取光标所在位置let length = quill.getSelection().index// 插入图片  dt.url为服务器返回的图片地址quill.insertEmbed(length, 'image', data.fileUrl)// 调整光标到最后quill.setSelection(length + 1)})},}
}
</script><style lang="scss">
.quill-editor-page {height: 100%;
}
.quill-editor {padding: 0;// height: 200px;white-space: inherit;.ql-container.ql-snow,.ql-toolbar.ql-snow {border:solid 1px rgba(226, 232, 240, 1)}.ql-container.ql-snow {height: 66%;}
}
/* 字体名称映射 */
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="SimHei"]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="SimHei"]::before {content: "黑体";font-family: "SimHei" !important;
}.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" !important;
}.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="Microsoft-YaHei"]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="Microsoft-YaHei"]::before {content: "微软雅黑";font-family: "Microsoft YaHei" !important;
}.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="KaiTi"]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="KaiTi"]::before {content: "楷体";font-family: "KaiTi" !important;
}.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="FangSong"]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="FangSong"]::before {content: "仿宋";font-family: "FangSong" !important;
}/* 字体类名定义 */
.ql-font-SimSun { font-family: "SimSun"; }
.ql-font-SimHei { font-family: "SimHei"; }
.ql-font-Microsoft-YaHei { font-family: "Microsoft YaHei"; }
.ql-font-KaiTi { font-family: "KaiTi"; }
.ql-font-FangSong { font-family: "FangSong"; }/* 字号选择器样式 */
.ql-snow .ql-picker.ql-size .ql-picker-label::before,
.ql-snow .ql-picker.ql-size .ql-picker-item::before {content: "14px"; /* 默认显示 */font-size: 14px !important;
}/* 逐个字号定义 */
@each $size in 12px, 14px, 16px, 18px, 20px, 24px, 30px {.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="#{$size}"]::before,.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="#{$size}"]::before {content: "#{$size}";font-size: #{$size} !important;}.ql-editor .ql-size-#{$size} {font-size: #{$size} !important;}
}
</style>

查看全文

http://www.dtcms.com/a/193343.html