|
|
@@ -1,192 +1,237 @@
|
|
|
<template>
|
|
|
- <div class="content">
|
|
|
- <div id="textArea"> </div>
|
|
|
- <Modal v-model="markStatus" fullscreen :title="$t('studentWeb.exam.answer')" footer-hide ref="compose">
|
|
|
- <!-- <BaseMyCanvas v-if="markStatus" :bgImg="markBg" @onCloseModal="closeModal" :isStudent="markStatus" @onSaveCanvas="saveMark"></BaseMyCanvas> -->
|
|
|
- <BaseCanvas v-if="markStatus" :vm="vm" :bgImg="markBg" @onCloseModal="closeModal" :isStudent="markStatus" @onSaveCanvas="saveMark"></BaseCanvas>
|
|
|
- </Modal>
|
|
|
- <iframe class="frame" id="answerIframe" :srcdoc="itemInfo.question"></iframe>
|
|
|
+ <div class="content">
|
|
|
+ <div class="editor-wrap" v-show="!isConnector">
|
|
|
+ <div id="textArea"></div>
|
|
|
</div>
|
|
|
+ <div class="connector-wrap" v-if="isConnector">
|
|
|
+ <div v-if="answerImg">
|
|
|
+ <img :src="answerImg" alt="">
|
|
|
+ </div>
|
|
|
+ <p v-if="answerImg" style="font-weight: bold;margin-bottom:20px">{{ $t("studentWeb.exam.testpop.reAns") }}</p>
|
|
|
+ <BaseCanvas :vm="vm" :bgImg="markBg" @onCloseModal="closeModal" :isStudent="markStatus" @onSaveCanvas="saveMark"></BaseCanvas>
|
|
|
+ </div>
|
|
|
+ <Modal v-model="markStatus" fullscreen :title="$t('studentWeb.exam.answer')" footer-hide ref="compose">
|
|
|
+ <BaseCanvas v-if="markStatus" :vm="vm" :bgImg="markBg" @onCloseModal="closeModal" :isStudent="markStatus" @onSaveCanvas="saveMark"></BaseCanvas>
|
|
|
+ </Modal>
|
|
|
+ <iframe class="frame" id="answerIframe" :srcdoc="itemInfo.question"></iframe>
|
|
|
+ </div>
|
|
|
</template>
|
|
|
<script>
|
|
|
- import html2canvas from 'html2canvas';
|
|
|
- import E from 'wangeditor';
|
|
|
- import {editor_tw_config} from '@/utils/editorLangTw.js';
|
|
|
- import {editor_en_config} from '@/utils/editorLangEn.js';
|
|
|
- import i18next from 'i18next';
|
|
|
- export default {
|
|
|
- components: {
|
|
|
+import html2canvas from 'html2canvas';
|
|
|
+import E from 'wangeditor';
|
|
|
+import { editor_tw_config } from '@/utils/editorLangTw.js';
|
|
|
+import { editor_en_config } from '@/utils/editorLangEn.js';
|
|
|
+import i18next from 'i18next';
|
|
|
+export default {
|
|
|
+ components: {
|
|
|
|
|
|
- },
|
|
|
- props: {
|
|
|
- index: {
|
|
|
- type: Number,
|
|
|
- default: -1
|
|
|
- },
|
|
|
- textData: {
|
|
|
- type: Array,
|
|
|
- default: () => {
|
|
|
- return []
|
|
|
- }
|
|
|
- },
|
|
|
- itemInfo: {
|
|
|
- type: Object,
|
|
|
- default: () => {
|
|
|
- return {}
|
|
|
- }
|
|
|
- },
|
|
|
- close: {
|
|
|
- type: Boolean,
|
|
|
- default: false
|
|
|
- }
|
|
|
- },
|
|
|
- data(vm) {
|
|
|
- return {
|
|
|
- vm:vm,
|
|
|
- tabName: 'exercise',
|
|
|
- editorContent: "",
|
|
|
- examInfo: [],
|
|
|
- editor: null,
|
|
|
- markStatus: false,
|
|
|
- markBg:""
|
|
|
- }
|
|
|
- },
|
|
|
- methods: {
|
|
|
- async getInfo() {
|
|
|
- this.examInfo = []
|
|
|
- this.initEditor()
|
|
|
- if (this.textData.length > 0) {
|
|
|
- this.examInfo = [...this.textData]
|
|
|
- this.editor.txt.html(this.examInfo[0])
|
|
|
- }
|
|
|
- },
|
|
|
- closeModal() {
|
|
|
- this.markStatus = false
|
|
|
- this.markBg = ""
|
|
|
- },
|
|
|
- saveMark(data) {
|
|
|
- if (data) {
|
|
|
- data.height = 400
|
|
|
- data.width = 400
|
|
|
- let img = document.createElement('img')
|
|
|
- img.src = data.base64
|
|
|
- console.log(img)
|
|
|
- this.editor.txt.html(img.outerHTML)
|
|
|
- this.markStatus = false
|
|
|
- }
|
|
|
- },
|
|
|
- initEditor() {
|
|
|
- this.editorContent = ""
|
|
|
- this.editor = new E("#textArea");
|
|
|
- this.editor.config.onchange = (html) => {
|
|
|
- this.editorContent = html;
|
|
|
- };
|
|
|
- this.editor.config.showFullScreen = false
|
|
|
- this.editor.config.menus = [
|
|
|
- "link", // 插入链接
|
|
|
- "justify", // 对齐方式
|
|
|
- "image", // 插入图片
|
|
|
- ]
|
|
|
- this.editor.config.zIndex = 1
|
|
|
- this.editor.config.placeholder = this.$t('studentWeb.exam.inputAnswers')
|
|
|
- this.editor.config.height = 300
|
|
|
- this.editor.config.showLinkImg = false;
|
|
|
- this.editor.config.uploadImgShowBase64 = true; // 使用 base64 保存图片不建议使用这种，我只是图个方便
|
|
|
- if (this.itemInfo.type == 'correct' || this.itemInfo.type == 'connector') {
|
|
|
- this.editor.config.menus.push('connector')
|
|
|
- this.$editorTools.addStuBgBtn(this, this.editor)
|
|
|
- } else {
|
|
|
- this.$editorTools.addCanvas(this, this.editor)
|
|
|
- }
|
|
|
- let curLang = localStorage.getItem('local') || 'zh-cn'
|
|
|
- if (curLang === 'zh-tw') {
|
|
|
- // 自定义语言
|
|
|
- this.editor.config.languages['tw'] = editor_tw_config
|
|
|
- // 选择语言
|
|
|
- this.editor.config.lang = 'tw'
|
|
|
- // 引入 i18next 插件
|
|
|
- this.editor.i18next = i18next
|
|
|
- }
|
|
|
- if (curLang === 'en-us') {
|
|
|
- // 自定义语言
|
|
|
- this.editor.config.languages['en'] = editor_en_config
|
|
|
- // 选择语言
|
|
|
- this.editor.config.lang = 'en'
|
|
|
- // 引入 i18next 插件
|
|
|
- this.editor.i18next = i18next
|
|
|
- }
|
|
|
- this.editor.create();
|
|
|
- if (this.close) {
|
|
|
- this.editor.disable()
|
|
|
- }
|
|
|
- this.editor.txt.clear()
|
|
|
- if (this.examInfo.length > 0) {
|
|
|
- this.editor.txt.html(this.examInfo[0])
|
|
|
- }
|
|
|
- },
|
|
|
- markStuAnswer() {
|
|
|
- let answerIframe = ''
|
|
|
- answerIframe = document.getElementById('answerIframe')
|
|
|
- answerIframe.contentWindow.document.body.style.width = 'fit-content'
|
|
|
- answerIframe.contentWindow.document.body.style.minWidth = '600px'
|
|
|
- answerIframe.contentWindow.document.body.style.backgroundColor = '#f5f5f5'
|
|
|
- console.log(document.getElementById('answerIframe').contentWindow.document)
|
|
|
- let iframe = document.getElementById('answerIframe').contentWindow.document.getElementsByTagName('p')
|
|
|
- if (iframe.length > 0) {
|
|
|
- for (let i = 0; i < iframe.length -1; i++) {
|
|
|
- iframe[i].style.lineHeight = '50px'
|
|
|
- iframe[i].style.paddingBottom = '30px'
|
|
|
- }
|
|
|
- iframe[iframe.length -1].style.paddingBottom = '100px'
|
|
|
- iframe[iframe.length - 1].style.lineHeight = '50px'
|
|
|
- }
|
|
|
- html2canvas(answerIframe.contentWindow.document.body).then(canvas => {
|
|
|
- this.markStatus = true
|
|
|
- this.markBg = canvas.toDataURL("image/png");
|
|
|
- })
|
|
|
- },
|
|
|
- },
|
|
|
- mounted() {
|
|
|
- this.initEditor()
|
|
|
- this.getInfo()
|
|
|
- // 监听富文本画板功能
|
|
|
- this.$EventBus.$off('onStuCanvas')
|
|
|
- this.$EventBus.$on('onStuCanvas', editor => {
|
|
|
- this.markBg = ""
|
|
|
- this.markStuAnswer()
|
|
|
- })
|
|
|
- },
|
|
|
- watch: {
|
|
|
- index() {
|
|
|
- this.getInfo()
|
|
|
- deep: true
|
|
|
- immediate:true
|
|
|
- },
|
|
|
- editorContent() {
|
|
|
- this.$emit("dataGet", this.editorContent, this.index)
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-</script>
|
|
|
-<style scoped>
|
|
|
- .content{
|
|
|
- width:100%;
|
|
|
- height:100%;
|
|
|
- }
|
|
|
- .textArea {
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
+ },
|
|
|
+ props: {
|
|
|
+ index: {
|
|
|
+ type: Number,
|
|
|
+ default: -1
|
|
|
+ },
|
|
|
+ textData: {
|
|
|
+ type: Array,
|
|
|
+ default: () => {
|
|
|
+ return []
|
|
|
+ }
|
|
|
+ },
|
|
|
+ itemInfo: {
|
|
|
+ type: Object,
|
|
|
+ default: () => {
|
|
|
+ return {}
|
|
|
+ }
|
|
|
+ },
|
|
|
+ close: {
|
|
|
+ type: Boolean,
|
|
|
+ default: false
|
|
|
}
|
|
|
- .frame {
|
|
|
- /*height: 100px;*/
|
|
|
- border: none;
|
|
|
- position:fixed;
|
|
|
- height:0.1px;
|
|
|
- width: 50%;
|
|
|
- /*margin-left:10px;*/
|
|
|
- /*line-height: 50px;*/
|
|
|
+ },
|
|
|
+ data(vm) {
|
|
|
+ return {
|
|
|
+ answerImg: null,
|
|
|
+ vm: vm,
|
|
|
+ tabName: 'exercise',
|
|
|
+ editorContent: "",
|
|
|
+ examInfo: [],
|
|
|
+ editor: null,
|
|
|
+ markStatus: false,
|
|
|
+ markBg: ""
|
|
|
}
|
|
|
- .canvas-tools {
|
|
|
- bottom: -50px;
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ async getInfo() {
|
|
|
+ this.examInfo = []
|
|
|
+ this.initEditor()
|
|
|
+ console.error(this.textData)
|
|
|
+ this.answerImg = null
|
|
|
+ if (this.textData.length > 0) {
|
|
|
+ this.examInfo = [...this.textData]
|
|
|
+ if (this.isConnector) {
|
|
|
+ this.answerImg = this.textData[0]
|
|
|
+ } else {
|
|
|
+ this.answerImg = null
|
|
|
+ this.editor.txt.html(this.examInfo[0])
|
|
|
+ }
|
|
|
+ }
|
|
|
+ setTimeout(() => {
|
|
|
+ if (this.isConnector) {
|
|
|
+ this.markBg = ""
|
|
|
+ this.markStuAnswer()
|
|
|
+ }
|
|
|
+ }, 100)
|
|
|
+ },
|
|
|
+ closeModal() {
|
|
|
+ this.markStatus = false
|
|
|
+ this.markBg = ""
|
|
|
+ },
|
|
|
+ saveMark(data) {
|
|
|
+ if (data) {
|
|
|
+ data.height = 400
|
|
|
+ data.width = 400
|
|
|
+ let img = document.createElement('img')
|
|
|
+ img.src = data.base64
|
|
|
+ if (this.isConnector) {
|
|
|
+ this.answerImg = data.base64
|
|
|
+ this.markBg = ''
|
|
|
+ setTimeout(() => {
|
|
|
+ this.markStuAnswer()
|
|
|
+ }, 100)
|
|
|
+ this.$emit("dataGet", data.base64, this.index)
|
|
|
+ this.$Message.success(this.$t('settings.submitSucTips'))
|
|
|
+ } else {
|
|
|
+ this.editor.txt.html(img.outerHTML)
|
|
|
+ }
|
|
|
+ this.markStatus = false
|
|
|
+ }
|
|
|
+ },
|
|
|
+ initEditor() {
|
|
|
+ this.editorContent = ""
|
|
|
+ this.editor = new E("#textArea");
|
|
|
+ this.editor.config.onchange = (html) => {
|
|
|
+ this.editorContent = html;
|
|
|
+ };
|
|
|
+ this.editor.config.showFullScreen = false
|
|
|
+ this.editor.config.menus = [
|
|
|
+ "link", // 插入链接
|
|
|
+ "justify", // 对齐方式
|
|
|
+ "image", // 插入图片
|
|
|
+ ]
|
|
|
+ this.editor.config.zIndex = 1
|
|
|
+ this.editor.config.placeholder = this.$t('studentWeb.exam.inputAnswers')
|
|
|
+ this.editor.config.height = 300
|
|
|
+ this.editor.config.showLinkImg = false;
|
|
|
+ this.editor.config.uploadImgShowBase64 = true; // 使用 base64 保存图片不建议使用这种，我只是图个方便
|
|
|
+ this.$editorTools.addCanvas(this, this.editor)
|
|
|
+ this.editor.config.menus.push('connector')
|
|
|
+ this.$editorTools.addStuBgBtn(this, this.editor)
|
|
|
+ // if (this.itemInfo.type == 'correct' || this.itemInfo.type == 'connector') {
|
|
|
+ // this.editor.config.menus.push('connector')
|
|
|
+ // this.$editorTools.addStuBgBtn(this, this.editor)
|
|
|
+ // } else {
|
|
|
+ // this.$editorTools.addCanvas(this, this.editor)
|
|
|
+ // }
|
|
|
+ let curLang = localStorage.getItem('local') || 'zh-cn'
|
|
|
+ if (curLang === 'zh-tw') {
|
|
|
+ // 自定义语言
|
|
|
+ this.editor.config.languages['tw'] = editor_tw_config
|
|
|
+ // 选择语言
|
|
|
+ this.editor.config.lang = 'tw'
|
|
|
+ // 引入 i18next 插件
|
|
|
+ this.editor.i18next = i18next
|
|
|
+ }
|
|
|
+ if (curLang === 'en-us') {
|
|
|
+ // 自定义语言
|
|
|
+ this.editor.config.languages['en'] = editor_en_config
|
|
|
+ // 选择语言
|
|
|
+ this.editor.config.lang = 'en'
|
|
|
+ // 引入 i18next 插件
|
|
|
+ this.editor.i18next = i18next
|
|
|
+ }
|
|
|
+ this.editor.create();
|
|
|
+ if (this.close) {
|
|
|
+ this.editor.disable()
|
|
|
+ }
|
|
|
+ this.editor.txt.clear()
|
|
|
+ if (this.examInfo.length > 0) {
|
|
|
+ this.editor.txt.html(this.examInfo[0])
|
|
|
+ }
|
|
|
+ },
|
|
|
+ markStuAnswer() {
|
|
|
+ let answerIframe = ''
|
|
|
+ answerIframe = document.getElementById('answerIframe')
|
|
|
+ answerIframe.contentWindow.document.body.style.width = 'fit-content'
|
|
|
+ answerIframe.contentWindow.document.body.style.minWidth = '600px'
|
|
|
+ answerIframe.contentWindow.document.body.style.backgroundColor = '#f5f5f5'
|
|
|
+ console.log(document.getElementById('answerIframe').contentWindow.document)
|
|
|
+ let iframe = document.getElementById('answerIframe').contentWindow.document.getElementsByTagName('p')
|
|
|
+
|
|
|
+ if (iframe.length > 0) {
|
|
|
+ for (let i = 0; i < iframe.length - 1; i++) {
|
|
|
+ iframe[i].style.lineHeight = '50px'
|
|
|
+ iframe[i].style.paddingBottom = '30px'
|
|
|
+ }
|
|
|
+ iframe[iframe.length - 1].style.paddingBottom = '100px'
|
|
|
+ iframe[iframe.length - 1].style.lineHeight = '50px'
|
|
|
+ }
|
|
|
+ html2canvas(answerIframe.contentWindow.document.body).then(canvas => {
|
|
|
+ if(!this.isConnector){
|
|
|
+ this.markStatus = true
|
|
|
+ }
|
|
|
+ this.markBg = canvas.toDataURL("image/png");
|
|
|
+ })
|
|
|
+ },
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ this.initEditor()
|
|
|
+ this.getInfo()
|
|
|
+ // 监听富文本画板功能
|
|
|
+ this.$EventBus.$off('onStuCanvas')
|
|
|
+ this.$EventBus.$on('onStuCanvas', editor => {
|
|
|
+ this.markBg = ""
|
|
|
+ this.markStuAnswer()
|
|
|
+ })
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ isConnector() {
|
|
|
+ return this.itemInfo.type == 'connector' || this.itemInfo.type == 'correct'
|
|
|
}
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ index() {
|
|
|
+ this.getInfo()
|
|
|
+ deep: true
|
|
|
+ immediate: true
|
|
|
+ },
|
|
|
+ editorContent() {
|
|
|
+ this.$emit("dataGet", this.editorContent, this.index)
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+<style scoped>
|
|
|
+.content {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+}
|
|
|
+.connector-wrap /deep/ .demo {
|
|
|
+ justify-content: flex-start !important;
|
|
|
+}
|
|
|
+.textArea {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+}
|
|
|
+.frame {
|
|
|
+ /*height: 100px;*/
|
|
|
+ border: none;
|
|
|
+ position: fixed;
|
|
|
+ height: 0.1px;
|
|
|
+ width: 50%;
|
|
|
+ /*margin-left:10px;*/
|
|
|
+ /*line-height: 50px;*/
|
|
|
+}
|
|
|
+.canvas-tools {
|
|
|
+ bottom: -50px;
|
|
|
+}
|
|
|
</style>
|
