yks-element 1.0.4 → 1.0.5

package/packages/Tinymce/src/index.vue

@@ -1,450 +0,0 @@
-<template>
-    <div
-        :class="{ 'yks-fullscreen': fullscreen }"
-        class="yks-tinymce-container"
-        :style="{ width: containerWidth }"
-    >
-        <TinymceEditor
-            :id="tinymceId"
-            ref="tinymceEditor"
-            :key="tinymceId"
-            v-model="tinymceContent"
-            :init="initOptions"
-            :class="{ 'tinymce-inline': inline }"
-        />
-        <div v-if="fileParams.length !== 0" class="ti-multimedia">
-            <div
-                v-for="(values, index) in fileParams"
-                :key="`fileParams${index}${Math.random()}`"
-                class="media-file"
-            >
-                <yks-multimedia
-                    :data="values"
-                    visibleDel
-                    @delete="handleCloseFile(values, index)"
-                ></yks-multimedia>
-            </div>
-        </div>
-        <yks-uploadfile
-            :show.sync="show"
-            :fileData="fileData"
-            :title="title"
-            :uploadFileFunction="uploadFileFunction"
-            @sure="onSure"
-        ></yks-uploadfile>
-    </div>
-</template>
-
-<script>
-// Docs: https://armour.github.io/vue-typescript-admin-docs/features/components/rich-editor.html#tinymce
-import 'tinymce/tinymce'
-import 'tinymce/themes/silver' // Import themes
-import 'tinymce/themes/mobile'
-import 'tinymce/plugins/advlist' // Any plugins you want to use has to be imported
-import 'tinymce/plugins/anchor'
-import 'tinymce/plugins/autolink'
-import 'tinymce/plugins/autosave'
-import 'tinymce/plugins/charmap'
-import 'tinymce/plugins/code'
-import 'tinymce/plugins/codesample'
-import 'tinymce/plugins/directionality'
-import 'tinymce/plugins/emoticons'
-import 'tinymce/plugins/fullscreen'
-import 'tinymce/plugins/hr'
-import 'tinymce/plugins/image'
-import 'tinymce/plugins/imagetools'
-import 'tinymce/plugins/insertdatetime'
-import 'tinymce/plugins/link'
-import 'tinymce/plugins/lists'
-import 'tinymce/plugins/media'
-import 'tinymce/plugins/nonbreaking'
-import 'tinymce/plugins/noneditable'
-import 'tinymce/plugins/pagebreak'
-import 'tinymce/plugins/paste'
-import 'tinymce/plugins/preview'
-import 'tinymce/plugins/print'
-import 'tinymce/plugins/save'
-import 'tinymce/plugins/searchreplace'
-import 'tinymce/plugins/spellchecker'
-import 'tinymce/plugins/tabfocus'
-import 'tinymce/plugins/table'
-import 'tinymce/plugins/template'
-import 'tinymce/plugins/textpattern'
-import 'tinymce/plugins/visualblocks'
-import 'tinymce/plugins/visualchars'
-import 'tinymce/plugins/wordcount'
-import 'yks/icon/default'
-import TinymceEditor from '@tinymce/tinymce-vue' // TinyMCE vue wrapper
-// eslint-disable-next-line no-duplicate-imports
-import tinymce from 'tinymce/tinymce'
-import { uploadAudio, uploadVideo, uploadFile, uploadRecording, plugins, toolbar } from './config'
-
-import { Loading } from 'element-ui'
-
-export default {
-    name: 'YksTinymce',
-    components: {
-        TinymceEditor
-    },
-    props: {
-        value: {
-            required: true
-        },
-        /* 语言包 */
-        language: {
-            type: String,
-            default: 'zh_CN'
-        },
-        /* 扩展bar */
-        toolbar: {
-            type: [String, Array],
-            default: () => []
-        },
-        /* 字数限制 */
-        charLimit: {
-            type: Number,
-            default: 5000
-        },
-        /* 插件 */
-        plugins: {
-            type: [String, Array],
-            default: () => []
-        },
-        menubar: {
-            type: String,
-            default: 'file edit insert view format table'
-        },
-        height: {
-            type: String,
-            default: '660px'
-        },
-        width: {
-            type: String,
-            default: 'auto'
-        },
-        inline: {
-            type: Boolean,
-            default: false
-        },
-        /* 音视频数据 */
-        fileParams: {
-            type: Array,
-            default: () => []
-        },
-        /* 
-            上传文件函数
-            抛出blobInfo函数
-            接收data src
-        */
-        uploadFileToHwCloud: {
-            required: true,
-            type: Function
-        },
-        /* 
-            上传音视频文件函数
-            抛出数组文件信息
-            接收data src
-        */
-        uploadFileFunction: {
-            required: true,
-            type: Function
-        },
-        /* 扩展插件 */
-        externalPlugins: {
-            type: Object,
-            default: () => {
-                return {}
-            }
-        }
-    },
-    data() {
-        return {
-            hasChange: false,
-            hasInit: false,
-            fullscreen: false,
-            isComposition: false,
-            show: false,
-            fileData: {
-                fileType: '',
-                typeList: [],
-                fileSize: 0
-            },
-            limitNum: 0
-        }
-    },
-    computed: {
-        tinymceContent: {
-            get() {
-                return this.value
-            },
-            set(value) {
-                this.$emit('input', value)
-            }
-        },
-        containerWidth() {
-            const width = this.width
-            // Test matches `100`, `'100'`
-            if (/^[\d]+(\.[\d]+)?$/.test(width.toString())) {
-                return `${width}px`
-            }
-            return width
-        },
-        title() {
-            const params = {
-                recording: '音频录制',
-                video: '视频上传',
-                audio: '音频上传',
-                file: '文件上传'
-            }
-            return params[this.fileData.fileType]
-        },
-        mediaTypeList() {
-            return this.fileParams.map((v) => v.fileType)
-        },
-        initOptions() {
-            return {
-                selector: `#${this.tinymceId}`,
-                height: this.height,
-                charLimit: this.charLimit,
-                body_class: 'panel-body ',
-                object_resizing: false,
-                inline: this.inline,
-                toolbar: this.toolbar.length > 0 ? this.toolbar : toolbar,
-                menubar: this.menubar,
-                plugins: this.plugins.length > 0 ? this.plugins : plugins,
-                language: this.language,
-                language_url: `https://pub-static.yks365.net/assets/tinymce/langs/${this.language}.js`,
-                skin_url: 'https://pub-static.yks365.net/assets/tinymce/skins',
-                emoticons_database_url:
-                    'https://pub-static.yks365.net/assets/tinymce/emojis.min.js',
-                end_container_on_empty_block: true,
-                powerpaste_word_import: 'clean',
-                code_dialog_height: 450,
-                code_dialog_width: 1000,
-                advlist_bullet_styles: 'square',
-                advlist_number_styles: 'default',
-                imagetools_cors_hosts: ['www.tinymce.com', 'codepen.io'],
-                default_link_target: '_blank',
-                link_title: false,
-                nonbreaking_force_tab: true,
-                branding: false,
-                convert_urls: false,
-                resize: false,
-                elementpath: false,
-                paste_as_text: false,
-                paste_data_image: true,
-                paste_data_images: true,
-                external_plugins: {
-                    ...this.externalPlugins,
-                    powerpaste: `https://pub-static.yks365.net/assets/tinymce/powerpaste/plugin.min.js`,
-                    'kityformula-editor': `https://pub-static.yks365.net/assets/tinymce/kityformula-editor/plugin.min.js`
-                },
-                images_upload_handler: async (blobInfo, success) => {
-                    const loading = Loading.service({
-                        lock: true,
-                        text: '上传中...',
-                        spinner: 'el-icon-loading',
-                        background: 'rgba(0, 0, 0, 0.7)'
-                    })
-
-                    try {
-                        const data = await this.uploadFileToHwCloud(blobInfo)
-                        success(data)
-                    } catch (error) {
-                        console.log(error)
-                        success('')
-                    }
-                    loading.close()
-                },
-                paste_preprocess: (e, args) => {
-                    const tinymax = this.charLimit
-                    const text = this.tinymceContent.replace(/(<([^>]+)>)/gi, '')
-                    const contentOnBlur = args.content.replace(/(<([^>]+)>)/gi, '')
-                    // 粘贴字数限制
-                    if (tinymax - text.length < contentOnBlur.length) {
-                        this.$message.error(`长度限制为${tinymax}个字符`)
-                        this.limitNum++
-                        if (tinymax > text.length) {
-                            args.content = contentOnBlur.substr(0, tinymax - text.length)
-                        } else {
-                            args.content = ''
-                        }
-                    }
-                },
-                init_instance_callback: (editor) => {
-                    if (this.value) {
-                        editor.setContent(this.value)
-                    }
-                    this.hasInit = true
-                    editor.on('NodeChange Change KeyUp SetContent', () => {
-                        this.hasChange = true
-                        this.$emit('input', editor.getContent())
-                    })
-                },
-                setup: (editor) => {
-                    editor.on('FullscreenStateChanged', (e) => {
-                        this.fullscreen = e.state
-                    })
-                    editor.on('compositionstart', () => {
-                        this.isComposition = false
-                    })
-                    editor.on('compositionend', () => {
-                        this.isComposition = true
-                    })
-                    editor.on('input', (e) => {
-                        this.wordLimit(e, editor)
-                    })
-
-                    editor.ui.registry.addButton('uploadRecording', {
-                        text: uploadRecording,
-                        onAction: () => {
-                            if (this.mediaTypeList.includes('recording')) {
-                                this.$message.warning('最多选择一种！')
-                                return
-                            }
-                            this.show = true
-                            this.fileData.fileType = 'recording'
-                            this.fileData.typeList = []
-                            this.fileData.fileSize = 600
-                        }
-                    })
-
-                    editor.ui.registry.addButton('uploadVideo', {
-                        text: uploadVideo,
-                        onAction: () => {
-                            if (this.mediaTypeList.includes('video')) {
-                                this.$message.warning('最多选择一种！')
-                                return
-                            }
-                            this.fileData.fileType = 'video'
-                            this.fileData.typeList = ['mp4']
-                            this.fileData.fileSize = 20
-                            this.show = true
-                        }
-                    })
-
-                    editor.ui.registry.addButton('uploadAudio', {
-                        text: uploadAudio,
-                        onAction: () => {
-                            if (this.mediaTypeList.includes('audio')) {
-                                this.$message.warning('最多选择一种！')
-                                return
-                            }
-                            this.fileData.fileType = 'audio'
-                            this.show = true
-                            this.fileData.typeList = ['mp3']
-                            this.fileData.fileSize = 20
-                        }
-                    })
-
-                    editor.ui.registry.addButton('uploadFile', {
-                        text: uploadFile,
-                        onAction: () => {
-                            if (this.mediaTypeList.includes('file')) {
-                                this.$message.warning('最多选择一种！')
-                                return
-                            }
-                            this.fileData.fileType = 'file'
-                            this.fileData.typeList = ['pptx', 'docx', 'pdf', 'xlsx']
-                            this.fileData.fileSize = 20
-                            this.show = true
-                        }
-                    })
-                }
-            }
-        },
-        tinymceId() {
-            return 'vue-tinymce-' + Number(new Date()) + String((Math.random() * 1000).toFixed(0))
-        }
-    },
-    destroy() {
-        const tinymce = window.tinymce.get(this.tinymceId)
-        tinymce.destroy()
-    },
-    methods: {
-        handleCloseFile(row, index) {
-            this.$emit('delte', {
-                row: row,
-                index: index
-            })
-        },
-        handleFillInBlanks(value, id) {
-            const editor = this.$refs.tinymceEditor.editor
-            editor.editorManager.get(editor.id).focus()
-            tinymce.activeEditor.insertContent(
-                `<input type="text" class="fill-icon ${id}" disabled readonly value="${value}">`
-            )
-        },
-        deleFillItem(index) {
-            const el = this.$refs.tinymceEditor.editor
-            el.editorManager.get(el.id).focus()
-            const elList =
-                tinymce.activeEditor && tinymce.activeEditor.iframeElement
-                    ? tinymce.activeEditor.iframeElement.contentWindow &&
-                      tinymce.activeEditor.iframeElement.contentWindow.document.getElementsByTagName(
-                          'input'
-                      )
-                    : []
-            elList[index].remove()
-            for (let i = 0; i < elList.length; i++) {
-                elList[i].setAttribute('value', i + 1)
-            }
-        },
-        onSure(value) {
-            this.$emit('change', {
-                value: this.tinymceContent,
-                itemAttr: { type: this.fileData.fileType, content: value }
-            })
-        },
-        wordLimit(e, editor) {
-            const tinymax = editor.settings.charLimit
-            const text = e.target.innerText
-            const html = e.target.innerHTML
-            let last = ''
-            let lastIndex = ''
-            let startVal = ''
-            let endVal = ''
-            if (text.length === tinymax) {
-                this.tinymceContent = html
-                // 兼容输入法有可能会跳过最大值
-            } else if (!this.isComposition && text.length === tinymax + 1) {
-                last = text.substr(text.length - 1, 1)
-                lastIndex = html.lastIndexOf(last)
-                startVal = html.substring(0, lastIndex)
-                endVal = html.substring(lastIndex + 1, html.length)
-                this.tinymceContent = startVal + endVal
-            }
-            if (text.length > tinymax) {
-                e.target.innerHTML = this.tinymceContent
-                this.keepLastIndex()
-                editor.focus()
-                if (!this.limitNum) {
-                    this.$message.error(`长度限制为${tinymax}个字符`)
-                    this.limitNum++
-                }
-            } else {
-                this.limitNum = 0
-            }
-        },
-        keepLastIndex() {
-            const tinymce = window.tinymce.get(this.tinymceId)
-            const wind = tinymce.contentWindow
-            const obj = wind.document.getElementById('tinymce')
-            if (wind.getSelection) {
-                // ie11 10 9 ff safari
-                obj.focus() // 解决ff不获取焦点无法定位问题
-                const range = wind.getSelection() // 创建range
-                console.log(range)
-                range.selectAllChildren(obj) // range 选择obj下所有子内容
-                range.collapseToEnd() // 光标移至最后
-            } else if (document.selection) {
-                // ie10 9 8 7 6 5
-                const range = document.selection.createRange() // 创建选择对象
-                range.moveToElementText(obj) // range定位到obj
-                range.collapse(false) // 光标移至最后
-                range.select()
-            }
-        }
-    }
-}
-</script>

