张献维
3 weeks ago
2 changed files with 273 additions and 0 deletions
@ -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…
Reference in new issue