project/assets/js/main/components/MDEditor/mixins/common.js

import {saveFile} from '../utils';
import defaultTools from '../config/tools';

export default {
    name: 'markdown',
    props: {
        value: {
            type: [String, Number],
            default: ''
        },
        theme: {// 默认主题
            type: String,
            default: 'light'
        },
        width: {// 初始化宽度
            type: [Number, String],
            default: 'auto'
        },
        height: {// 初始化高度
            type: [Number, String],
            default: 600
        },
        toolbars: {// 工具栏
            type: Object,
            default() {
                return {};
            }
        },
        bordered: {//是否有边框
            type: Boolean,
            default: true
        },
        autoSave: {// 是否自动保存
            type: Boolean,
            default: false
        },
        interval: {// 自动保存间隔 mm
            type: Number,
            default: 10000
        },
        exportFileName: {// 默认导出文件名称
            type: String,
            default: 'unnamed'
        },
        markedOptions: {//marked.js配置项
            type: Object,
            default() {
                return {};
            }
        },
        copyCode: {// 复制代码
            type: Boolean,
            default: true
        },
        copyBtnText: {// 复制代码按钮文字
            type: String,
            default: '复制代码'
        },
        isPreview: {//是否是预览模式
            type: Boolean,
            default: false
        },
        isCustomFullscreen: {//是否全部（自定义参数）
            type: Boolean,
            default: false
        }
    },
    data() {
        return {
            currentValue: '', // 输入框内容
            timeoutId: null,
            indexLenth: 1,
            html: '',// 预览的html
            preview: false, // 是否是预览状态
            split: true, //分屏显示
            fullscreen: false, // 是否是全屏
            scrollSide: '', // 哪个半栏在滑动
            lastInsert: '', //最后一次插入的内容
            timerId: null, // 定时器id
            themeName: '',
            themeSlideDown: false,
            imgSlideDown: false,
            imgs: [],
            scrolling: true, // 同步滚动
            editorScrollHeight: 0,
            previewImgModal: false,
            previewImgSrc: '',
            previewImgMode: ''
        };
    },
    computed: {
        tools() {
            const {toolbars = {}} = this;
            return {
                ...defaultTools,
                ...toolbars
            };
        }
    },
    methods: {
        insertLink() {// 插入链接
            this.insertContent('\n[link](href)');
        },
        insertImage() {// 插入图片
            this.insertContent('\n![image](imgUrl)');
        },
        insertTable() {// 插入表格
            this.insertContent(
                '\nheader 1 | header 2\n---|---\nrow 1 col 1 | row 1 col 2\nrow 2 col 1 | row 2 col 2\n\n'
            );
        },
        handleSave() {// 保存操作
            const {currentValue, themeName, html} = this;
            this.$emit('on-save', {
                theme: themeName,
                value: currentValue,
                html
            });
        },
        toggleSlideDown() {// 显示主题选项
            this.slideDown = !this.slideDown;
        },
        setThemes(name) {// 设置主题
            this.themeName = name;
            this.themeSlideDown = false;
            this.$emit('on-theme-change', name);
        },
        exportFile() {// 导出为.md格式
            saveFile(this.currentValue, this.exportFileName + '.md');
        },
        importFile(e) {// 导入本地文件
            const file = e.target.files[0];
            if (!file) {
                return;
            }
            const {type} = file;
            if (!['text/markdown', 'text/src'].includes(type)) {
                return;
            }
            const reader = new FileReader();
            reader.readAsText(file, {
                encoding: 'utf-8'
            });
            reader.onload = () => {
                this.currentValue = reader.result;
                e.target.value = '';
                if (this.pro) {// 专业版，手动set value
                    this.editor.setOption('value', this.currentValue);
                }
            };
            reader.onerror = err => {
                console.error(err);
            }
        },
        handlePaste(_, e) {// 粘贴图片
            const {clipboardData = {}} = e;
            const {types = [], items} = clipboardData;
            let item = null;
            for (let i = 0; i < types.length; i++) {
                if (types[i] === 'Files') {
                    item = items[i];
                    break;
                }
            }
            if (item) {
                const file = item.getAsFile();
                if (/image/gi.test(file.type)) {
                    this.$emit('on-upload-image', file);
                    e.preventDefault();
                }
            }
        },
        mousescrollSide(side) {// 设置究竟是哪个半边在主动滑动
            this.scrollSide = side;
        },
        addImageClickListener() {// 监听查看大图
            const {imgs = []} = this;
            if (imgs.length > 0) {
                for (let i = 0, len = imgs.length; i < len; i++) {
                    imgs[i].onclick = null;
                }
            }
            setTimeout(() => {
                this.imgs = this.$refs.preview.querySelectorAll('img');
                for (let i = 0, len = this.imgs.length; i < len; i++) {
                    this.imgs[i].onclick = () => {
                        const src = this.imgs[i].getAttribute('src');
                        this.previewImage(src);
                    };
                }
            }, 600);
        },
        previewImage(src) {// 预览图片
            const img = new Image();
            img.src = src;
            img.onload = () => {
                const width = img.naturalWidth;
                const height = img.naturalHeight;
                if (height / width > 1.4) {
                    this.previewImgMode = 'horizontal';
                } else {
                    this.previewImgMode = 'vertical';
                }
                this.previewImgSrc = src;
                this.previewImgModal = true;
            };
        },
        chooseImage() {// 选择图片
            const input = document.createElement('input');
            input.type = 'file';
            input.accept = 'image/*';
            input.onchange = ()=>{
               const files = input.files;
               if(files[0]){
                   this.$emit('on-upload-image', files[0]);
                   input.value = '';
               }
            }
            input.click();
        },
        addCopyListener() {// 监听复制操作
            setTimeout(() => {
                const btns = document.querySelectorAll(
                    '.code-block .copy-code'
                );
                this.btns = btns;
                for (let i = 0, len = btns.length; i < len; i++) {
                    btns[i].onclick = () => {
                        const code = btns[i].parentNode.querySelectorAll('pre')[0].innerText;
                        const aux = document.createElement('input');
                        aux.setAttribute('value', code);
                        document.body.appendChild(aux);
                        aux.select();
                        document.execCommand('copy');
                        document.body.removeChild(aux);
                        this.$emit('on-copy', code);
                    };
                }
            }, 600);
        },
        /**
         * 自定义事件
         * @param act
         */
        onCustom(act) {
            this.$emit('on-custom', act);
        }
    },
    destroyed() {// 销毁时清除定时器
        clearInterval(this.timerId);
    }
};