Как создать редактор RichText в HTML / JS без document.execCommand?

#javascript #html #web #wysiwyg #richtext

#javascript #HTML #веб #wysiwyg #richtext

Вопрос:

Я бы хотел создать свой собственный редактор RichText в HTML / JS следующим образом :

https://www.youtube.com/watch?v=cOeTHVlFDYs

Но, согласно MDN, document.execCommand теперь устарел (https://developer.mozilla.org/en-US/docs/Web/API/Document/execCommand ), так как же поступить дальше?

Заранее спасибо за ваш ответ

Ответ №1:

После экспериментов я нашел способ продолжить работу с ванильным HTML / CSS / JS, вот мой JSFiddle :

https://jsfiddle.net/y9qzejmf/1/

 function insertTag(tag_name) {

  let editor_textarea = document.getElementById("editor_textarea");

  let selection = null;

  if (editor_textarea.selectionStart == editor_textarea.selectionEnd)
    selection = editor_textarea.selectionStart;
  else
    selection = editor_textarea.value.slice(editor_textarea.selectionStart, editor_textarea.selectionEnd);

  switch (tag_name) {
    case "strong":
      tag_name = "strong";
      break;

    case "italic":
      tag_name = "i";
      break;

    case "underline":
      tag_name = "u";
      break;

    case "code":
      tag_name = "code-tag";
      break;

    default:
      tag_name = null;
      break;
  }

  if (tag_name != null)
    editor_textarea.setRangeText(`<${tag_name}>${selection}</${tag_name}>`);
}