|
@@ -243,22 +243,7 @@ class EditableSpan extends Component{
|
|
if(preObj[0].nodeName !=="DIV"){
|
|
if(preObj[0].nodeName !=="DIV"){
|
|
this.moveEnd(preObj[0]);
|
|
this.moveEnd(preObj[0]);
|
|
}
|
|
}
|
|
- }
|
|
|
|
-
|
|
|
|
- if(innerVal !== preVal){
|
|
|
|
-
|
|
|
|
- }
|
|
|
|
- else{
|
|
|
|
- // 中英文数字和下划线--单独删除标签
|
|
|
|
- /*const reg = new RegExp("([\u4E00-\uFA29]|[\uE7C7-\uE7F3]|[a-zA-Z0-9_])");
|
|
|
|
- if(index!==0 && reg.test(innerVal)){
|
|
|
|
- let obj = preObj[0].nodeName=="DIV"?preObj.prev():preObj;
|
|
|
|
- delSingleLable && delSingleLable({boxMark,i:index});
|
|
|
|
- this.moveEnd(obj[0]);
|
|
|
|
- this.setState({
|
|
|
|
- index: null
|
|
|
|
- })
|
|
|
|
- }*/
|
|
|
|
|
|
+ }else{
|
|
let data = innerVal.trim();
|
|
let data = innerVal.trim();
|
|
//判断是否为空、中英文:, 。、;,且不是第一位
|
|
//判断是否为空、中英文:, 。、;,且不是第一位
|
|
// let pattern = new RegExp(/^\,?$|^\,?$|^\.?$|^\。?$|^\、?$|^\;?$|^\;?$|^\:?$|^\:?$|\s/);
|
|
// let pattern = new RegExp(/^\,?$|^\,?$|^\.?$|^\。?$|^\、?$|^\;?$|^\;?$|^\:?$|^\:?$|\s/);
|
|
@@ -268,7 +253,7 @@ class EditableSpan extends Component{
|
|
// let preObj = $(this.$span.current).prev();
|
|
// let preObj = $(this.$span.current).prev();
|
|
let obj = preObj[0].nodeName=="DIV"?preObj.prev():preObj;
|
|
let obj = preObj[0].nodeName=="DIV"?preObj.prev():preObj;
|
|
handleKeydown&&handleKeydown({boxMark,i:index,text:data,flag:'backsp'});
|
|
handleKeydown&&handleKeydown({boxMark,i:index,text:data,flag:'backsp'});
|
|
- this.moveEnd(obj[0]);
|
|
|
|
|
|
+ this.moveEnd(obj[0]);
|
|
this.setState({
|
|
this.setState({
|
|
index: null
|
|
index: null
|
|
})
|
|
})
|
|
@@ -297,32 +282,18 @@ class EditableSpan extends Component{
|
|
}
|
|
}
|
|
}
|
|
}
|
|
getClass(){
|
|
getClass(){
|
|
- const {full,value,saveText,i,preIsExt} = this.props;
|
|
|
|
|
|
+ const {full,value,saveText,i,preIsExt,afterIsExt} = this.props;
|
|
|
|
+ const br = preIsExt&&!afterIsExt; //最后一个体征标签
|
|
const preSelected = saveText[i-1];
|
|
const preSelected = saveText[i-1];
|
|
const isFull = full?' '+style['full']:''; //是否宽度设为整行宽度
|
|
const isFull = full?' '+style['full']:''; //是否宽度设为整行宽度
|
|
//有标点符号之外的字符或者前一个标签有选中值时,显示为黑色,否则查体中,有体征标记显示蓝色,否则灰显
|
|
//有标点符号之外的字符或者前一个标签有选中值时,显示为黑色,否则查体中,有体征标记显示蓝色,否则灰显
|
|
const ext = preIsExt?style['ext']:style['unselect'];
|
|
const ext = preIsExt?style['ext']:style['unselect'];
|
|
const unselect = value.match(config.punctuationReg)||preSelected?'':ext;
|
|
const unselect = value.match(config.punctuationReg)||preSelected?'':ext;
|
|
- return classNames(style['editable-span'],isFull,unselect);
|
|
|
|
|
|
+ const hasBr = br?style['editable-br']:''; //最后一个体征标签换行
|
|
|
|
+ return classNames(style['editable-span'],isFull,unselect,hasBr);
|
|
}
|
|
}
|
|
|
|
|
|
render() {
|
|
render() {
|
|
- const {preIsExt,afterIsExt} = this.props;
|
|
|
|
- const br = preIsExt&&!afterIsExt; //最后一个体征标签
|
|
|
|
- if(br){
|
|
|
|
- return <React.Fragment>
|
|
|
|
- <span className={this.getClass()}
|
|
|
|
- contentEditable='true'
|
|
|
|
- ref={this.$span}
|
|
|
|
- onInput={this.onChange}
|
|
|
|
- onFocus={this.handleFocus}
|
|
|
|
- onBlur={this.handleBlur}
|
|
|
|
- onKeyDown={this.handleKeydown}
|
|
|
|
- onClick={this.handleClick}
|
|
|
|
- onKeyUp={this.handleKeyup}></span>
|
|
|
|
- <br/>
|
|
|
|
- </React.Fragment>;
|
|
|
|
- }
|
|
|
|
return <span className={this.getClass()}
|
|
return <span className={this.getClass()}
|
|
contentEditable='true'
|
|
contentEditable='true'
|
|
ref={this.$span}
|
|
ref={this.$span}
|