|
|
@@ -1,235 +0,0 @@
|
|
|
-<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">
|
|
|
- <div class="option-editor-wrap" v-show="(curType !== 'judge') || (curType === 'judge' && item < 2)">
|
|
|
- <!-- 选项序号 -->
|
|
|
- <div class="option-order">
|
|
|
- <span>{{ index + 1 }}</span>
|
|
|
- <span class="btn-delete" @click="deleteOption(index)" v-show="curType !== 'judge'">
|
|
|
- <Icon type="md-trash" size="24" color="#fff" /></span>
|
|
|
- </div>
|
|
|
- <!-- 选项编辑器 -->
|
|
|
- <div :ref="'singleOption' + item " style="text-align:left" class="option-editor" @click="optionClick(item)"></div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
- </div>
|
|
|
-</template>
|
|
|
-<script>
|
|
|
- import E from '@/utils/wangEditor.js'
|
|
|
- export default {
|
|
|
- props: ['type','editItem'],
|
|
|
- data() {
|
|
|
- return {
|
|
|
- options: [],
|
|
|
- trueIndex: 0,
|
|
|
- curType: '',
|
|
|
- editInfo: {},
|
|
|
- stemEditor: null,
|
|
|
- stemContent: '',
|
|
|
- isChange:false,
|
|
|
- optionsContent: [],
|
|
|
- optionEditors:[],
|
|
|
- existEditors:[],
|
|
|
- defaultConfig: {
|
|
|
- uploadImgServer: '/api/file/uploadWangEditor', // 图片上传地址
|
|
|
- showLinkImg: false, // 是否展示网络图片链接上传
|
|
|
- uploadFileName: 'files', // 上传图片后台获取的文件名
|
|
|
- menus: this.$tools.wangEditorMenu
|
|
|
- }
|
|
|
- }
|
|
|
- },
|
|
|
- created() {
|
|
|
-
|
|
|
- },
|
|
|
- methods: {
|
|
|
- initEditors() {
|
|
|
- console.log('进了initEditors')
|
|
|
- console.log(this.options)
|
|
|
- console.log(this.optionsContent)
|
|
|
- console.log(this.optionEditors)
|
|
|
- console.log(document.getElementsByClassName('option-editor').length)
|
|
|
- // Editor默认配置
|
|
|
- if (this.options.length > 0) {
|
|
|
- this.$nextTick(() => {
|
|
|
- this.options.forEach((item, i) => {
|
|
|
- let that = this
|
|
|
- if(i >= this.optionEditors.length){
|
|
|
- let editor = new E(that.$refs['singleOption' + i][0])
|
|
|
- editor.customConfig = this.defaultConfig
|
|
|
-
|
|
|
- // 选项编辑器失焦隐藏工具栏
|
|
|
- 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.onchange = (html) => {
|
|
|
- let key = String.fromCharCode(64 + parseInt(i + 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 { // 否则创建新选项
|
|
|
- this.optionsContent.push({
|
|
|
- code: key,
|
|
|
- value: html
|
|
|
- })
|
|
|
- }
|
|
|
- }
|
|
|
- editor.create()
|
|
|
-
|
|
|
- this.optionEditors.push(editor)
|
|
|
- }else{
|
|
|
- this.optionEditors[i].txt.clear()
|
|
|
- // 如果是编辑状态 则将选项内容回显
|
|
|
- if (this.editItem && Object.keys(this.editItem).length > 0) {
|
|
|
- this.optionEditors[i].txt.html(this.editItem.option[i].value)
|
|
|
- }
|
|
|
- }
|
|
|
- })
|
|
|
- })
|
|
|
- }
|
|
|
- },
|
|
|
- onAddNew(){
|
|
|
- this.isChange = false
|
|
|
- console.log('打开窗口')
|
|
|
- this.options = []
|
|
|
- this.optionsContent = []
|
|
|
- this.resetContent()
|
|
|
- },
|
|
|
- // 添加选项
|
|
|
- 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.optionsContent = []
|
|
|
- this.stemContent = ''
|
|
|
- this.stemEditor.txt.clear()
|
|
|
- this.optionEditors.forEach(i => {
|
|
|
- i.txt.clear()
|
|
|
- })
|
|
|
- this.isChange = true
|
|
|
- },
|
|
|
-
|
|
|
- // 渲染编辑试题的内容
|
|
|
- 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
|
|
|
- console.log('进题型了')
|
|
|
- this.curType = newValue
|
|
|
- this.options = newValue === 'judge' ? [0,1] : [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