正规做网站/seo推广论坛

<!--  模板 -->
<template><div class="editor"><quill-editorv-model="content"ref="myQuillEditor":options="options":disabled="redact"@change="onEditorChange($event)"></quill-editor><van-uploader v-show="false" :afterRead="afterRead" :beforeRead="beforeRead"><van-button icon="photo" type="primary">上传图片</van-button></van-uploader></div><!-- <div class="ql-editor" v-html="content"></div> -->
</template><script>
import "quill/dist/quill.core.css"; //引入样式
import "quill/dist/quill.snow.css";//引入样式
import "quill/dist/quill.bubble.css";//引入样式import { quillEditor } from "vue-quill-editor";//引入组件
export default {name: "quillEditors",props: {//是否可以编辑redact: {type: Boolean,default: false},//头部是否可显示title: {type: Boolean,default: false}},data() {return {content: ``,options: {placeholder: "请输入模板...",modules: {toolbar: {container: [["bold", "italic", "underline", "strike"], //切换按钮  //bold 加粗 italic 斜 underline 下划线 strike删除线["blockquote", "code-block"], //blockquote 引用 code-block 代码块["link", "image"], //图片 link 链接  image图片[{ header: 1 }, { header: 2 }], // 标题，键值对的形式；1、2表示字体大小[{ list: "ordered" }, { list: "bullet" }], //排序 ordered 有序  bullet 无序// [{ header: [1, 2, 3, 4, 5, 6, false] }], //几级标题[{ script: "sub" }, { script: "super" }], // sub上标 / super下标[{ indent: "-1" }, { indent: "+1" }], // 减少缩进/缩进[{ direction: "rtl" }], // 文本方向[{ color: [] }, { background: [] }], // color 字体颜色 background 背景颜色  从主题默认下拉[{ align: [] }], //文本对齐方式[{ font: [] }], //字体格式[{ size: [] }] // 自定义下拉],handlers: {image: value => {if (value) {//禁止软键盘弹出document.activeElement.blur();// 触发input框选择图片文件document.querySelector(".van-uploader input").click();} else {this.quill.format("image", false);}}}}}}};},computed: {},watch: {//title变化时触发title(bool) {if (bool) {document.querySelector(".quill-editor .ql-toolbar").style.display ="none";}}},methods: {//图片上传成功afterRead(file) {console.log("后", file);},//图片上传前async beforeRead(file) {console.log("前", file, file.size / 1024);if (file.size == 0) {return false}if (!/^image/(jpeg|png|jpg)$/.test(file.type)) {this.$toast("请上传 jpg,jpeg,png 格式图片");return false;}this.$toast.allowMultiple();let loading = this.$toast.loading({duration: 0,mask: false,forbidClick: true,message: "上传中..."});let fr = new FormData();fr.append("image", file);try {let quill = this.$refs.myQuillEditor.quill;let { msg, code, data } = await this.$post("img/V1/uploadImage", fr);if (code === 1) {console.log("上传成功", data[0]);// 获取光标所在位置let length = quill.getSelection().index;// 插入图片quill.insertEmbed(length, "image", data[0]);// 调整光标到最后quill.setSelection(length + 1);return true;} else {this.$toast(`${msg}`);}} catch (err) {console.log("错误", err);this.$toast("网络错误，请检查网络连接!");} finally {loading.clear();}},//内容改变触发onEditorChange() {this.$emit("ChangeText", this.content);}},mounted() {//初始化titlethis.title == true? (document.querySelector(".quill-editor .ql-toolbar").style.display ="none"): "";},components: { quillEditor }// components: { editor }
};
</script>
<style lang='scss' >
.editor {height: 80%;position: relative;display: flex;flex-direction: column;.quill-editor {height: 100%;}.ql-toolbar {z-index: inherit;// position: absolute;// top: 0;}.ql-container {flex: 1;s,i,em {font-style: italic;text-decoration: line-through;}}
}
</style>

<template><quill-editors @ChangeText="(text)=>{content=text}" :title="title" />
</template>

cent = cent.replace(/s/g, " ");
cent = cent.replace(/(img )/g, "img ");