作业支持多道简答题

client/src/components/editor.vue

+<template>
+  <div class="editor">
+    <textarea name="editor" :id="textareaElementId" :disabled="disabled"></textarea>
+  </div>
+</template>
+
+<script>
+import { uniqueId } from 'lodash'
+export default {
+  name: 'VEditor',
+  props: {
+    value: { type: String },
+    disabled: { type: Boolean, default: false }
+  },
+  data() {
+    return {
+      textareaElementId: uniqueId('editor_'),
+      ckEditor: null
+    }
+  },
+  methods: {
+    createEditor() {
+      const editor = (this.ckEditor = CKEDITOR.replace(this.textareaElementId, {
+        height: 400,
+        uiColor: '#eeeeee',
+        filebrowserImageUploadUrl: '/api/ckeditor/img/upload',
+        // resize_enabled: typeof this.props.resizable === 'boolean' ? this.props.resizable : true,
+        toolbar: [
+          // { name: 'document', items: ['Source', '-', 'Save', 'NewPage', 'Preview'] },
+          { name: 'styles', items: ['Styles', 'Format', 'Font', 'FontSize'] },
+          { name: 'colors', items: ['TextColor', 'BGColor'] },
+          { name: 'tools', items: ['Maximize', 'ShowBlocks'] },
+          // { name: 'clipboard', items: ['Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord', '-', 'Undo', 'Redo'] },
+          { name: 'editing', items: ['Find', 'Replace'] },
+          // { name: 'forms', items: ['Form', 'Checkbox', 'Radio', 'TextField', 'Textarea', 'Select', 'Button', 'ImageButton', 'HiddenField'] },
+          '/',
+          {
+            name: 'basicstyles',
+            items: [
+              'Bold',
+              'Italic',
+              'Underline',
+              'Strike',
+              'Subscript',
+              'Superscript',
+              '-',
+              'RemoveFormat'
+            ]
+          },
+          {
+            name: 'paragraph',
+            items: [
+              'NumberedList',
+              'BulletedList',
+              '-',
+              'Outdent',
+              'Indent',
+              '-',
+              'Blockquote',
+              'CreateDiv',
+              '-',
+              'JustifyLeft',
+              'JustifyCenter',
+              'JustifyRight',
+              'JustifyBlock',
+              '-',
+              'BidiLtr',
+              'BidiRtl'
+            ]
+          },
+          { name: 'links', items: ['Link', 'Unlink', 'Anchor'] },
+          { name: 'insert', items: ['Image', 'Table', 'HorizontalRule'] }
+        ]
+      }))
+      editor.on('instanceReady', () => {
+        const data = this.value
+
+        editor.fire('lockSnapshot')
+
+        editor.setData(data, {
+          callback: () => {
+            this.bindEvent()
+
+            const newData = editor.getData()
+            // Locking the snapshot prevents the 'change' event.
+            // Trigger it manually to update the bound data.
+            if (data !== newData) {
+              this.$once('input', () => {
+                this.$emit('ready', editor)
+              })
+
+              this.$emit('input', newData)
+            } else {
+              this.$emit('ready', editor)
+            }
+
+            editor.fire('unlockSnapshot')
+          }
+        })
+      })
+    },
+    bindEvent() {
+      const editor = this.ckEditor
+      editor.on('change', evt => {
+        const data = editor.getData()
+        if (this.value !== data) {
+          this.$emit('input', data, evt, editor)
+        }
+      })
+
+      editor.on('focus', evt => {
+        this.$emit('focus', evt, editor)
+      })
+
+      editor.on('blur', evt => {
+        this.$emit('blur', evt, editor)
+      })
+    }
+  },
+  mounted() {
+    this.createEditor()
+  },
+  beforeDestroy() {
+    this.ckEditor && this.ckEditor.destroy()
+    this.ckEditor = null
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+* {
+  margin: 0;
+  padding: 0;
+}
+</style>

client/src/components/upload.vue

+<template>
+  <div class="upload">
+    <el-upload action :show-file-list="false" :http-request="httpRequest">
+      <slot></slot>
+      <el-button type="text" size="small" icon="el-icon-upload">点击上传</el-button>
+      <template v-slot:tip>
+        <div class="el-upload__tips">
+          <slot name="tip"></slot>
+        </div>
+      </template>
+    </el-upload>
+    <div class="file-list" v-if="value">
+      <div class="file-list-item">
+        <a :href="value" target="_blank">
+          <i class="el-icon-document"></i>
+          {{ fileName }}
+        </a>
+        <a :href="value" :download="fileName" target="_blank">
+          <el-tooltip effect="dark" content="下载">
+            <i class="el-icon-download"></i>
+          </el-tooltip>
+        </a>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import cAction from '@action'
+
+export default {
+  name: 'VUpload',
+  props: {
+    value: { type: String }
+  },
+  data() {
+    return {}
+  },
+  computed: {
+    fileName() {
+      return this.value ? this.value.split('/').pop() : ''
+    }
+  },
+  methods: {
+    httpRequest(xhr) {
+      cAction.Player.uploadFile({ file: xhr.file })
+        .then(response => {
+          if (response.success) {
+            this.$emit('input', response.url)
+          }
+        })
+        .catch(error => {
+          console.log(error)
+        })
+    },
+    handleRemove() {
+      this.$emit('input', '')
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.file-list-item {
+  display: flex;
+  margin-bottom: 10px;
+  padding: 0 10px;
+  justify-content: space-between;
+  line-height: 30px;
+  background-color: #fff;
+  border-radius: 4px;
+
+  a {
+    text-decoration: none;
+    color: #333;
+    &:hover {
+      color: #b49441;
+    }
+  }
+}
+</style>