qjkankan_v1.1.1/packages/qjkankan-editor/src/components/shared/Editor.vue

<template>
  <div class="com-editor ui-input"></div>
</template>
<script>
import config from "../../config";

// import { htmlCut } from "../../utils/string";
export default {
    props: {
        placeholder: String,
        maxlength: Number,
        html: String
    },
    mounted() {
        this.quill = new Quill(this.$el, {
            modules: {
                toolbar: false
            },
            placeholder: this.placeholder
            //preserveWhitespace:true
        });

        this.quill.root.innerHTML = this.html

        // this.$nextTick(() => (this.quill.root.innerHTML = html));

        const $editable = $(this.$el).find("[contenteditable]"); //this.$el.querySelector("[contenteditable]");

        $editable.on("paste", e => {
            e.preventDefault();
            let clp = (e.originalEvent || e).clipboardData;
            let text;
            if (clp === undefined || clp === null) {
                text = window.clipboardData.getData("text") || "";
            } else {
                text = clp.getData("text/plain") || "";
            }

            if (text) {
                //this.quill.root.innerHTML = this.quill.root.innerHTML+text;
                let index = this.quill.selection.savedRange.index
                if (typeof index == "undefined") {
                    index = this.quill.getLength() - 1;
                }

                this.quill.insertText(index, text);

                setTimeout(() => {
                    this.quill.setSelection(index + text.length); 
                }, 10);

            }
        });
        $editable.on("mousewheel touchstart touchmove", e => {
            if (this.quill.hasFocus()) {
                e.stopPropagation();
            }
        });

        // this.quill.on("selection-change", (range, oldRange, source) => {
        //     this._focusin = range !== null;
        // });

        // this.quill.on("text-change", (delta, oldDelta, source) => {
        //     let size = this.quill.getLength() - 1;
        //     let html = this.quill.root.innerHTML;

        //     if (this.maxlength > 0 && size > this.maxlength) {
        //         html = this.quill.root.innerHTML = htmlCut(
        //             html,
        //             this.maxlength
        //         );
        //         size = this.quill.getLength() - 1;
        //     }

        //     this.$emit("change", { html, size });
        // });

        this.quill.on("text-change", (delta, old, source) => {
            let html = this.quill.root.innerHTML == '<p><br></p>' ? '' : this.quill.root.innerHTML;
            // 过滤emoji表情
            html = html.replace(/(\ud83c[\udf00-\udfff])|(\ud83d[\udc00-\ude4f])|(\ud83d[\ude80-\udeff])/g, function (char) {
                var H, L, code;
                if (char.length === 2) {
                    return ""
                } else {
                    return char;
                }
            });

            if (this.maxlength > 0 && this.quill.getLength() > this.maxlength) {
                setTimeout(() => {
                    this.quill.deleteText(
                        this.maxlength,
                        this.quill.getLength()
                    );
                    let size = this.quill.getLength() - 1;
                    this.$emit("change", { html, size });
                }, 300);
            } else {
                let size = this.quill.getLength() - 1;
                this.$emit("change", { html, size });
            }
        });
    },
    methods: {
        setHtml(html = "") {
            this.$nextTick(() => (this.quill.root.innerHTML = html));
            //this.quill.clipboard.dangerouslyPasteHTML(0, html);
        },
        addLink(text, link) {
            if (!text || !link) {
                return;
            }
            if (!/http(s)?:\/\//.test(link)) {
                link = "https://" + link;
            }
            // if (!this._focusin) {
            //     this.quill.focus();
            // }
            if (!this.quill.hasFocus()) {
                this.quill.focus();
            }
            let index = (this.quill.getSelection() || {}).index;
            if (typeof index == "undefined") {
                index = this.quill.getLength() - 1;
            }
            this.quill.insertText(index, text, "link", link);
            this.quill.blur();
        }
    }
};
</script>
<style lang="less">
.com-editor {
    height: 100%;
    padding: 0 0 30px 0;

    .ql-editor {
        padding: 10px;
        user-select: auto;
        font-size: 14px;
        white-space: normal !important;

        a {
            color: @color;
        }
    }

    .ql-editor.ql-blank::before {
        left: 10px;
        right: 10px;
        top: 10px;
        color: #505050;
    }

    .ql-clipboard {
        left: -100000px;
        height: 1px;
        overflow-y: hidden;
        position: absolute;
        top: 50%;
    }
}

[show-mode="mobile"],
[edit-mode="mobile"] {
    .com-editor {
        .ql-editor {
            font-size: 100%;
        }
    }
}
</style>