Bladeren bron

最后一个体征标签换行方案修改,2373

zhouna 5 jaren geleden
bovenliggende
commit
c5f6aced9b
2 gewijzigde bestanden met toevoegingen van 14 en 35 verwijderingen
  1. 6 35
      src/common/components/EditableSpan/index.jsx
  2. 8 0
      src/common/components/EditableSpan/index.less

+ 6 - 35
src/common/components/EditableSpan/index.jsx

@@ -243,22 +243,7 @@ class EditableSpan extends Component{
         if(preObj[0].nodeName !=="DIV"){
           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 pattern = new RegExp(/^\,?$|^\,?$|^\.?$|^\。?$|^\、?$|^\;?$|^\;?$|^\:?$|^\:?$|\s/);
@@ -268,7 +253,7 @@ class EditableSpan extends Component{
           // let preObj = $(this.$span.current).prev();
           let obj = preObj[0].nodeName=="DIV"?preObj.prev():preObj;
           handleKeydown&&handleKeydown({boxMark,i:index,text:data,flag:'backsp'});
-          this.moveEnd(obj[0]);  
+          this.moveEnd(obj[0]);
           this.setState({
             index: null
           })
@@ -297,32 +282,18 @@ class EditableSpan extends Component{
     }
   }
   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 isFull = full?' '+style['full']:'';       //是否宽度设为整行宽度
     //有标点符号之外的字符或者前一个标签有选中值时,显示为黑色,否则查体中,有体征标记显示蓝色,否则灰显
     const ext = preIsExt?style['ext']:style['unselect'];
     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() {
-    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()}
                  contentEditable='true'
                  ref={this.$span}

+ 8 - 0
src/common/components/EditableSpan/index.less

@@ -11,6 +11,14 @@
   text-align: left;
   padding-right: 1px;//火狐左右移动需要
 }
+.editable-br{
+  .editable-span;
+  display: inline;
+}
+.editable-br:after{
+  content: "\A";
+  white-space: pre;
+}
 .full{
   width: 100%;
   line-height: 22px;