123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259 |
- <template>
- <div class="question-single">
- <div class="exersices-content">
- <IconText :text="'题目'" :color="'#2d8cf0'" :icon="'ios-create'" style="margin-bottom:15px;"></IconText>
- <div ref="singleEditor" style="text-align:left"></div>
- </div>
- <div class="question-option" style="margin-top:20px">
- <IconText :text="'单选选项'" :color="'#FF871C'" :icon="'md-reorder'"></IconText>
- <div v-if="options.length">
- <div v-for="(item,index) in options" :key="index" :ref="'optionBox' + index" class="option-editor-wrap" style="margin-top:10px;display:flex">
- <span class="fl-center option-order">{{String.fromCharCode(64 + parseInt(index+1))}}</span>
- <div :ref="'singleOption'+index" :data-index="index" style="text-align:left" class="qn-option-editor" @click="optionClick(item)"></div>
- <span class="fl-center option-delete" @click="deleteOption(index)">
- <Icon type="md-close" /></span>
- </div>
- </div>
- <p class="option-add"><span @click="addOption()"> + 添加选项 </span></p>
- </div>
- </div>
- </template>
- <script>
- import E from 'wangeditor'
- import IconText from '@/components/evaluation/IconText.vue'
- export default {
- components: {
- IconText
- },
- props: ['editInfo'],
- data() {
- return {
- options: [...new Array(4).keys()], // 默认四个选项
- existOptions: [...new Array(4).keys()],
- initFlag: true,
- trueIndex: 0,
- editSingleInfo: {},
- stemEditor: null,
- stemContent: '',
- optionsContent: [],
- optionEditors: [],
- }
- },
- created() {},
- methods: {
- resetContent() {
- console.log('重置')
- this.options = [...new Array(4).keys()],
- this.optionsContent = []
- this.optionEditors.forEach(i => {
- i.txt.clear()
- })
- this.stemEditor.txt.clear()
- },
- initEditors() {
- // Editor默认配置
- if (this.options.length > 0) {
- this.options.forEach((item, i) => {
- let that = this
- let editor = new E(that.$refs['singleOption' + i][0])
-
- this.$editorTools.initSimpleEditor(editor)
- // 选项编辑器失焦隐藏工具栏
- editor.config.onblur = function() {
- let allToolbars = document.getElementsByClassName('qn-option-editor')
- for (let i = 0; i < allToolbars.length; i++) {
- if (allToolbars[i].children.length) {
- allToolbars[i].children[0].style.visibility = 'hidden'
- }
- }
- }
- // 选项编辑器内容发生变化时
- editor.config.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()
- this.optionEditors.push(editor)
- that.$refs["singleOption" + i][0].dataset.editorId = editor.id
- // 如果是编辑状态 则将选项内容回显
- if (Object.keys(this.editSingleInfo).length > 0) {
- editor.txt.html(this.editSingleInfo.option[i].value)
- }
- })
- }
- },
- onRichTextClick(e) {
- this.$parent.onRichTextClick(e)
- },
- // 添加选项
- addOption() {
- let that = this
- let wraps = Array.from(document.getElementsByClassName('qn-option-editor'))
- let optionsLength = wraps.length;
- let newIndex = parseInt(this.options[this.options.length - 1]) + 1
- if (optionsLength < 9) {
- this.options.push(newIndex)
- this.optionsContent.push({
- code: String.fromCharCode(64 + parseInt(newIndex + 1)),
- value: ''
- })
- this.$nextTick(() => {
- let editor = new E(that.$refs['singleOption' + newIndex][0])
- this.$editorTools.initSimpleEditor(editor)
- editor.config.onchange = (html) => {
- let key = String.fromCharCode(64 + parseInt(newIndex + 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()
- this.optionEditors.push(editor);
- this.$refs["singleOption" + newIndex][0].dataset.editorId = editor.id
- this.refreshOrder()
- })
- } else {
- this.$Message.warning('最多只有9个选项!')
- }
- },
-
- /* 根据页面上的选项DOM数量,刷新每个选项的Order显示 */
- refreshOrder() {
- let wraps = Array.from(document.getElementsByClassName('option-order'))
- wraps.forEach((item, index) => {
- item.innerHTML = this.renderIndex(index)
- })
- },
-
- /* 根据下标渲染对应的字母顺序 */
- renderIndex(index) {
- return String.fromCharCode(64 + parseInt(index + 1))
- },
-
- // 删除选项
- deleteOption(index) {
- let wraps = Array.from(document.getElementsByClassName('qn-option-editor'))
- if (wraps.length > 2) {
- this.optionsContent.splice(index, 1)
- let textWrap = this.$refs['optionBox' + index][0]
- textWrap.remove()
-
- this.refreshOrder()
- } else {
- this.$Message.warning('至少保留两个选项!')
- }
-
- },
-
- // 保存试题 获取最新选项数据
- doSave(){
- // 拿到当前还剩的选项DOM
- let wraps = Array.from(document.getElementsByClassName('qn-option-editor'))
- let arr = []
- console.log(wraps)
- wraps.forEach((item,index) => {
- // 遍历选项 找到对应的 Editor 然后获取编辑器里面的内容
- let id = item.dataset.editorId
- let curEditor = this.optionEditors.filter(i => i.id === id)[0]
- // 生成新的选项对象
- let obj = {
- code:String.fromCharCode(64 + parseInt(index + 1)),
- value:curEditor.txt.html()
- }
- arr.push(obj)
- })
- this.$emit('onSave',{
- stemContent:this.stemContent,
- optionsContent:arr
- })
- },
- // 模拟选项聚焦事件
- 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]
- if(currentToolBar.clientHeight > 50){
- currentToolBar.style.top = '-90px'
- }
- currentToolBar.style.visibility = 'visible'
- }, 100)
- },
- },
- mounted() {
- let stemEditor = new E(this.$refs.singleEditor)
- stemEditor.config.onchange = (html) => {
- this.stemContent = html
- }
- this.$editorTools.addVideoUpload(this, stemEditor)
- this.$editorTools.addAudio(this, stemEditor)
- this.$editorTools.initMyEditor(stemEditor)
- this.$editorTools.initSimpleEditor(stemEditor)
- stemEditor.create()
- this.stemEditor = stemEditor
- this.initEditors()
- if (this.editInfo && this.editInfo.question) {
- console.log('进入单选题Mounted编辑')
- this.editSingleInfo = JSON.parse(JSON.stringify(this.editInfo))
- this.stemContent = this.editSingleInfo.question
- this.optionsContent = this.editSingleInfo.option
- this.options = this.editSingleInfo.option.map((item, index) => index)
- this.$nextTick(() => {
- this.initEditors()
- this.stemEditor.txt.html(this.editSingleInfo.question)
- })
- }
- },
- watch: {
- editInfo: {
- handler(newValue, oldValue) {
- if (newValue) {
- console.log('单选接收到的数据')
- console.log(newValue)
- this.editSingleInfo = JSON.parse(JSON.stringify(newValue))
- if (Object.keys(newValue).length > 0) {
- this.stemContent = this.editSingleInfo.question
- this.optionsContent = this.editSingleInfo.option
- this.options = this.editSingleInfo.option.map((item, index) => index)
- this.$nextTick(() => {
- this.initEditors()
- this.stemEditor.txt.html(this.editSingleInfo.question)
- })
- }
- }
- },
- // immediate:true
- },
- }
- }
- </script>
- <style lang="less">
- @import(reference) "./BaseSingle.less";
- </style>
|