From 56cdf07f8496685ba906ea75e7eb2faebb35371b Mon Sep 17 00:00:00 2001 From: 闫增涛 <1829501689@qq.com> Date: 星期三, 06 十一月 2024 17:04:11 +0800 Subject: [PATCH] 加入富文本编辑器 --- src/components/examinations/index.vue | 73 +++++++++++++++++++----------------- 1 files changed, 38 insertions(+), 35 deletions(-) diff --git a/src/components/examinations/index.vue b/src/components/examinations/index.vue index 4cdcd5c..095c41d 100644 --- a/src/components/examinations/index.vue +++ b/src/components/examinations/index.vue @@ -12,7 +12,7 @@ <span v-if="nindex == 2">涓夈��</span> <span v-if="nindex == 3">鍥涖��</span> <span v-if="nindex == 4">浜斻��</span> - <span v-html="item.catalogName" ></span> + <span v-html="item.catalogName"></span> </p> <el-image v-if="item.catalogImage" :src="item.catalogImage"></el-image> <ul> @@ -37,12 +37,13 @@ <p class="titleText text-fl" v-if=" - value.stemStyle == 'Txt' && value.questionType != 'completion' && value.questionType !='dropdown' + value.stemStyle == 'Txt' && + value.questionType != 'completion' && + value.questionType != 'dropdown' " :id="value.id" v-html="value.stem.stemTxt" - > - </p> + ></p> <!-- 浠呭浘鐗� --> <el-image class="stemImg" @@ -55,8 +56,7 @@ class="stemTxtAndImage titleText" v-else-if="value.stemStyle == 'TxtAndImage'" > - <span v-html="value.stem.stemTxt"> - </span> + <span v-html="value.stem.stemTxt"> </span> <el-image :src="getPublicImage(value.stem.stemImage, 150)" :preview-src-list="[getPublicImage(value.stem.stemImage)]" @@ -103,12 +103,12 @@ class="input-txt" ></span> <el-select - v-else - v-model="value.userAnswer" + v-else + v-model="value.userAnswer" :disabled="value.isComplete" > - <el-option - v-for="(citem,cindex) in value.option" + <el-option + v-for="(citem, cindex) in value.option" :key="cindex + 'dropdown'" :label="citem" :value="citem" @@ -238,17 +238,16 @@ </el-checkbox> </el-checkbox-group> <!-- 绠�绛� 缈昏瘧 --> - <!-- <TEditorVue - v-else-if="value.questionType == 'shortAnswer'" - :value="value.userAnswer" - :disabled="value.isComplete" - @getContent=" - (val) => { - value.userAnswer = val.trim(); - inputChange(); - } - " - ></TEditorVue> --> + <TEditorVue + v-else-if="value.questionType == 'formula'" + :value="value.userAnswer" + :disabled="value.isComplete" + @getContent=" + (val) => { + value.userAnswer = val; + } + " + /> <el-input :disabled="value.isComplete" style="width: 94%; margin: 0 auto" @@ -276,7 +275,10 @@ <el-collapse v-model="value.isUnfold" accordion - v-if="value.questionType != 'shortAnswer'" + v-if=" + value.questionType != 'shortAnswer' || + value.questionType != 'formula' + " > <el-collapse-item :name="value.id" class="objective"> <template #title> @@ -512,8 +514,10 @@ <script> import { Message } from "element-ui"; +import TEditorVue from "../teditor/index.vue"; export default { name: "examination-option", + components: { TEditorVue }, props: { cardList: { type: Array, @@ -592,12 +596,12 @@ methods: { // 鑾峰彇涓嶅彈淇濇姢鐨勫浘鐗� getPublicImage(md5, width, height) { - if(!md5) return - if(md5.includes('http')) return md5 + if (!md5) return; + if (md5.includes("http")) return md5; let src = null; if (md5) { src = process.env.VUE_APP_API_URL + `/file/GetPreViewImage?md5=${md5}`; - } + } if (width) src += `&width=${width}`; if (height) src += `&height=${height}`; return src; @@ -682,8 +686,8 @@ } } else if ( citem.questionType == "singleChoice" || - citem.questionType == "judge" || - citem.questionType == 'dropdown' + citem.questionType == "judge" || + citem.questionType == "dropdown" ) { citem.isRight = citem.answer == citem.userAnswer; } else if (citem.questionType == "shortAnswer") { @@ -893,11 +897,10 @@ }; </script> - -<style lang="less" > - .titleText img { - max-width: 80%; - } +<style lang="less"> +.titleText img { + max-width: 80%; +} </style> <style lang="less" scoped> @@ -1042,9 +1045,9 @@ font-weight: bold; } .text-fl { - display:flex; - align-items:center; - flex-wrap:wrap; + display: flex; + align-items: center; + flex-wrap: wrap; } .titleText { text-align: left; -- Gitblit v1.9.1