|
@@ -3,13 +3,16 @@
|
|
|
<div class="editor">
|
|
|
<quill-editor
|
|
|
class="ql-editor"
|
|
|
- v-model="forms[keyWord]"
|
|
|
- :ref="myAlias"
|
|
|
+ v-model="form"
|
|
|
+ ref="myAlias"
|
|
|
:options="editorOption"
|
|
|
+ @blur="onEditorBlur($event)"
|
|
|
+ @focus="onEditorFocus($event)"
|
|
|
@change="onEditorChange($event)"
|
|
|
></quill-editor>
|
|
|
|
|
|
<el-upload
|
|
|
+ ref='ivuUpload'
|
|
|
class="ivu-upload"
|
|
|
:show-file-list="false"
|
|
|
:headers="headers"
|
|
@@ -126,7 +129,7 @@ const toolbarOptions = [
|
|
|
[{ script: "sub" }, { script: "super" }], // 上标/下标
|
|
|
[{ indent: "-1" }, { indent: "+1" }], // 缩进
|
|
|
// [{'direction': 'rtl'}], // 文本方向
|
|
|
- [{ size: ["small", 'middle', "large", "huge"] }], // 字体大小
|
|
|
+ [{ size: ["small", "middle", "large", "huge"] }], // 字体大小
|
|
|
[{ header: [1, 2, 3, 4, 5, 6, false] }], // 标题
|
|
|
[{ color: [] }, { background: [] }], // 字体颜色、字体背景颜色
|
|
|
[{ font: [] }], // 字体种类
|
|
@@ -169,12 +172,13 @@ let that;
|
|
|
export default {
|
|
|
// props: ["form",'key'],
|
|
|
props: {
|
|
|
+ id:'',
|
|
|
keyWord: {
|
|
|
type: String,
|
|
|
default: "content",
|
|
|
},
|
|
|
form: {
|
|
|
- type: Object,
|
|
|
+ type: String,
|
|
|
},
|
|
|
alias: {
|
|
|
type: String,
|
|
@@ -209,20 +213,24 @@ export default {
|
|
|
toolbar: {
|
|
|
container: toolbarOptions,
|
|
|
handlers: {
|
|
|
- image: function (value) {
|
|
|
+ image: (value) => {
|
|
|
if (value) {
|
|
|
// 调用iview图片上传
|
|
|
- document.querySelector(".ivu-upload .el-upload").click();
|
|
|
+ let editor = this.editor;
|
|
|
+ // this.ActiveEditor = this.editor
|
|
|
+ this.editorIndex = editor.getSelection()?.index || 0;
|
|
|
+ ;
|
|
|
+ this.$refs.ivuUpload.$children[0].$refs.input.click()
|
|
|
} else {
|
|
|
this.quill.format("image", false);
|
|
|
}
|
|
|
},
|
|
|
- video:(value)=> {
|
|
|
+ video: (value) => {
|
|
|
if (value) {
|
|
|
this.dialogFormVisible = true;
|
|
|
- let editor = this.$refs[this.myAlias].quill;
|
|
|
+ let editor = this.editor;
|
|
|
+ // this.ActiveEditor = this.editor
|
|
|
// 光标所在位置
|
|
|
- console.log(editor, editor.getSelection(), this.myAlias);
|
|
|
this.editorIndex = editor.getSelection()?.index || 0;
|
|
|
} else {
|
|
|
this.quill.format("image", false);
|
|
@@ -232,17 +240,29 @@ export default {
|
|
|
},
|
|
|
},
|
|
|
},
|
|
|
+ ActiveEditor: null,
|
|
|
};
|
|
|
},
|
|
|
- created() {
|
|
|
-
|
|
|
- },
|
|
|
+ created() {},
|
|
|
mounted() {
|
|
|
+ that = this
|
|
|
// console.log(this.form);\
|
|
|
},
|
|
|
methods: {
|
|
|
+ onEditorBlur({ quill, html, text }) {
|
|
|
+ //失去焦点事件
|
|
|
+ // console.log('失去焦点');
|
|
|
+ },
|
|
|
+ onEditorFocus($event) {
|
|
|
+ console.log($event,this.id)
|
|
|
+ this.ActiveEditor = $event;
|
|
|
+
|
|
|
+ //获得焦点事件
|
|
|
+ // console.log('获得焦点事件');
|
|
|
+ },
|
|
|
onEditorChange({ quill, html, text }) {
|
|
|
- this.form[this.keyWord] = html;
|
|
|
+ this.$emit("onEditorChange", html);
|
|
|
+ // this.form = html;
|
|
|
},
|
|
|
onVideoComfirm(formName) {
|
|
|
this.$refs[formName].validate((valid) => {
|
|
@@ -258,7 +278,6 @@ export default {
|
|
|
};
|
|
|
quill.insertEmbed(this.editorIndex, "video", params);
|
|
|
// 调整光标到最后
|
|
|
- console.log(this.editorIndex);
|
|
|
quill.setSelection(this.editorIndex + 1, { preload: false });
|
|
|
|
|
|
this.dialogFormVisible = false;
|
|
@@ -274,11 +293,14 @@ export default {
|
|
|
},
|
|
|
handleSuccess(res) {
|
|
|
// 获取富文本组件实例
|
|
|
- let quill = this.editor;
|
|
|
+ let quill = this.ActiveEditor;
|
|
|
+ // 光标所在位置
|
|
|
// 如果上传成功
|
|
|
+ console.log(quill,this.id)
|
|
|
+ // return;
|
|
|
if (res.code) {
|
|
|
// 获取光标所在位置
|
|
|
- let length = quill.getSelection().index;
|
|
|
+ let length = quill.getSelection().index || 0;
|
|
|
// 插入图片,res为服务器返回的图片链接地址
|
|
|
quill.insertEmbed(length, "image", res.data.url);
|
|
|
// 调整光标到最后
|
|
@@ -334,9 +356,9 @@ export default {
|
|
|
}
|
|
|
return isImage && isLt2M;
|
|
|
},
|
|
|
- handleAvatarSuccess(res, file) {
|
|
|
- this.form.coverImage = res.data.url;
|
|
|
- },
|
|
|
+ // handleAvatarSuccess(res, file) {
|
|
|
+ // this.form.coverImage = res.data.url;
|
|
|
+ // },
|
|
|
beforeAvatarUpload(file) {
|
|
|
const imageType = {
|
|
|
"image/png": true,
|
|
@@ -381,14 +403,12 @@ export default {
|
|
|
},
|
|
|
computed: {
|
|
|
editor() {
|
|
|
- return this.$refs[this.myAlias].quill;
|
|
|
- },
|
|
|
- forms() {
|
|
|
- return this.form;
|
|
|
- },
|
|
|
- myAlias() {
|
|
|
- return this.alias;
|
|
|
+ return this.$refs.myAlias.quill;
|
|
|
},
|
|
|
+ ActiveEditors(){
|
|
|
+ console.log(this.id)
|
|
|
+ return this.ActiveEditor
|
|
|
+ }
|
|
|
},
|
|
|
};
|
|
|
</script>
|
|
@@ -402,5 +422,8 @@ export default {
|
|
|
/deep/.ql-container .ql-editor {
|
|
|
max-height: 500px;
|
|
|
}
|
|
|
+/deep/.ql-snow .ql-editor img {
|
|
|
+ max-width: 95%;
|
|
|
+}
|
|
|
</style>
|
|
|
|