阿里巴巴个人网站怎么做,c 网站开发实例教学,商城网站的建设费用,icp网站备案号查询一、vue-quill-editor 与 quill 若使用版本1.0#xff0c;这两个组件使用哪个都是一样的#xff0c;无非代码有点偏差#xff1b;若需要使用表格功能#xff0c;必须使用 quill2.0 版本#xff0c;因为 vue-quill-editor 不支持table功能。
二、webpack版本问题 在使用 q…一、vue-quill-editor 与 quill 若使用版本1.0这两个组件使用哪个都是一样的无非代码有点偏差若需要使用表格功能必须使用 quill2.0 版本因为 vue-quill-editor 不支持table功能。
二、webpack版本问题 在使用 quill-image-resize-module 组件做图片缩放功能时需要全局引入quill及在 vue.config.js 文件中进行如下配置
const webpack require(webpack);
// configureWebpack下添加
plugins: [new webpack.ProvidePlugin({window.Quill: quill/dist/quill.js,Quill: quill/dist/quill.js})
]
但配置完发现项目还是报错这里需要将 webpack5.0版本更换为 webpack4.0
三、图片文字复制粘贴功能 配合 quill-image-extend-module 组件实现图片上传到服务器的功能具体参考https://www.kancloud.cn/liuwave/quill/1434141 编辑器内粘贴文字基本没啥问题好多人都困在了粘贴图片需要上传至文件服务器的问题上最简单的方法就是添加一个粘贴事件示例如下
div classeditor refeditor pasteimgPasteHandler($event)/div
// 监听粘贴事件imgPasteHandler(e) {if (e.clipboardData e.clipboardData.files e.clipboardData.files.length) {e.preventDefault();[].forEach.call(e.clipboardData.files, file {let fileName file.name;let fileType fileName.substring(fileName.lastIndexOf(.) 1, fileName.length);console.log(fileType,fileType);let formData new FormData();formData.append(files, file);uploadPic(formData).then(resp {if (resp.code 200) {this.$message.success(图片上传成功);let index this.quill.getSelection(true).index;this.quill.insertEmbed(index, image, process.env.VUE_APP_BASE_API resp.data.url);this.quill.setSelection(index 1);} else {this.$message.error(resp.msg);}});});}}
四、实现表格功能 quill2.0版本是支持 quill-better-table 的。table可以实现单元格的宽度缩放合并新增删除以及底色调整。 详情请参考https://www.cnblogs.com/utomboy/p/17839224.html
五、动态实现编辑器的可编辑与只读模式 可以在quill组件中定义一个属性然后监听这个属性进行实时的对编辑器的只读模式进行更改参考如下
props: {/* 是否只读 */isReadOnly: {type: Boolean,default: false}
},
watch: {isReadOnly: {handler(flag) {if (this.quill ! null) {this.quill.enable(!flag);}},immediate: true}}
六、给toobar增加title 编辑器默认是没有title提示的这对于使用者来说很不友好可以对toobar的工具图标添加title中文提示示例如下
data() {return {titleConfig: {ql-bold: 加粗,ql-color: 颜色,ql-font: 字体,ql-code: 插入代码,ql-italic: 斜体,ql-link: 添加链接,ql-background: 背景颜色,ql-size: 字体大小,ql-strike: 删除线,ql-script: 上标/下标,ql-underline: 下划线,ql-blockquote: 引用,ql-header: 标题,ql-indent: 缩进,ql-list: 列表,ql-align: 文本对齐,ql-direction: 文本方向,ql-code-block: 代码块,ql-formula: 公式,ql-image: 图片,ql-video: 视频,ql-clean: 清除字体样式}}
},
mounted() {this.addQuillTitle();
},
methods: {addQuillTitle() {const oToolBar document.querySelector(.ql-toolbar);const aButton oToolBar.querySelectorAll(button);const aSelect oToolBar.querySelectorAll(select);const aSpan oToolBar.querySelectorAll(span);aButton.forEach(item {if (item.className ql-script) {item.value sub ? item.title 下标 : item.title 上标;} else if (item.className ql-indent) {item.value 1 ? item.title 向右缩进 : item.title 向左缩进;} else if (item.className ql-list) {item.value ordered ? item.title 有序列表 : item.title 无序列表;} else {item.title this.titleConfig[item.classList[0]];}});aSelect.forEach(item {if (!item.classList.contains(ql-color) item.classList.contains(ql-background)) {item.parentNode.title this.titleConfig[item.classList[0]];}});aSpan.forEach(item {if (item.classList[0] ql-size) {const children item.querySelectorAll(span);children.forEach(child {if (child.className ql-picker-label) {child.title 字体大小;} else {child.title ;}});} else if (item.classList[0] ql-header) {const children item.querySelectorAll(span);children.forEach(child {if (child.className ql-picker-label) {child.title 标题;} else {child.title ;}});} else if (item.classList[0] ql-color) {const children item.querySelectorAll(span);children.forEach(child {if (child.className ql-picker-label) {child.title 字体颜色;} else {child.title ;}});} else if (item.classList[0] ql-background) {const children item.querySelectorAll(span);children.forEach(child {if (child.className ql-picker-label) {child.title 背景颜色;} else {child.title ;}});} else if (item.classList[0] ql-align) {const children item.querySelectorAll(span);children.forEach(child {if (child.className ql-picker-label) {child.title 对齐方式;} else if(child.className ql-picker-options) {const childes child.querySelectorAll(span);childes.forEach(c {if (c.getAttribute(data-value) center) {c.title 居中;} else if (c.getAttribute(data-value) right) {c.title 右对齐;} else if (c.getAttribute(data-value) justify) {c.title 两端对齐;} else {c.title 左对齐;}});}});}});}
}
