yks-element 1.0.0 → 1.0.315

package/packages/Tinymce/src/index.vue

@@ -0,0 +1,500 @@
+<template>
+    <div
+        :class="{ fullscreen: fullscreen }"
+        class="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 '../../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 YksUploadfile from '../../UploadFile/index'
+import YksMultimedia from '../../Multimedia/index'
+
+import { Loading } from 'element-ui'
+
+export default {
+    name: 'YksTinymce',
+    components: {
+        TinymceEditor,
+        YksUploadfile,
+        YksMultimedia
+    },
+    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('delteFile', {
+                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('changeFile', {
+                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>
+
+<style lang="scss" scoped>
+.tinymce-container {
+    line-height: normal;
+    position: relative;
+
+    .mce-fullscreen {
+        z-index: 10000;
+    }
+
+    .editor-custom-btn-container {
+        position: absolute;
+        top: 6px;
+        right: 6px;
+
+        &.fullscreen {
+            position: fixed;
+            z-index: 10000;
+        }
+    }
+
+    .editor-upload-btn {
+        display: inline-block;
+    }
+
+    textarea {
+        visibility: hidden;
+        z-index: -1;
+    }
+    .ti-multimedia {
+        position: relative;
+        display: flex;
+        align-items: flex-start;
+        flex-wrap: wrap;
+        margin-top: 10px;
+    }
+
+    .tinymce-inline {
+        padding: 0 20px;
+        border: 1px solid #ccc;
+    }
+    .tox-statusbar__wordcount {
+        opacity: 0 !important;
+    }
+}
+</style>

package/packages/UploadFile/index.js

@@ -0,0 +1,8 @@
+import YksUploadfile from './src/index';
+
+/* istanbul ignore next */
+YksUploadfile.install = function(Vue) {
+  Vue.component(YksUploadfile.name, YksUploadfile);
+};
+
+export default YksUploadfile;