|
@@ -9,7 +9,7 @@
|
|
|
<!-- <div @mouseenter="isShowTools = true" @mouseleave="isShowTools = false"> -->
|
|
|
<div >
|
|
|
<div :id="ids" class="sheet-Editor" ></div>
|
|
|
- <div v-for="(item,index) in fixArr" :id="ids + 'fix' + index" class="sheet-Editor" v-show="type !== '0'"></div>
|
|
|
+ <div v-for="(item,index) in fixArr" :id="ids + 'fix' + index" class="sheet-Editor"></div>
|
|
|
</div>
|
|
|
|
|
|
<Modal v-model="isShowSelectModel" title="设置内容格式" width="600px" @on-ok="doSelectModel">
|
|
@@ -167,10 +167,14 @@
|
|
|
doInsertComplete(items) {
|
|
|
let underLineSpaceCount = 45;
|
|
|
let allItemIds = this.$store.state.answerSheet.paperItem.item.map(i => i.id)
|
|
|
+ this.fixArr = []
|
|
|
this.$nextTick(() => {
|
|
|
- console.log(this.myEditor.$textElem.elems[0].scrollHeight)
|
|
|
this.myEditor.txt.html('<span></span>')
|
|
|
})
|
|
|
+ let totalStr = '' // 填空题总体富文本
|
|
|
+ let lineBlankCount = 0 //总空格数
|
|
|
+ let lineStr = '' //每一行的富文本
|
|
|
+ // 遍历所有填空题 生成对应题目的空格
|
|
|
items.forEach((item, index) => {
|
|
|
item.blankCount = item.blankCount || 1
|
|
|
let addStr = allItemIds.indexOf(item.id) + 1 + "";
|
|
@@ -180,26 +184,90 @@
|
|
|
'<span class="underline">' +
|
|
|
new Array(underLineSpaceCount).fill(" ").join("") +
|
|
|
"</span>";
|
|
|
+ lineBlankCount += item.blankCount
|
|
|
+ }
|
|
|
+ // 如果空格数量默认渲染状态下到3 则需要换行
|
|
|
+ if(lineBlankCount % 3 !== 0){
|
|
|
+ lineStr += `<span class='complete-item'>${addStr}</span>`
|
|
|
+ // 如果是最后一排 则直接渲染 不需要排满
|
|
|
+ if(index === items.length - 1){
|
|
|
+ lineStr = '<p>' + lineStr + '</p>'
|
|
|
+ totalStr += lineStr
|
|
|
+ }
|
|
|
+ }else{
|
|
|
+ lineStr += `<span class='complete-item'>${addStr}</span>`
|
|
|
+ lineStr = '<p>' + lineStr + '</p>'
|
|
|
+ totalStr += lineStr
|
|
|
+ lineStr = ''
|
|
|
+ lineBlankCount = 0
|
|
|
}
|
|
|
- this.$nextTick(() => {
|
|
|
- this.myEditor.txt.append(`<span class='complete-item'>${addStr}</span>`);
|
|
|
- });
|
|
|
});
|
|
|
this.$nextTick(() => {
|
|
|
+ this.myEditor.txt.append(totalStr);
|
|
|
this.myEditor.config.height = this.myEditor.$textElem.elems[0].clientHeight
|
|
|
+ let scrollDom = this.$parent.$parent.$parent.$parent.$parent.$refs["evScroll"]
|
|
|
+ if (!scrollDom) return
|
|
|
+ setTimeout(() => {
|
|
|
+ let editorDom = this.myEditor.$textElem.elems[0]
|
|
|
+ this.pArr = Array.from(editorDom.getElementsByTagName('p'))
|
|
|
+ let scrollDis = scrollDom.getPosition().scrollTop
|
|
|
+ let Y = editorDom.getBoundingClientRect().top + scrollDis - 90;
|
|
|
+ let paperH = PAPER_H;
|
|
|
+ let lastBottomGap = 20;
|
|
|
+ let curEditorY = Y > paperH ? +((Y % paperH).toFixed(4)) : Y;
|
|
|
+ let curEditorH = editorDom.clientHeight;
|
|
|
+ let leftHeight = paperH - curEditorY - lastBottomGap - SVG_BORDER_MB;
|
|
|
+ let fixHeight = curEditorH - leftHeight + 20
|
|
|
+ if ( curEditorY + curEditorH + lastBottomGap + SVG_BORDER_MB > PAPER_H) {
|
|
|
+ // 如果剩余高度不满足渲染 并且需要补充的区域 则需要进行跨页处理
|
|
|
+ if (leftHeight > 100) {
|
|
|
+ this.$store.commit("addPage");
|
|
|
+ let heightArr = []
|
|
|
+ this.myEditor.config.height = leftHeight + 20;
|
|
|
+ heightArr.push(leftHeight)
|
|
|
+ // 如果渲染的客观题高度在这个区间 才需要在下一页添加补充作答区域 其余全部按照正常 跨页处理不需要补充作答区域
|
|
|
+ let fixCount = Math.ceil(fixHeight / SVG_BORDER_PROP.height)
|
|
|
+ console.log("需要处理跨页,数量为" + fixCount);
|
|
|
+ console.log("剩余渲染高度" + fixHeight);
|
|
|
+ for(let i = 0;i < fixCount;i++){
|
|
|
+ this.fixArr.push(0)
|
|
|
+ let curFixHeight = fixHeight > SVG_BORDER_PROP.height ? SVG_BORDER_PROP.height - 30 : fixHeight
|
|
|
+ heightArr.push(curFixHeight)
|
|
|
+ fixHeight = fixHeight - SVG_BORDER_PROP.height
|
|
|
+ if(i > 0) {
|
|
|
+ console.log('fix添加页码')
|
|
|
+ this.$store.commit("addPage");
|
|
|
+ }
|
|
|
+ }
|
|
|
+ this.$nextTick(() => {
|
|
|
+ let splitHtmlArr = this.getSplitHtml(this.pArr,heightArr)
|
|
|
+ splitHtmlArr.forEach((curEditorContent,editorIndex) => {
|
|
|
+ console.log('填空题富文本的分割高度',heightArr)
|
|
|
+ console.log('填空题富文本的分割',splitHtmlArr)
|
|
|
+
|
|
|
+ let editorHeight = curEditorContent.html === '' ? heightArr[editorIndex] : heightArr[editorIndex]
|
|
|
+ // let curEditorContent = this.getSplitHtml(this.pArr,curEditorHeight)
|
|
|
+ if(editorIndex !== 0){
|
|
|
+ this.initFixEditor(this.ids + 'fix' + (editorIndex - 1), editorHeight, curEditorContent.html)
|
|
|
+ }else{
|
|
|
+ this.myEditor.txt.clear();
|
|
|
+ this.myEditor.txt.html('<span></span>')
|
|
|
+ this.myEditor.txt.append(curEditorContent.html);
|
|
|
+ }
|
|
|
+ })
|
|
|
+ })
|
|
|
+ } else {
|
|
|
+ // 跨页处理不需要补充作答区域
|
|
|
+ this.$store.commit("addPage");
|
|
|
+ document.getElementById(this.ids).style.marginTop = (PAPER_H - curEditorY + lastBottomGap + SVG_BORDER_PROP.y) + "px";
|
|
|
+ document.getElementById(this.ids + 'btn').style.top = (PAPER_H - curEditorY + lastBottomGap + SVG_BORDER_PROP.y + 20) + "px";
|
|
|
+ }
|
|
|
+ }else {
|
|
|
+ document.getElementById(this.ids + 'btn').style.top = "20px";
|
|
|
+ }
|
|
|
+ })
|
|
|
});
|
|
|
},
|
|
|
-
|
|
|
- nodeToString ( node ) {
|
|
|
- //createElement()返回一个Element对象
|
|
|
- var tmpNode = document.createElement( "div" );
|
|
|
- //appendChild() 参数Node对象 返回Node对象 Element方法
|
|
|
- //cloneNode() 参数布尔类型 返回Node对象 Element方法
|
|
|
- tmpNode.appendChild( node.cloneNode( true ) );
|
|
|
- var str = tmpNode.innerHTML;
|
|
|
- tmpNode = node = null; // prevent memory leaks in IE
|
|
|
- return str;
|
|
|
- } ,
|
|
|
|
|
|
// 渲染问答题
|
|
|
doInsertSubjective(items) {
|
|
@@ -237,9 +305,7 @@
|
|
|
let fixHeight = curEditorH - leftHeight + 20
|
|
|
// console.log(itemOrder, '需要fix的高度', fixHeight)
|
|
|
// 如果 渲染当前富文本的时候 需要渲染的高度超过当前页的剩余高度 则需要进行加页处理
|
|
|
- if (
|
|
|
- curEditorY + curEditorH + lastBottomGap + SVG_BORDER_MB > PAPER_H
|
|
|
- ) {
|
|
|
+ if (curEditorY + curEditorH + lastBottomGap + SVG_BORDER_MB > PAPER_H) {
|
|
|
// console.log(itemOrder, Y , curEditorY , curEditorH , '超出了')
|
|
|
// 如果剩余高度不满足渲染 并且需要补充的区域 则需要进行跨页处理
|
|
|
if (leftHeight > 100) {
|
|
@@ -296,6 +362,7 @@
|
|
|
});
|
|
|
},
|
|
|
|
|
|
+ // 跨页内容分割处理
|
|
|
getSplitHtml(pArr,heightArr){
|
|
|
let result = []
|
|
|
heightArr.forEach(height => {
|
|
@@ -321,6 +388,18 @@
|
|
|
return result
|
|
|
},
|
|
|
|
|
|
+ // 将NODE转换成字符串
|
|
|
+ nodeToString ( node ) {
|
|
|
+ //createElement()返回一个Element对象
|
|
|
+ var tmpNode = document.createElement( "div" );
|
|
|
+ //appendChild() 参数Node对象 返回Node对象 Element方法
|
|
|
+ //cloneNode() 参数布尔类型 返回Node对象 Element方法
|
|
|
+ tmpNode.appendChild( node.cloneNode( true ) );
|
|
|
+ var str = tmpNode.innerHTML;
|
|
|
+ tmpNode = node = null; // prevent memory leaks in IE
|
|
|
+ return str;
|
|
|
+ } ,
|
|
|
+
|
|
|
define({
|
|
|
editor,
|
|
|
prop,
|