JavaScript | Диапазон | Выбор - есть ли способ «unbold», «unitali c» быть предметом спора с Range и Selection с Javascript? - PullRequest
Новая
       24

JavaScript | Диапазон | Выбор - есть ли способ «unbold», «unitali c» быть предметом спора с Range и Selection с Javascript?

1 голос
/ 02 марта 2020

Привет, ребята! Я запускаю свой первый ReactJs проект и пытаюсь создать компонент contenteditable, который обрабатывает слова "жирный шрифт" и "itali c" при выборе и нажав кнопку, вот мой код для этого: 

bold = ( e ) => {
  e.preventDefault();
  const selection = window.getSelection();
  if( !selection.isCollapsed ){
    const range = selection.getRangeAt(0);
    const b = document.createElement('b');
    b.appendChild(range.extractContents());
    range.insertNode(b);
    this.setState({html: this.contentEditable.current.innerHTML})
  }
}

italic = ( e ) => {
  e.preventDefault();
  const selection = window.getSelection();
  if (!selection.isCollapsed){
    const range = selection.getRangeAt(0);
    const i = document.createElement('i');
    i.appendChild(range.extractContents());
    range.insertNode(i);
    this.setState({html: this.contentEditable.current.innerHTML})
  }
}

render () {
  return (
    <div>
      <ContentEditable html={this.state.html} />
      <button onClick={this.bold}>bold</button>
      <button onClick={this.italic}>italic</button>
    </div>
  )
}

Даже если я сделаю выбор из половины тега <i> и сделаю его жирным шрифтом , он работает нормально, так как Я извлекаю содержимое диапазона и добавляю его в новый узел.

Проблема теперь заключается в : есть ли способ "unbold" или "unitali c" фрагмент текста в виде следующий пример?

До: 

<b>I am <i>selecting some piece of text</b> to change the</i> tags position

После: 

<b>I am <i>selecting some</b></i> piece of <i><b>text</b> to change the</i> tags position

Я действительно мог бы использовать чью-то помощь в этой ситуации!

...