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.
271 lines
8.3 KiB
271 lines
8.3 KiB
2 months ago
|
# 人员简历模块
|
||
|
|
||
|
## 现状
|
||
|
|
||
|
最初使用的纯富文本编译器,主要目的是允许格式化和
|
||
|
|
||
|
定义组件源码(可能存在版本)
|
||
|
|
||
|
```js
|
||
|
<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 ,其实也是富文本编译器,但是该文件打包后占用很小。
|
||
|
|
||
|
```JS
|
||
|
|
||
|
<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>
|
||
|
|
||
|
```
|