Почему document.execCommand не работает в reactjs? - PullRequest
Новая
       41

Почему document.execCommand не работает в reactjs?

0 голосов
/ 09 апреля 2020

Я пытаюсь создать простой редактор wysiwyg в моих реактивных проектах , но не работает document.execCommand,

Я имею в виду codepen (Они использовали jQuery библиотека здесь для функции щелчка)

Любой возможный для создания простого редактора wysiwyg в reactjs? 

//document.addEventListener("click", function (e) {});

    const wrapTag = (role) => {
        switch(role) {
            case 'h1':
            case 'h2':
            case 'p':
              document.execCommand('formatBlock', false, role);
              break;
            default:
              document.execCommand(role, false, null);
              break;
          }
    }

    <div onClick={ () => { wrapTag("bold") } }>bold</div>
     <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eveniet saepe nostrum aspernatur deserunt rem neque ab.</p>

1 Ответ

1 голос
/ 10 апреля 2020

Вы должны добавить event.preventDefault, чтобы сохранить фокус: 

    const wrapTag = (role) => {
        document.designMode = "on"
        switch(role) {
            case 'h1':
            case 'h2':
            case 'p':
              document.execCommand('formatBlock', false, role);
              break;
            default:
              document.execCommand(role, false, null);
              break;
          }
    }

    <div onClick={ () => wrapTag("bold") } onMouseDown={(event) => 
        event.preventDefault()}>bold</div>
     <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eveniet saepe nostrum aspernatur deserunt rem neque ab.</p>
...