प्रतिक्रिया संतोषजनक कर्सर

Question

शुरू करने के लिए कूदता है मैं खाली वर्कशीट में भरने के संपादन को सक्षम करने के लिए मॉड्यूल react-simple-contenteditable का उपयोग कर रहा हूं। एक इनपुट तत्व के बजाय मुझे एक सामग्री संपादन योग्य तत्व का उपयोग करना चाहिए क्योंकि मैं समस्या का पाठ लपेटना चाहता हूं। उदाहरण के लिए, यदि किसी समस्या में एक खाली है, तो यह पाठ को रिक्त, रिक्त और बाद के भाग से पहले भाग में तीन खंडों में विभाजित करता है। अगर मैं बाहरी दो को अलग div एस (या इनपुट फ़ील्ड) के रूप में प्रस्तुत करना था, तो पाठ अनुच्छेद की तरह लपेट नहीं होगा। इसके बजाय, मेरे पास एक ही संतोषजनक div होना चाहिए जिसमें किसी भी तरफ रिक्त और मुक्त टेक्स्ट के लिए इनपुट फ़ील्ड हो।

टेक्स्ट लपेट रहा है जैसे मैं चाहता हूं, लेकिन जब मैं संतुष्ट फ़ील्ड में टेक्स्ट टाइप करता हूं, तो कर्सर शुरुआत में कूदता है। मुझे समझ में नहीं आया क्योंकि मैंने module's github site पर उदाहरण का प्रयास क्यों किया और यह पूरी तरह से काम करता है, और हालांकि मेरा कार्यान्वयन थोड़ा अधिक जटिल है, यह अनिवार्य रूप से वही काम करता है। , यहाँ

handleProblemChange(event, problemIdx) { 
    const problems = cloneDeep(this.state.problems); 
    event.target.children[0].childNodes.forEach((textPieceNode, idx) => { 
     if (textPieceNode.constructor === Text) { 
     problems[problemIdx].textPieces[idx].text = textPieceNode.wholeText; 
     } else { 
     problems[problemIdx].textPieces[idx].text = textPieceNode.childNodes[0].value; 
     } 
    }); 
    this.setState({ problems }); 
    } 

और राज्य इसे करने के लिए संदर्भित करता है बस बात स्पष्ट कर देना:

render() { 
    const textPieces = 
     <div className='new-form-text-pieces'> 
     { 
      this.props.problem.textPieces.map((textPiece, idx) => { 
      if (textPiece.blank) { 
       return (
        <div data-blank={true} className='blank' key={ textPiece.id } style={{display: 'inline'}}> 
        <input 
         placeholder="Answer blank" 
         className='new-form-answer-input' 
         value={ this.props.problem.textPieces[idx].text } 
         onChange={ (event) => this.props.handleTextPiecesInput(this.props.problemIdx, idx, event.target.value) } 
        /> 
        <button className='modify-blank remove-blank' onClick={ (event) => this.props.removeBlank(this.props.problemIdx, idx) }>-</button> 

        </div> 
      ); 
      } else { 
       let text = this.props.problem.textPieces[idx].text; 
       const placeholder = idx === 0 ? 'Problem text' : '...continue text'; 
       // text = text === '' ? placeholder : text; 
       if (text === '') { 
       text = <span style={{color:'gray'}}>{placeholder}</span>; 
       } else { 

       } 
       return (
       this.props.isTextSplit ? 
        <TextPiece 
        key={ textPiece.id } 
        problemIdx={this.props.problemIdx} 
        textPieceIdx={idx} 
        dropBlank={this.props.dropBlank} 
        moveBlank={this.props.moveBlank} 
        > 
        <div style={{display: 'inline-block', }}>{text}</div> 
        </TextPiece> 
       : text 

      ); 
      } 
      }) 
     } 
     </div>; 



    return (
     this.props.isTextSplit ? textPieces : 
     <ContentEditable 
      html={ReactDOMServer.renderToStaticMarkup(textPieces)} 
      className="my-class" 
      tagName="div" 
      onChange={ (event, value) => this.props.handleProblemChange(event, this.props.problemIdx, value) } 
      contentEditable='plaintext-only' 
     /> 
    ); 

    } 

यहाँ onChange समारोह है:

यहाँ मेरी समारोह प्रस्तुत करना <ContentEditable /> का उपयोग करता है है

this.state = { 
    problems: [ 
    { 
     id: shortid.generate(), 
     textPieces: [ 
     { 
      text : "Three days was simply not a(n)", 
      blank : false, 
      id: shortid.generate(), 
     }, 
     { 
      text : "acceptable", 
      blank : true, 
      id: shortid.generate(), 
     }, 
     { 
      text : "amount of time to complete such a lot of work.", 
      blank : false, 
      id: shortid.generate(), 
     } 
     ] 
    } 

धन्यवाद बहुत

Answer 1

लंबी कहानी छोटी, ऐसा करने का कोई आसान तरीका नहीं है। मैंने इसे स्वयं करने की कोशिश की है और कोशिश कर रहे दिन बिताए हैं। मूल रूप से आपको कर्सर की स्थिति को सहेजना होगा और अद्यतन के बाद इसे स्वयं को पुनर्स्थापित करना होगा। यह सब window.getSelection साथ प्राप्त किया जा सकता()

https://developer.mozilla.org/en-US/docs/Web/API/Window/getSelection

लेकिन यह कितना आपकी सामग्री बदली है पर निर्भर करता है वास्तव में मुश्किल हो सकता है।

मैं इसके बजाय ड्राफ्टजेएस का उपयोग कर समाप्त हुआ। जो स्वयं फेसबुक द्वारा संतोषजनक div पर एक अमूर्त है।

https://draftjs.org/docs/overview.html#content

एक को लेने के लिए लंबे समय तक सा, लेकिन आप अपने उत्तर के लिए एक बहुत अधिक