quillEditor富文本编辑器
quillEditor 是我21年就使用过的一款富文本编辑器 个人感觉还可以 程序跑的通 一切顺利哈 想要有预览效果的 可以查看我写的 vue + mavon-editor 编辑器的文章
言归正传 使用步骤如下
一、npm下载依赖
npm install vue-quill-editor --save
二、引入使用
template 结构中
<quill-editor
v-model="newsForm.newsContent"
:options="editorOption"
ref="QuillEditor"
@blur="onEditorBlur($event)"
@focus="onEditorFocus($event)"
@change="onEditorChange($event)"
>
</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";
components: {
quillEditor,
},
computed: {
editor() {
return this.$refs.myQuillEditor.quill;
}
},
data(){
return:{
// 富文本
editorLoading: false,
editorOption: {} // 富文本配置
}
},
// 富文本的配置文件
async created() {
this.editorOption = {
modules: {
toolbar: {
container: [
["bold", "italic", "underline", "strike"], // toggled buttons
["blockquote", "code-block"],
[{ header: 1 }, { header: 2 }], // custom button values
[{ list: "ordered" }, { list: "bullet" }],
[{ script: "sub" }, { script: "super" }], // superscript/subscript
[{ indent: "-1" }, { indent: "+1" }], // outdent/indent
[{ direction: "rtl" }], // text direction
[{ size: ["small", false, "large", "huge"] }], // custom dropdown
[{ header: [1, 2, 3, 4, 5, 6, false] }],
[{ color: [] }, { background: [] }], // dropdown with defaults from theme
[{ font: [] }],
[{ align: [] }],
["link", "image", "video"],
["clean"] // remove formatting button
], // 工具栏
handlers: {
image: function(value) {
if (value) {
document.querySelector(".uploadImgEditor").click();
} else {
this.quill.format("image", false);
}
}
}
}
}
};
},
methods:{
// 富文本失去焦点事件
onEditorBlur() {
// console.log(this.content)
},
// 富文本获得焦点事件
onEditorFocus() {
// console.log(this.content)
},
// 富文本内容改变事件
onEditorChange() {
// console.log(this.fNewsContent);
},
// 上传图片部分
EditorUpload() {
// 设置加载
this.editorLoading = true;
var file = this.$refs.uploadInput.files[0];
// 请求数据 这边用的是 FormData() 按照后端需要的数据进行上传参数
uploadPath().then(res => {
const config = res.data;
const formData = new FormData();
formData.append("filename", file.name); //FormData() 用法
formData.append("key", config.filePath + file.name); //FormData() 用法
formData.append("policy", config.policy); //FormData() 用法
formData.append("OSSAccessKeyId", config.accessKeyId); //FormData() 用法
formData.append("success_action_status", res.code); //FormData() 用法
formData.append("callback", config.callback); //FormData() 用法
formData.append("signature", config.signature); //FormData() 用法
formData.append("file", file); //FormData
this.editorLoading = false;
// 请求阿里云获取上传的地址
this.$axios
.post(config.endpoint, formData, {
headers: {
"Content-Type": "application/json"
}
})
.then(res => {
let quill = this.$refs.QuillEditor.quill;
let length = quill.getSelection().index;
quill.insertEmbed(length, "image", res.data.data);
quill.setSelection(length + 1);
});
});
},
}
以上基本能实现你想要的效果 但当时写的有点急 没有优化
你们也可以进行 组件的封装 在需要的界面再引入这个富文本编辑器
📢没了,结束了,如有错误,欢迎留言.如有问题,不吝赐教。
📢如果此篇博文对您有帮助,还请动动小手点赞 👍 收藏 ⭐留言 📝呐~,谢谢 ~ ~