|
@@ -1,7 +1,7 @@
|
|
<template>
|
|
<template>
|
|
<div class="base-editor-wrap">
|
|
<div class="base-editor-wrap">
|
|
<div :id="ids + 'btn'" class="base-editor-tools">
|
|
<div :id="ids + 'btn'" class="base-editor-tools">
|
|
- <span class="select-model" @click="onSelectModal" v-if="type !== '0'">编辑</span>
|
|
|
|
|
|
+ <span class="select-model" @click="onSelectModal" v-if="type !== '0'">编辑</span>
|
|
<span class="select-model btn-delete" @click="onDeleteBlock">删除</span>
|
|
<span class="select-model btn-delete" @click="onDeleteBlock">删除</span>
|
|
</div>
|
|
</div>
|
|
<p class="margin-block"></p>
|
|
<p class="margin-block"></p>
|
|
@@ -104,7 +104,8 @@
|
|
/* 切换富文本显示模式(简答题、语文作文、英语作文)*/
|
|
/* 切换富文本显示模式(简答题、语文作文、英语作文)*/
|
|
doSelectModel() {
|
|
doSelectModel() {
|
|
this.myEditor.txt.clear()
|
|
this.myEditor.txt.clear()
|
|
- let orderStr = '<span style="display:inline-block">' + (this.allItems.indexOf(this.curPropItem[0]) + 1) +
|
|
|
|
|
|
+ let allItemIds = this.$store.state.answerSheet.paperItem.item.map(i => i.id)
|
|
|
|
+ let orderStr = '<span style="display:inline-block">' + (allItemIds.indexOf(this.curPropItem[0].id) + 1) +
|
|
"(" + (this.curPropItem[0].score + "分)") + '</span>'
|
|
"(" + (this.curPropItem[0].score + "分)") + '</span>'
|
|
if (this.curModel === '2') {
|
|
if (this.curModel === '2') {
|
|
let lineCount = this.lineCount
|
|
let lineCount = this.lineCount
|
|
@@ -115,7 +116,7 @@
|
|
} else if (this.curModel === '3') {
|
|
} else if (this.curModel === '3') {
|
|
let wordCount = this.wordCount
|
|
let wordCount = this.wordCount
|
|
let singleStr = '<span class="cell-item"></span>';
|
|
let singleStr = '<span class="cell-item"></span>';
|
|
- this.myEditor.config.height = (wordCount / 20) * 35 + 40
|
|
|
|
|
|
+ this.myEditor.config.height = (wordCount / 18) * 40 + 60
|
|
this.myEditor.cmd["do"]('insertHTML', orderStr + '<p><br></p>' + singleStr.repeat(wordCount))
|
|
this.myEditor.cmd["do"]('insertHTML', orderStr + '<p><br></p>' + singleStr.repeat(wordCount))
|
|
} else {
|
|
} else {
|
|
this.myEditor.cmd["do"]('insertHTML', orderStr)
|
|
this.myEditor.cmd["do"]('insertHTML', orderStr)
|
|
@@ -190,53 +191,53 @@
|
|
// curEditorY - SVG_BORDER_PROP.y + curEditorH + lastBottomGap
|
|
// curEditorY - SVG_BORDER_PROP.y + curEditorH + lastBottomGap
|
|
// );
|
|
// );
|
|
let curEditorDom = document.getElementById(this.ids);
|
|
let curEditorDom = document.getElementById(this.ids);
|
|
|
|
+ // 如果 渲染当前富文本的时候 需要渲染的高度超过当前页的剩余高度 则需要进行加页处理
|
|
if (
|
|
if (
|
|
- curEditorY - SVG_BORDER_PROP.y + curEditorH + lastBottomGap >
|
|
|
|
|
|
+ curEditorY - SVG_BORDER_PROP.y - 90 + curEditorH + lastBottomGap >
|
|
SVG_BORDER_PROP.height
|
|
SVG_BORDER_PROP.height
|
|
) {
|
|
) {
|
|
|
|
+ console.log(itemOrder,'需要增加页码')
|
|
|
|
+ this.$store.commit("addPage");
|
|
|
|
+ // 计算出可以当前页还能渲染的高度
|
|
let renderHeight =
|
|
let renderHeight =
|
|
SVG_BORDER_PROP.height -
|
|
SVG_BORDER_PROP.height -
|
|
- (curEditorY - SVG_BORDER_PROP.y - 90) -
|
|
|
|
|
|
+ (curEditorY - SVG_BORDER_PROP.y - 50) -
|
|
lastBottomGap;
|
|
lastBottomGap;
|
|
- console.log(itemOrder,curEditorY, renderHeight);
|
|
|
|
- if (!isNewPage) {
|
|
|
|
|
|
+ console.log(itemOrder, curEditorH, renderHeight);
|
|
|
|
+ // if (!isNewPage) {
|
|
// 如果渲染的客观题高度在这个区间 才需要在下一页添加补充作答区域 其余全部按照正常 跨页处理不需要补充作答区域
|
|
// 如果渲染的客观题高度在这个区间 才需要在下一页添加补充作答区域 其余全部按照正常 跨页处理不需要补充作答区域
|
|
if (renderHeight > 100) {
|
|
if (renderHeight > 100) {
|
|
console.log(itemOrder + "需要处理高度");
|
|
console.log(itemOrder + "需要处理高度");
|
|
- this.$store.commit("addFixItem", itemOrder);
|
|
|
|
this.myEditor.config.height = renderHeight;
|
|
this.myEditor.config.height = renderHeight;
|
|
- document.getElementById(this.ids + "fix").style.marginTop =
|
|
|
|
- PAPER_H -
|
|
|
|
- SVG_BORDER_PROP.height -
|
|
|
|
- SVG_BORDER_PROP.y +
|
|
|
|
- SVG_BORDER_PROP.y +
|
|
|
|
- 40 +
|
|
|
|
- "px";
|
|
|
|
- this.myFixEditor.config.height = 200 - renderHeight;
|
|
|
|
- this.$store.commit("changeNewPage", true);
|
|
|
|
- if (itemOrder !== this.allItems.length) {
|
|
|
|
- this.$store.commit("addPage");
|
|
|
|
|
|
+ if(renderHeight < 160){
|
|
|
|
+ this.$store.commit("addFixItem", itemOrder);
|
|
|
|
+ document.getElementById(this.ids + "fix").style.marginTop =
|
|
|
|
+ PAPER_H -
|
|
|
|
+ SVG_BORDER_PROP.height -
|
|
|
|
+ SVG_BORDER_PROP.y +
|
|
|
|
+ SVG_BORDER_PROP.y +
|
|
|
|
+ 40 +
|
|
|
|
+ "px";
|
|
|
|
+ this.myFixEditor.config.height = curEditorH - renderHeight;
|
|
}
|
|
}
|
|
|
|
+ this.$store.commit("changeNewPage", true);
|
|
} else {
|
|
} else {
|
|
// 跨页处理不需要补充作答区域
|
|
// 跨页处理不需要补充作答区域
|
|
this.$store.commit("changeNewPage", true);
|
|
this.$store.commit("changeNewPage", true);
|
|
- document.getElementById(this.ids).style.marginTop =
|
|
|
|
- PAPER_H -
|
|
|
|
- SVG_BORDER_PROP.height -
|
|
|
|
- SVG_BORDER_PROP.y +
|
|
|
|
- SVG_BORDER_PROP.y +
|
|
|
|
- 40 + renderHeight + 20 +
|
|
|
|
- "px";
|
|
|
|
- if (itemOrder !== this.allItems.length) {
|
|
|
|
- this.$store.commit("addPage");
|
|
|
|
- }
|
|
|
|
|
|
+ // document.getElementById(this.ids).style.marginTop =
|
|
|
|
+ // PAPER_H -
|
|
|
|
+ // SVG_BORDER_PROP.height -
|
|
|
|
+ // SVG_BORDER_PROP.y +
|
|
|
|
+ // SVG_BORDER_PROP.y +
|
|
|
|
+ // 40 + renderHeight + 20 +
|
|
|
|
+ // "px";
|
|
}
|
|
}
|
|
} else {
|
|
} else {
|
|
this.$store.commit("changeNewPage", false);
|
|
this.$store.commit("changeNewPage", false);
|
|
}
|
|
}
|
|
- } else {
|
|
|
|
- this.$store.commit("changeNewPage", false);
|
|
|
|
- }
|
|
|
|
|
|
+ // } else {
|
|
|
|
+ // this.$store.commit("changeNewPage", false);
|
|
|
|
+ // }
|
|
this.$root.$children[0].spinShow = false;
|
|
this.$root.$children[0].spinShow = false;
|
|
|
|
|
|
// this.myEditor.txt.append('curEditorY:' + curEditorY + 'px');
|
|
// this.myEditor.txt.append('curEditorY:' + curEditorY + 'px');
|
|
@@ -305,6 +306,7 @@
|
|
height: editor.config.height
|
|
height: editor.config.height
|
|
})
|
|
})
|
|
that.$EventBus.$emit('doRefresh')
|
|
that.$EventBus.$emit('doRefresh')
|
|
|
|
+ that.watchHeight()
|
|
}
|
|
}
|
|
// 将鼠标事件绑定到 document 上
|
|
// 将鼠标事件绑定到 document 上
|
|
document.addEventListener("mousemove", mousemove);
|
|
document.addEventListener("mousemove", mousemove);
|
|
@@ -373,16 +375,22 @@
|
|
document
|
|
document
|
|
.getElementById(curId)
|
|
.getElementById(curId)
|
|
.getElementsByClassName("w-e-toolbar")[0].style.display = "flex";
|
|
.getElementsByClassName("w-e-toolbar")[0].style.display = "flex";
|
|
- if(!isFix){
|
|
|
|
- document.getElementById(curId + 'btn').style.display = 'unset'
|
|
|
|
- }
|
|
|
|
|
|
+ if (!isFix) {
|
|
|
|
+ document.getElementById(curId + 'btn').style.display = 'unset'
|
|
|
|
+ }
|
|
};
|
|
};
|
|
|
|
|
|
editor.config.onblur = (html) => {
|
|
editor.config.onblur = (html) => {
|
|
- document
|
|
|
|
- .getElementById(curId)
|
|
|
|
- .getElementsByClassName("w-e-toolbar")[0].style.display = "none";
|
|
|
|
- if(!isFix){
|
|
|
|
|
|
+ let scrollHeight = editor.$textElem.elems[0].scrollHeight
|
|
|
|
+ editor.config.height = scrollHeight > 200 ? scrollHeight : 200
|
|
|
|
+ document.getElementById(curId) && (document.getElementById(curId).getElementsByClassName("w-e-toolbar")[0].style.display = "none");
|
|
|
|
+ this.$store.commit('setEditorHeight', {
|
|
|
|
+ id: this.ids,
|
|
|
|
+ height: editor.config.height,
|
|
|
|
+ content:html
|
|
|
|
+ })
|
|
|
|
+ this.$EventBus.$emit('doRefresh')
|
|
|
|
+ if (!isFix) {
|
|
document.getElementById(curId + 'btn').style.display = 'none'
|
|
document.getElementById(curId + 'btn').style.display = 'none'
|
|
}
|
|
}
|
|
};
|
|
};
|
|
@@ -396,17 +404,50 @@
|
|
editor.config.height = curSetting.height
|
|
editor.config.height = curSetting.height
|
|
}
|
|
}
|
|
editor.create();
|
|
editor.create();
|
|
- // this.dragReSize(editor);
|
|
|
|
|
|
+ this.dragReSize(editor);
|
|
if (!isFix) {
|
|
if (!isFix) {
|
|
this.myEditor = editor;
|
|
this.myEditor = editor;
|
|
} else {
|
|
} else {
|
|
this.myFixEditor = editor;
|
|
this.myFixEditor = editor;
|
|
}
|
|
}
|
|
},
|
|
},
|
|
|
|
+
|
|
|
|
+ watchHeight(){
|
|
|
|
+ let allItemIds = this.$store.state.answerSheet.paperItem.item.map(i => i.id)
|
|
|
|
+ let subjectiveItem = this.curPropItem[0];
|
|
|
|
+ let itemOrder = allItemIds.indexOf(subjectiveItem.id) + 1;
|
|
|
|
+ let Y = this.myEditor.$textElem.elems[0].getBoundingClientRect().top - 90;
|
|
|
|
+ // console.log('========',itemOrder,Y)
|
|
|
|
+ // console.log('xxx',document.getElementById('pdfDom').scrollHeight)
|
|
|
|
+ let curEditorH = this.myEditor.$textElem.elems[0].clientHeight;
|
|
|
|
+ let paperH = PAPER_H;
|
|
|
|
+ let curEditorY = Y > paperH ? Y % paperH : Y;
|
|
|
|
+ let lastBottomGap = 20;
|
|
|
|
+ let leftHeight = SVG_BORDER_PROP.height - (curEditorY - SVG_BORDER_PROP.y) - lastBottomGap;
|
|
|
|
+ // console.log(itemOrder,leftHeight < curEditorH ? '换行' : 'NO')
|
|
|
|
+ // console.log(itemOrder,Y,curEditorY,curEditorH,leftHeight)
|
|
|
|
+ // 如果剩余高度小于当前编辑器要渲染的高度 则需要进行跨页处理
|
|
|
|
+ if(leftHeight < curEditorH){
|
|
|
|
+ // this.$store.commit("addFixItem", itemOrder);
|
|
|
|
+ // document.getElementById(this.ids + "fix").style.marginTop =
|
|
|
|
+ // PAPER_H -
|
|
|
|
+ // SVG_BORDER_PROP.height -
|
|
|
|
+ // SVG_BORDER_PROP.y +
|
|
|
|
+ // SVG_BORDER_PROP.y +
|
|
|
|
+ // 40 +
|
|
|
|
+ // "px";
|
|
|
|
+ // this.myFixEditor.config.height = curEditorH - leftHeight;
|
|
|
|
+ // this.myEditor.config.height = leftHeight;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ }
|
|
},
|
|
},
|
|
mounted() {
|
|
mounted() {
|
|
this.initEditor(this.ids);
|
|
this.initEditor(this.ids);
|
|
this.initEditor(this.ids + "fix", true);
|
|
this.initEditor(this.ids + "fix", true);
|
|
|
|
+ this.$EventBus.$on("doRefresh", () => {
|
|
|
|
+ this.watchHeight()
|
|
|
|
+ });
|
|
},
|
|
},
|
|
computed: {
|
|
computed: {
|
|
// 是否需要展示跨页展示的富文本框
|
|
// 是否需要展示跨页展示的富文本框
|
|
@@ -422,6 +463,12 @@
|
|
return ids => {
|
|
return ids => {
|
|
return this.$store.state.answerSheet.editorInfos[ids]
|
|
return this.$store.state.answerSheet.editorInfos[ids]
|
|
}
|
|
}
|
|
|
|
+ },
|
|
|
|
+ editorY(){
|
|
|
|
+ this.$nextTick(() => {
|
|
|
|
+ console.log(this.myEditor)
|
|
|
|
+ return this.myEditor.$textElem.elems[0].getBoundingClientRect().top - 90
|
|
|
|
+ })
|
|
}
|
|
}
|
|
|
|
|
|
},
|
|
},
|
|
@@ -439,6 +486,13 @@
|
|
},
|
|
},
|
|
immediate: true,
|
|
immediate: true,
|
|
},
|
|
},
|
|
|
|
+ editorY:{
|
|
|
|
+ handler(n, o) {
|
|
|
|
+ console.log('JJJJJJJJJ',n)
|
|
|
|
+ },
|
|
|
|
+ immediate: true,
|
|
|
|
+ deep:true
|
|
|
|
+ }
|
|
},
|
|
},
|
|
};
|
|
};
|
|
</script>
|
|
</script>
|
|
@@ -446,13 +500,13 @@
|
|
<style lang="less">
|
|
<style lang="less">
|
|
.base-editor-wrap {
|
|
.base-editor-wrap {
|
|
position: relative;
|
|
position: relative;
|
|
-
|
|
|
|
- .margin-block{
|
|
|
|
- content: '';
|
|
|
|
- display: block;
|
|
|
|
- width: 100%;
|
|
|
|
- height: 10px;
|
|
|
|
- background: transparent;
|
|
|
|
|
|
+
|
|
|
|
+ .margin-block {
|
|
|
|
+ content: '';
|
|
|
|
+ display: block;
|
|
|
|
+ width: 100%;
|
|
|
|
+ height: 10px;
|
|
|
|
+ background: transparent;
|
|
}
|
|
}
|
|
|
|
|
|
.base-editor-tools {
|
|
.base-editor-tools {
|