javascript - 如何使用 Javascript 操作突出显示的文本

Question

我正在尝试创建一个所见即所得的 HTML 编辑器。现在我们可以将文本左对齐、居中和右对齐。如果用户突出显示某些文本并单击粗体或斜体按钮，我想添加。我想让它变得大胆。

我得到像这样突出显示的文本

const getHighlightedText = () => {
  let text = '';
  if (window.getSelection) {
    text = window.getSelection().toString();
  } else if (
    document.selection &&
    document.selection.type != 'Control'
  ) {
    text = document.selection.createRange().text;
  }
  return text;
};

现在如何在 strong 或 em 标签中添加文本。我想到了使用字符串替换。但如果我们多次使用相同的文本，它就不会正确。

我怎样才能做到这一点？

$(document).ready(() => {
  const getHighlightedText = () => {
    let text = '';
    if (window.getSelection) {
      text = window.getSelection().toString();
    } else if (
      document.selection &&
      document.selection.type != 'Control'
    ) {
      text = document.selection.createRange().text;
    }
    return text;
  };

  let activeElement = null;

  $('#builder-content').on('click', (e) => {
    activeElement = $(e.target);
    console.log(activeElement);
  });

  $('#builder-align-text-left').on('click', (e) => {
    if (activeElement.hasClass('text-end')) {
      $(activeElement).removeClass('text-end');
    }
    if (activeElement.hasClass('text-center')) {
      $(activeElement).removeClass('text-center');
    }

    activeElement.addClass('text-start');
  });

  $('#builder-align-text-left').on('click', (e) => {
    if (activeElement.hasClass('text-end')) {
      $(activeElement).removeClass('text-end');
    }
    if (activeElement.hasClass('text-center')) {
      $(activeElement).removeClass('text-center');
    }

    activeElement.addClass('text-start');
  });

  $('#builder-align-text-center').on('click', (e) => {
    if (activeElement.hasClass('text-end')) {
      $(activeElement).removeClass('text-end');
    }
    if (activeElement.hasClass('text-start')) {
      $(activeElement).removeClass('text-start');
    }

    activeElement.addClass('text-center');
  });

  $('#builder-align-text-right').on('click', (e) => {
    if (activeElement.hasClass('text-center')) {
      $(activeElement).removeClass('text-center');
    }
    if (activeElement.hasClass('text-start')) {
      $(activeElement).removeClass('text-start');
    }

    $(activeElement).addClass('text-end');
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous" />
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.0/css/all.css" integrity="sha384-OLYO0LymqQ+uHXELyx93kblK5YIS3B2ZfLGBmsJaUyor7CpMTBsahDHByqSuWW+q" crossorigin="anonymous" />

<div class="container h-100">
  <div class="row h-100">
    <div class="d-flex justify-content-center align-items-center h-100">
      <div class="card">
        <div class="card-body p-4">
          <div id="builder-editor">
            <div id="builder-content" contenteditable="true">
              <h3>Heading 3</h3>
              <p>
                In JavaScript, when an object is passed to a function expecting a string (like window.alert() or document.write()), the object's toString() method is called and the returned value is passed to the function. This can make the object appear to be a string
                when used with other functions when it is really an object with properties and methods.
              </p>
            </div>
          </div>
        </div>
        <div class="card-footer">
          <div class="d-flex builder-toolbar">
            <button class="btn btn-light shadow-none me-3">
                  <i class="fas fa-bold"></i>
                </button>
            <button class="btn btn-light shadow-none me-3">
                  <i class="fas fa-italic"></i>
                </button>
            <button id="builder-align-text-left" class="btn btn-light shadow-none me-3">
                  <i class="fas fa-align-left"></i>
                </button>
            <button id="builder-align-text-center" class="btn btn-light shadow-none me-3">
                  <i class="fas fa-align-center"></i>
                </button>
            <button id="builder-align-text-right" class="btn btn-light shadow-none me-3">
                  <i class="fas fa-align-right"></i>
                </button>
            <button id="builder-align-text-right" class="btn btn-light shadow-none me-3">
                  <i class="fas fa-cloud-upload-alt"></i>
                </button>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

标签： javascripthtmlcss

Answer 1

您可以尝试在单击事件上为粗体按钮添加强标记，如下所示：

<button class="btn btn-light shadow-none me-3" id="builder-text-bold">
   <i class="fas fa-bold"></i>
</button>

  $('#builder-text-bold').on('click', (e) => {
    var range;
    if (window.getSelection) {
        range = window.getSelection().getRangeAt(0);
    } else if (document.getSelection) {
        range = document.getSelection().getRangeAt(0);
    } else if (document.selection) {
        range = document.selection.createRange();
    }

    if (range != null && range != '' ) {
       var newNode = $('<strong>  </strong>')[0];
       range.surroundContents(newNode);
     }
 });