张献维
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