You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

8.3 KiB

人员简历模块

现状

最初使用的纯富文本编译器,主要目的是允许格式化和

定义组件源码(可能存在版本)

<template>
    <div class="class-for-ue" :style="'overflow: auto;height: ' + divheight + 'px;width: ' + divwidth + 'px;'">
        <script :id=id type="text/plain" ref="editorUE" ></script>
    </div>
</template>
<script>
// 富文本编译器
import '../../../static/UEditor/ueditor.config.js'
import '../../../static/UEditor/ueditor.all.js'
// import'../static/Ueditor/ueditor.all.min.js'
import '../../../static/UEditor/lang/zh-cn/zh-cn.js'
import '../../../static/UEditor/ueditor.parse.min.js'
    export default {
        props: {
            id: {
                type: String,
                default: 'theOne'
            },
            defaultMsg: {
                type: String,
                default: ''
            },
            config: {
                type: Object,
                default: {}
            },
            isJianLi: {
                type: Boolean,
                default: false
            },
            divheight: {
                type: String,
                default: '800'
            },
            divwidth: {
                type: String,
                default: '500'
            },
            disabled: {
                type:Boolean,
                default:false
            }
        },
        data () {
            return {
                editor: null,
                defId:""
            }
        },
        created(){
          this.defId = this.id
        },
        watch: {

        },
        mounted() {
            // 获取当前页面对象
            const _this = this;

            _this.editor = UE.getEditor(_this.id, _this.config); // 初始化UE
            _this.editor.addListener("ready", function () {
                // 隐藏工具栏
                // $('#' + _this.id + ' div.edui-editor-toolbarbox').css('display', 'none');
                // $('#' + _this.id + ' div.edui-editor-bottomContainer').css('display', 'none');
                //延时添加, 防止页面加载富文本编辑器来不及赋值/或网络延时加载不上
                setTimeout(function () {
                    if(ifnotnull(_this.defaultMsg) == 1){
                        if(_this.isJianLi){
                            // 简历文本进行格式化
                            _this.editor.setContent("<p>"+a1701Format(_this.defaultMsg).replace(/\n/g,'</p><p>').trim()+"</p>", false); // 确保UE加载完成后,放入内容。
                        }else{
                            _this.editor.setContent("<p>"+_this.defaultMsg.replace(/\n/g,'</p><p>').trim()+"</p>", false); // 确保UE加载完成后,放入内容。
                        }
                        
                    }
                }, 100);
                //是否编辑状态
                setTimeout(() => {
                    if(_this.disabled){
                        _this.setDisabled();
                    }
                }, 300);
            });

            // let cce;
            _this.editor.addListener('selectionchange',function(a,b,c){
                // clearTimeout(cce);
                // cce = setTimeout(function() {
                _this.changeCss();
                // }, 300);
            });

            _this.editor.addListener("blur", function () {
                _this.$emit('UEChange');
            });
        },
        methods: {
            // 设置简历内容
            setUEContent(msg) {
                let _this = this;
                _this.defaultMsg = msg;
                _this.editor.setContent(msg, false); // 确保UE加载完成后,放入内容。
            },

            // 获取对象
            getUEditor() {
                return this.editor;
            },

            // 获取带格式的简历内容
            getUEContent() {
                return this.editor.getContent();
            },

            // 获取简历文本内容
            getPlainTxt() {
                return this.editor.getPlainTxt();
            },

            // 变更数据样式
            changeCss(){
                let pnodes = document.getElementById(this.defId).children[0].children[1].children[0].contentWindow.document.body.getElementsByTagName('p')
                for (let i = 0, pnodeLen = pnodes.length; i < pnodeLen; i++) {
                    let text = pnodes[i].innerText;
                    if(text.match(/^([0-9 \x20\xA0]{4}[\. \uff0e\x20\xA0][0-9 \x20\xA0]{2}[\-\u2500\u2014]{1,2}[[0-9 \x20\xA0]{4}[\. \uff0e\x20\xA0][0-9 \x20\xA0]{2}[\x20\xA0]{2}]{0,1})|([\u3000\x20\xA0\u2002\u2003]{18})/)){
                        $(pnodes[i]).attr('style','text-indent: -9em!important');
                    }else if(text.match(/^([0-9 \x20\xA0]{4}[\. \uff0e\x20\xA0][0-9 \x20\xA0]{2}[\-\u2500\u2014]{1,2})|([\u3000\x20\xA0\u2002\u2003]{18})/)){
                        $(pnodes[i]).attr('style','text-indent: -9em!important');
                    }else{
                        $(pnodes[i]).css('text-indent','');
                    }
                }

                $('#' + this.id).css('visibility','visible');
            },
            setDisabled(){
                this.editor.setDisabled();
                $(document.getElementById(this.id).children[0]).css('background-color','#F5F7FA');
            }
        },
        // 对象销毁方法
        destroyed() {
            this.editor.destroy();
        },
    }
</script>

思考

其实整体只是使用了自读和格式化等属性,其他均没有进行使用,可以简化代码,解决无法在同一页面展示两份简历的问题

使用插件 quill ,其实也是富文本编译器,但是该文件打包后占用很小。


<template>
    <div class="jl-quill">
        <div ref="editor" :style="style" class="play-content"></div>
    </div>
</template>

<script>
import Quill from 'quill';
import 'quill/dist/quill.snow.css';

export default {
    props: {
        defaultMsg: {
            type: String,
            required: true
        },
        divwidth: {
            type: Number,
            required: false,
            default: '500'
        },
        divheight: {
            type: Number,
            required: false,
            default: '230'
        },
        disabled: {
            type: Boolean,
            default: true
        }
    },
    data() {
        return {
            quill: null
        };
    },
    computed: {
        style() {
            return `width: ${this.divwidth}px; height: ${this.divheight}px; resize: none;`;
        },
    },
    mounted() {
        this.quill = new Quill(this.$refs.editor, {
            theme: 'snow',
            modules: {
                toolbar: false
            },
            formats: ['bold', 'italic', 'underline', 'strike', 'link', 'image', 'blockquote', 'code-block', 'list', 'header'],
            placeholder: '请输入简历...'
        });

        if (this.defaultMsg) {
            // 初始化基本内容信息
            this.quill.setText(this.defaultMsg);
        }

        if (this.disabled) {
            // 设置为可编辑状态
            this.quill.root.setAttribute('contentEditable', true);
        }

        // 监听内容变化
        this.quill.on('text-change', this.handleTextChange);
    },
    beforeDestroy() { // 销毁 Quill 实例
        if (this.quill) {
            this.quill.off('text-change', this.handleTextChange); // 移除事件监听器
            this.quill = null;
        }
    },
    methods: {
        handleTextChange(delta, oldDelta, source) {
            const text = this.quill.getText();
            console.debug('Text:', text);
            this.$emit('update:text', this.quill.getText());
        }
    }
};
</script>

<style type="text/css" lang="less" scoped>
.jl-quill {
    .play-content {
        :deep(.ql-editor) {
            p {
                font-family: monospace; /* 使用等宽字体 */
                font-size: 16px; /* 可选:设置字体大小 */
                text-indent: -18ch; /* 首行缩进 -18ch,使其与后续行对齐 */
                padding-left: 18ch; /* 后续行缩进 18ch */
                margin: 0; /* 移除默认的 margin */
            }
        }
    }

    .display-content {
        margin-top: 20px;
        border: 1px solid #ccc;
        padding: 10px;
        white-space: pre-wrap;
    }
}
</style>