|
|
@@ -0,0 +1,213 @@
|
|
|
+<template>
|
|
|
+ <div>
|
|
|
+ <div class="exersices-box">
|
|
|
+ <p class="title">题干</p>
|
|
|
+ <!-- 题干富文本 -->
|
|
|
+ <div ref="singleEditor" style="text-align:left"></div>
|
|
|
+ <!-- 选项富文本 -->
|
|
|
+ <p class="title">
|
|
|
+ <span>选项</span>
|
|
|
+ <span @click="addOption" class="btn-add-option" v-show="curType !== 'judge'">添加选项</span>
|
|
|
+ </p>
|
|
|
+ <div class="option-editors" id="optionEditors">
|
|
|
+ <div v-for="(item,index) in options" :key="index" :class="'editor-wrap-'+item" style="margin-top:10px;display:flex">
|
|
|
+ <span class="fl-center option-editor-wrap">{{String.fromCharCode(64 + parseInt(index+1))}}</span>
|
|
|
+ <div :ref="'singleOption'+item" style="text-align:left" class="option-editor" @click="optionClick(item)"></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+<script>
|
|
|
+ import E from '@/utils/wangEditor.js'
|
|
|
+ export default {
|
|
|
+ props: ['type','editItem'],
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ options: [0,1,2,3],
|
|
|
+ trueIndex: 0,
|
|
|
+ curType: '',
|
|
|
+ editInfo: {},
|
|
|
+ stemEditor: null,
|
|
|
+ stemContent: '',
|
|
|
+ optionsContent: [],
|
|
|
+ optionEditors:[],
|
|
|
+ existEditors:[],
|
|
|
+ defaultConfig: {
|
|
|
+ uploadImgServer: '/api/file/uploadWangEditor', // 图片上传地址
|
|
|
+ showLinkImg: false, // 是否展示网络图片链接上传
|
|
|
+ uploadFileName: 'files', // 上传图片后台获取的文件名
|
|
|
+ menus: this.$tools.wangEditorMenu
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ initEditors() {
|
|
|
+ // Editor默认配置
|
|
|
+ if (this.options.length > 0) {
|
|
|
+ this.options.forEach((item, i) => {
|
|
|
+ let that = this
|
|
|
+ let editor = new E(that.$refs['singleOption' + i][0])
|
|
|
+ editor.customConfig = this.defaultConfig
|
|
|
+ editor.customConfig.uploadVideoDisable = true,
|
|
|
+ // editor.customConfig.zIndex = 100
|
|
|
+
|
|
|
+ // 选项编辑器失焦隐藏工具栏
|
|
|
+ editor.customConfig.onblur = function () {
|
|
|
+ let allToolbars = document.getElementsByClassName('option-editor')
|
|
|
+ for (let i = 0; i < allToolbars.length; i++) {
|
|
|
+ if (allToolbars[i].children.length) {
|
|
|
+ allToolbars[i].children[0].style.visibility = 'hidden'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ editor.customConfig.onVideoWarning = (text) => {
|
|
|
+ this.$Message.warning(text)
|
|
|
+ },
|
|
|
+
|
|
|
+ // 选项编辑器内容发生变化时
|
|
|
+ editor.customConfig.onchange = (html) => {
|
|
|
+ let key = String.fromCharCode(64 + parseInt(i + 1))
|
|
|
+ let codeArr = this.optionsContent.map(item => item.code)
|
|
|
+ // 如果已经编辑过则 修改选项内容
|
|
|
+ if (codeArr.indexOf(key) !== -1) {
|
|
|
+ this.optionsContent[codeArr.indexOf(key)].value = html
|
|
|
+ } else { // 否则创建新选项
|
|
|
+ let option = {
|
|
|
+ code: key,
|
|
|
+ value: html
|
|
|
+ }
|
|
|
+ this.optionsContent.push(option)
|
|
|
+ }
|
|
|
+ }
|
|
|
+ editor.create()
|
|
|
+
|
|
|
+ // 如果是编辑状态 则将选项内容回显
|
|
|
+ if (this.editItem && Object.keys(this.editItem).length > 0) {
|
|
|
+ editor.txt.html(this.editItem.option[i].value)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 添加选项
|
|
|
+ addOption() {
|
|
|
+ let that = this
|
|
|
+ let newIndex = parseInt(this.options[this.options.length - 1]) + 1
|
|
|
+ let optionsLength = this.options.length
|
|
|
+ if (optionsLength < 9) {
|
|
|
+ this.options.push(newIndex)
|
|
|
+ this.$nextTick(() => {
|
|
|
+ let editor = new E(that.$refs['singleOption' + newIndex][0])
|
|
|
+ editor.customConfig = this.defaultConfig
|
|
|
+
|
|
|
+ editor.customConfig.onchange = (html) => {
|
|
|
+ let key = String.fromCharCode(64 + parseInt(newIndex + 1))
|
|
|
+ let codeArr = this.optionsContent.map((item,index) => String.fromCharCode(64 + parseInt(index + 1)))
|
|
|
+ // 如果已经编辑过则 修改选项内容
|
|
|
+ if (codeArr.indexOf(key) !== -1) {
|
|
|
+ this.optionsContent[codeArr.indexOf(key)].value = html
|
|
|
+ } else { // 否则创建新选项
|
|
|
+ let option = {
|
|
|
+ code: key,
|
|
|
+ value: html
|
|
|
+ }
|
|
|
+ this.optionsContent.push(option)
|
|
|
+ }
|
|
|
+ console.log(this.optionsContent)
|
|
|
+ }
|
|
|
+ editor.create()
|
|
|
+ })
|
|
|
+ } else {
|
|
|
+ this.$Message.warning('最多只有9个选项！')
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 删除选项
|
|
|
+ deleteOption(index) {
|
|
|
+ console.log(index)
|
|
|
+ if (this.options.length > 2) {
|
|
|
+ this.options.splice(index, 1)
|
|
|
+ this.optionsContent.splice(index, 1)
|
|
|
+ } else {
|
|
|
+ this.$Message.warning('至少保留两个选项！')
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 模拟选项聚焦事件
|
|
|
+ optionClick(index) {
|
|
|
+ let allToolbars = document.getElementsByClassName('option-editor')
|
|
|
+ let that = this
|
|
|
+ for (let i = 0; i < allToolbars.length; i++) {
|
|
|
+ allToolbars[i].children[0].style.visibility = 'hidden'
|
|
|
+ }
|
|
|
+ setTimeout(function() {
|
|
|
+ let currentToolBar = that.$refs['singleOption' + index][0].children[0]
|
|
|
+ currentToolBar.style.visibility = 'visible'
|
|
|
+ }, 100)
|
|
|
+ },
|
|
|
+ // 置空内容
|
|
|
+ resetContent(){
|
|
|
+ this.options = [0,1,2,3]
|
|
|
+ this.stemEditor.txt.clear()
|
|
|
+ this.optionEditors.forEach(i => {
|
|
|
+ i.txt.clear()
|
|
|
+ })
|
|
|
+
|
|
|
+ },
|
|
|
+
|
|
|
+ // 渲染编辑试题的内容
|
|
|
+ doRender(item){
|
|
|
+ let newValue = JSON.parse(JSON.stringify(item))
|
|
|
+ this.stemEditor.txt.html(newValue.question)
|
|
|
+ this.stemContent = newValue.question
|
|
|
+ this.optionsContent = newValue.option
|
|
|
+ this.options = newValue.option.map((item, index) => index)
|
|
|
+ this.$nextTick(() => {
|
|
|
+ this.initEditors()
|
|
|
+ })
|
|
|
+ }
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ let stemEditor = new E(this.$refs.singleEditor)
|
|
|
+ stemEditor.customConfig = this.defaultConfig
|
|
|
+ stemEditor.customConfig.onchange = (html) => {
|
|
|
+ this.stemContent = html
|
|
|
+ }
|
|
|
+ stemEditor.create()
|
|
|
+ this.stemEditor = stemEditor
|
|
|
+ // this.$nextTick(() => {
|
|
|
+ // this.initEditors()
|
|
|
+ // })
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ type: {
|
|
|
+ handler(newValue) {
|
|
|
+ if (!newValue) return
|
|
|
+ this.curType = newValue
|
|
|
+ this.options = [0,1,2,3]
|
|
|
+ this.optionsContent = []
|
|
|
+ this.$nextTick(() => {
|
|
|
+ this.initEditors()
|
|
|
+ })
|
|
|
+ }
|
|
|
+ },
|
|
|
+ editItem: {
|
|
|
+ handler(newValue) {
|
|
|
+ if (!newValue) return
|
|
|
+ this.doRender(newValue)
|
|
|
+ },
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="less">
|
|
|
+ @import "./BaseAddItem.less";
|
|
|
+</style>
|
OnePsycho