Browse Source

增加简历相关文档介绍

master
张献维 3 weeks ago
parent
commit
83c6434b16
  1. 3
      Writerside/in.tree
  2. 270
      Writerside/topics/人员简历模块.md

3
Writerside/in.tree

@ -13,6 +13,9 @@
</toc-element>
</toc-element>
<toc-element toc-title="人员管理">
<toc-element toc-title="人员信息">
<toc-element topic="人员简历模块.md"/>
</toc-element>
<toc-element toc-title="人员直统">
<toc-element topic="直统开始.md"/>
</toc-element>

270
Writerside/topics/人员简历模块.md

@ -0,0 +1,270 @@
# 人员简历模块
## 现状
最初使用的纯富文本编译器,主要目的是允许格式化和
定义组件源码(可能存在版本)
```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>
```
Loading…
Cancel
Save