如何在草稿编辑器中使光标保持在更改和获得焦点时的位置?

问题描述

我使用https://learn-draftjs.now.sh/simplest-editor显示的示例代码创建了一个简单的编辑器, 但是我的编辑器的行为与该页面中的编辑器不同。 当我改变焦点时,光标总是返回到编辑器的开头,而当我希望焦点回到它时,我希望光标返回到最后一个位置。

<style>
body {
    margin: 0 ;
    font-size: 16px;
    font-family: 'Montserrat',sans-serif;
}


.header .navbar {
    padding: 0;
}

.home-section {
    background-color: red!important;
    padding: 250px 0px 200px;
}
</style>
<body>
    <div class="container home-section">
        <div class="row">
            <div class="col-lg-6">
                <div class="home-content">
                    <h1>Awesome Product</h1>
                    <p>Lorem ipsum dolor sit amet,consectetur adipiscing elit,sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat</p>
                    <a href="#">Buy For ₹150</a>
                </div>
            </div>
        </div>
    </div>

光标的位置是SelectionState的一部分。那么为什么它会开始呢?以及如何解决

解决方法

找到了。

 <Editor
        editorState={this.state.editorState}
        onChange={this.onChange}
        preserveSelectionOnBlur={true}
      />

保存选择状态,当您焦点回到编辑器时,光标将位于模糊之前的最后一个位置。