проблема с window.getSelection () с emoji-mart (компонент выбора) - PullRequest
Новая
       23

проблема с window.getSelection () с emoji-mart (компонент выбора)

0 голосов
/ 26 октября 2018

Мой код: 

addEmoji = () => {
    document.getElementById('description-text').focus();

    let element = $("#span").clone()[0];
    let sel = window.getSelection();

    if (sel.getRangeAt && sel.rangeCount) {
        let range = sel.getRangeAt(0);
        range.deleteContents();
        range.insertNode(element);

        let textNode = document.createTextNode('\u00A0');
        range.setStartAfter(element);
        range.insertNode(textNode);
        range.setStartAfter(textNode);
        range.collapse(true);

        sel = window.getSelection();
        sel.removeAllRanges();
        sel.addRange(range);
    }
}

render() {
    return (
        <div>
            <form onSubmit={this.onSubmit}>
                <div id="description-text" ref="description" suppressContentEditableWarning="true" contentEditable={true} />                    
                <div>
                    <button type="submit">Guardar Cambios</button>
                </div>
            </form>
            <div>
                {this.state.emojiPanel ? 
                    <div>
                        <button type="button" onClick={this.switchEmojiPanel}>Hide Emojis</button>
                        <Picker onClick={this.addEmoji} set='emojione' emojiSize={26} title="Select Emoji" color="#000" /> 

                        <span id="span">INSERT</span>
                    </div>
                    :
                    <div>
                        <button type="button" onClick={this.switchEmojiPanel}>Select Emojis</button>
                    </div>
                }
            </div>
        </div>
    )
}

Проблема в том, что при попытке вставить диапазон в div, когда пользователь щелкает эмодзи, window.getSelection () не получает значение моей позиции вdiv, так как я вызываю функцию из другого компонента, а именно Picker, тогда span всегда вставляется в начало div.

Если кто-то может мне помочь с этим, я был бы очень признателен !!

1 Ответ

0 голосов
/ 20 января 2019

Вы можете использовать свойство css user-select для достижения этой цели. Стиль элементов, на которые вы щелкаете внутри компонента Picker, с помощью свойства user-select: none;.

Таким образом, когда пользователь щелкает эмодзи внутри компонента Picker, позиция каретки или выделение текста останутся там, где вы их оставили, в вашем разделе contentEditable.

Обязательно проверьте совместимость, чтобы эта работа корректно работала в разных браузерах: https://developer.mozilla.org/en-US/docs/Web/CSS/user-select

...