package/packages/Topic/index.js

@@ -1,23 +0,0 @@
-import Single from './src/single'
-import Multiple from './src/multiple'
-import Judgment from './src/judgment'
-import FillInBlanks from './src/fillInBlanks'
-import ShortAnswer from './src/shortAnswer'
-import PictureAnswer from './src/pictureAnswer'
-import Compound from './src/compound'
-import AudioFrequency from './src/audioFrequency'
-import Attachment from './src/attachment'
-
-const components = [
-    Single,
-    Multiple,
-    Judgment,
-    FillInBlanks,
-    ShortAnswer,
-    PictureAnswer,
-    Compound,
-    AudioFrequency,
-    Attachment
-]
-
-export default components

package/packages/Topic/src/attachment.vue

@@ -1,114 +0,0 @@
-<template>
-    <div>
-        <div class="topic-stem__label required__label">题干</div>
-        <yks-tinymce
-            key="itemContent"
-            v-model="fromData.itemContent"
-            :toolbar="toolbar"
-            :plugins="plugins"
-            :charLimit="topicDataExtent.itemContentLength || 20000"
-            :fileParams="getFileTypes('stem', fromData.stemAttrs)"
-            :uploadFileToHwCloud="uploadFileToHwCloud"
-            :uploadFileFunction="uploadFileFunction"
-            menubar=""
-            height="200px"
-            @change="($event) => getTinymceEdit($event, 'stem')"
-            @delte="($event) => handleDelteAttrs($event, 'stem', fromData.stemAttrs)"
-        />
-        <div class="topic-stem__label required__label">标准答案</div>
-        <yks-tinymce
-            key="answer"
-            v-model="fromData.answer"
-            :toolbar="toolbar"
-            :plugins="plugins"
-            :charLimit="topicDataExtent.answerLength || 5000"
-            :fileParams="getFileTypes('answer', fromData.answerAttrs)"
-            :uploadFileToHwCloud="uploadFileToHwCloud"
-            :uploadFileFunction="uploadFileFunction"
-            menubar=""
-            height="200px"
-            @change="($event) => getTinymceEdit($event, 'answer')"
-            @delte="($event) => handleDelteAttrs($event, 'answer', fromData.answerAttrs)"
-        />
-        <div class="topic-stem__label">答案解析</div>
-        <yks-tinymce
-            key="description"
-            v-model="fromData.description"
-            :toolbar="toolbar"
-            :plugins="plugins"
-            :charLimit="topicDataExtent.descriptionLength || 20000"
-            :fileParams="getFileTypes('analysis', fromData.descriptionAttrs)"
-            :uploadFileToHwCloud="uploadFileToHwCloud"
-            :uploadFileFunction="uploadFileFunction"
-            menubar=""
-            height="200px"
-            @change="($event) => getTinymceEdit($event, 'analysis')"
-            @delte="($event) => handleDelteAttrs($event, 'analysis', fromData.descriptionAttrs)"
-        />
-    </div>
-</template>
-<script>
-import TopicMixins from 'yks/assets/mixins/topic'
-import { stemItemType, shortItemType, analysisItemType } from './config'
-
-export default {
-    name: 'YksAttachment',
-    mixins: [TopicMixins],
-    methods: {
-        /**
-         * data 富文本数据
-         * field 对象名
-         * type 类型
-         */
-        getTinymceEdit(data, type) {
-            switch (type) {
-                case 'stem':
-                    data.itemAttr.type = stemItemType[data.itemAttr.type]
-                    this.fromData.itemContent = data.value
-                    if (data.itemAttr.type && data.itemAttr.content) {
-                        this.fromData.stemAttrs.push(data.itemAttr)
-                    }
-                    break
-                case 'answer':
-                    data.itemAttr.type = shortItemType[data.itemAttr.type]
-                    this.fromData.answer = data.value
-                    if (data.itemAttr.type && data.itemAttr.content) {
-                        this.fromData.answerAttrs.push(data.itemAttr)
-                    }
-                    break
-                case 'analysis':
-                    data.itemAttr.type = analysisItemType[data.itemAttr.type]
-                    this.fromData.description = data.value
-
-                    if (data.itemAttr.type && data.itemAttr.content) {
-                        this.fromData.descriptionAttrs.push(data.itemAttr)
-                    }
-                    break
-                default:
-                    break
-            }
-            this.$emit('change', this.fromData)
-        },
-
-        handleDelteAttrs(data, type, list, row = {}) {
-            const listAttrs = list
-            listAttrs.splice(data.index, 1)
-            switch (type) {
-                case 'stem':
-                    this.fromData.stemAttrs = listAttrs
-                    break
-                case 'answer':
-                    this.fromData.answerAttrs = listAttrs
-                    break
-                case 'analysis':
-                    this.fromData.descriptionAttrs = listAttrs
-                    break
-                default:
-                    break
-            }
-            this.$emit('change', this.fromData)
-        }
-    }
-}
-</script>
-