长春网站排名优化费用,wordpress 相册 时间轴,遵义市城乡建设局网站,wordpress首屏加载速度文章目录 vue前端实现富文本编辑器的功能需要用到第三方库1. 安装包2.全局引入注册3.组件内使用4.图片缩放功能实现①安装包②注册并添加配置项③报错解决 vue前端实现富文本编辑器的功能需要用到第三方库
vue2使用vue-quill-editor#xff0c;vue3使用vueup/vue-quill#… 文章目录 vue前端实现富文本编辑器的功能需要用到第三方库1. 安装包2.全局引入注册3.组件内使用4.图片缩放功能实现①安装包②注册并添加配置项③报错解决 vue前端实现富文本编辑器的功能需要用到第三方库
vue2使用vue-quill-editorvue3使用vueup/vue-quill由于我测试使用的是vue3所以该文章讲解的是vueup/vue-quill的使用
步骤
1. 安装包 npm i vueup/vue-quill 2.全局引入注册
在main.js中
import { QuillEditor } from vueup/vue-quill
import vueup/vue-quill/dist/vue-quill.snow.css
const appcreateApp(App)
app.component(QuillEditor, QuillEditor)3.组件内使用
templatediv富文本编辑器el-upload :actionuploadUrl :before-uploadhandleBeforeUpload :on-successhandleUploadSuccessclasseditor-img-uploader accept.jpeg,.jpg,.png,.svg :on-errorhandleUploadError:show-file-listfalseel-button refuploadRef iconplus classeditor-img-uploader上传/el-button/el-uploaddiv classeditorQuillEditor ideditorId refmyQuillEditor v-model:contenteditorContentupdate:contentonContentChange :optionsoptions :placeholderplaceholder//div/div
/template
script
const titleConfig[{Choice:.ql-insertMetric,title:跳转配置},{Choice:.ql-bold,title:加粗},{Choice:.ql-italic,title:斜体},{Choice:.ql-underline,title:下划线},{Choice:.ql-header,title:段落格式},{Choice:.ql-strike,title:删除线},{Choice:.ql-blockquote,title:块引用},{Choice:.ql-code,title:插入代码},{Choice:.ql-code-block,title:插入代码段},{Choice:.ql-font,title:字体},{Choice:.ql-size,title:字体大小},{Choice:.ql-list[valueordered],title:编号列表},{Choice:.ql-list[valuebullet],title:项目列表},{Choice:.ql-direction,title:文本方向},{Choice:.ql-header[value1],title:h1},{Choice:.ql-header[value2],title:h2},{Choice:.ql-align,title:对齐方式},{Choice:.ql-color,title:字体颜色},{Choice:.ql-background,title:背景颜色},{Choice:.ql-image,title:图像},{Choice:.ql-video,title:视频},{Choice:.ql-link,title:添加链接},{Choice:.ql-formula,title:插入公式},{Choice:.ql-clean,title:清除字体格式},{Choice:.ql-script[valuesub],title:下标},{Choice:.ql-script[valuesuper],title:上标},{Choice:.ql-indent[value-1],title:向左缩进},{Choice:.ql-indent[value1],title:向右缩进},{Choice:.ql-header .ql-picker-label,title:标题大小},{Choice:.ql-header .ql-picker-item[data-value1],title:标题一},{Choice:.ql-header .ql-picker-item[data-value2],title:标题二},{Choice:.ql-header .ql-picker-item[data-value3],title:标题三},{Choice:.ql-header .ql-picker-item[data-value4],title:标题四},{Choice:.ql-header .ql-picker-item[data-value5],title:标题五},{Choice:.ql-header .ql-picker-item[data-value6],title:标题六},{Choice:.ql-header .ql-picker-item:last-child,title:标准},{Choice:.ql-size .ql-picker-item[data-valuesmall],title:小号},{Choice:.ql-size .ql-picker-item[data-valuelarge],title:大号},{Choice:.ql-size .ql-picker-item[data-valuehuge],title:超大号},{Choice:.ql-size .ql-picker-item:nth-child(2),title:标准},{Choice:.ql-align .ql-picker-item:first-child,title:居左对齐},{Choice:.ql-align .ql-picker-item[data-valuecenter],title:居中对齐},{Choice:.ql-align .ql-picker-item[data-valueright],title:居右对齐},{Choice:.ql-align .ql-picker-item[data-valuejustify],title:两端对齐},
]
export default {props:{content:{type:String,default:},readOnly:{type:Boolean,default:false,},fileSize:{type:Number,default:10}},emits:[update:content,getFileId,handleRichTextContentChange],data() {return {uploadUrl:https://jsonplaceholder.typicode.com/posts/,imageUrl:,options: {theme: snow,modules: {toolbar: {container: [[bold, italic,underline,strike],//加粗 斜体 下划线 删除线[{color: []}, {background: []}],// 字体颜色、字体背景颜色[{align: []}],// 对齐方式[{ size:[small,false,large,huge]}],// 字体大小[{font: []}],// 字体种类[{ header:[1,2,3,4,5,6,false]}],// 标题// [{ direction:ltr}],// 文本方向[{ direction:rtl}],// 文本方向[{indent: -1}, {indent: 1}],// 缩进[{list:ordered},{list:bullet}],// 有序、无序列表[{script:sub},{script:super}],// 上标/下标[blockquote, code-block],//引用 代码块[clean],// 清除文本格式[link,image,video],// 链接、图片、视频],handlers:{// 重写图片上传事件image: (value){if(value){this.$refs.uploadRef.$el.click()}else{Quill.format(image,true)}}},}}},placeholder:请输入公告内容...,clipboard:{matchers:[[img,(node,delta){const srcnode.getAttribute(src)const idnode.getAttribute(id)delta.insert({image:{src,id}})}]]},}},computed:{editorContent:{get(){return this.content},set(val){this.$emit(update:content,val)}}},methods:{// 监听富文本内容变化删除被服务器中被用户回车删除的图片onContentChange(content){// console.log(content.ops[0].insert)this.$emit(handleRichTextContentChange,content)},// 上传前校验格式和大小handleBeforeUpload(file){const type[image/jpeg,image/jpg,image/png,image/svg]const isJPGtype.includes(file.type)if(!isJPG){this.$message.error(图片格式错误只能上传jpeg/jpg/png/svg格式)return false}// 校验文件大小if(this.fileSize){const isLtfile.size/1024/1024this.fileSizeif(!isLt){this.$message.error(上传文件大小不能超过${this.fileSize}MB)return false}}return true},// 上传成功处理handleUploadSuccess(res,file){// 如果上传成功if(file.statussuccess){let rawMyQuillEditorthis.$refs.myQuillEditor// 获取富文本实例let quill rawMyQuillEditor.getQuill()// 获取光标所在位置let lengthquill.selection.savedRange.index// // 插入图片生成图片链接地址this.imageUrl URL.createObjectURL(file.raw)const imageIdres.idquill.insertEmbed(length,image,https://img0.baidu.com/it/u2119690721,2710382574fm253fmtautoapp120fJPEG?w800h1422)quill.setSelection(length1)this.$emit(getFileId,imageId)}else{this.$message.error(图片插入失败)}},// 上传失败处理handleUploadError(){this.$message.error(图片插入失败)},// 增加hover工具栏有中文提示initTitle(){document.getElementsByClassName(ql-editor)[0].dataset.placeholderfor (let item of titleConfig) {let tipdocument.querySelector(.ql-toolbar item.Choice)if(!tip) continuetip.setAttribute(title,item.title)}}},mounted(){this.initTitle()}
}
/script
style langscss scoped
//通过css样式实现汉化
.editor{width: 100%;:deep(.ql-editor){height: 500px;overflow: auto;}:deep(.ql-toolbar){white-space: pre-wrap;line-height: normal;}
}
.editor-img-uploader{display: none;
}
.ql-snow .ql-tooltip[data-modelink]::before{content:请输入链接地址;
}
.ql-snow .ql-tooltip.ql-editing a.ql-action::after{border-right: 0px;content:保存;padding-right: 0px;
}
.ql-snow .ql-tooltip[data-modevideo]::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-valuesmall]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-valuesmall]::before{content: 10px;
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-valuelarge]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-valuelarge]::before{content: 18px;
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-valuehuge]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-valuehuge]::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-value1]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value1]::before{content: 标题1;
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value2]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value2]::before{content: 标题2;
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value3]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value3]::before{content: 标题3;
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value4]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value4]::before{content: 标题4;
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value5]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value5]::before{content: 标题5;
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value6]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value6]::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-valueserif]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-valueserif]::before{content: 衬线字体;
}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-valuemonospace]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-valuemonospace]::before{content: 等宽字体;
}
/style
4.图片缩放功能实现
①安装包
上传后的图片可能尺寸不符合我们要求想要对其进行缩放操作要实现该功能需要借助另一个第三方库 quill-image-resize-module npm i quill-image-resize-module ②注册并添加配置项
//在使用富文本编辑器组件的页面
import {Quill} from vueup/vue-quill
import ImageResize from quill-image-resize-module
Quill.register(modules/ImageResize, ImageResize)//在编辑器组件配置项中设置
options: {modules: {toolbar: {......},ImageResize:{//支持图片大小尺寸修改displayStyles:{border:none,backgroundColor: black,color:white},modules:[Resize,DisplaySize,Toolbar]}}},③报错解决
注册并配置好后发现不仅没实现效果还报错了 解决这一问题需要在vite.config.js中进行配置
步骤 Ⅰ.安装包 npm i rollup/plugin-inject Ⅱ.配置vite.config.js文件
import { defineConfig } from vite
import vue from vitejs/plugin-vue
import inject from rollup/plugin-inject
export default defineConfig({plugins: [vue(),inject({window.Quill:[vueup/vue-quill,Quill],})],
})
该文章主要是为了分享和记录 参考文章 https://www.jb51.net/javascript/323881bta.htm 参考文章 https://juejin.cn/post/7402204217517867059?searchId20241120154217039503B146AA0361F0B8
