Question

我正在使用突出显示选项来处理自定义文本区域。现在添加了h1-h4和粗体选项。

问题：

当我选择文本并单击Heading1按钮时，它会为整行而不是所选文本设置样式。当我单击“粗体”按钮时，它仅设置选定文本的样式。

我只想对选定的文本而不是整行应用h1-h4样式。

这是我的代码：

<!DOCTYPE html>
<html lang="en">

<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>

<body>

  <div class="container">
    <h2>Comment</h2>
    <div class="panel panel-default">
      <div class="panel-heading">
        <button data-command="h1" class="btn btn-default btn-sm">Heading1</button>
        <button data-command="h2" class="btn btn-default btn-sm">Heading2</button>
        <button data-command="h3" class="btn btn-default btn-sm">Heading3</button>
        <button data-command="h4" class="btn btn-default btn-sm">Heading4</button>
        <button data-command="bold" class="btn btn-default btn-sm">Bold</button>
      </div>
      <div class="panel-body" contenteditable>Sample comment</div>
    </div>
  </div>

</body>
<script>
  $(function() {
    $(".btn").click(function() {
      var command = $(this).data("command");
      if (command == 'h1' || command == 'h2' || command == 'h3' || command == 'h4')
        document.execCommand('formatBlock', false, '<' + command + '>');
      else
        document.execCommand(command);
    })
  })
</script>

</html>

Answer 1

我喜欢你的问题。我不知道这个API。但是请下次使用ES6（现在到处都是）和方括号括起来。

因此来自文档

在包含当前选择的行周围添加一个HTML块级元素，如果存在则替换包含该行的block元素（在Firefox中是例外，它会包装所有包含该行的block元素）。需要一个标记名字符串作为值参数。几乎所有块级元素都可以使用。

但是您可以使用insertHTML命令。

<!DOCTYPE html />
<html lang="en">
  <head>
    <title>Bootstrap Example</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link
      rel="stylesheet"
      href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css"
    />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
  </head>

  <body>
    <div class="container">
      <h2>Comment</h2>
      <div class="panel panel-default">
        <div class="panel-heading">
          <button data-command="h1" class="btn btn-default btn-sm">
            Heading1
          </button>
          <button data-command="h2" class="btn btn-default btn-sm">
            Heading2
          </button>
          <button data-command="h3" class="btn btn-default btn-sm">
            Heading3
          </button>
          <button data-command="h4" class="btn btn-default btn-sm">
            Heading4
          </button>
          <button data-command="bold" class="btn btn-default btn-sm">
            Bold
          </button>
        </div>
        <div class="panel-body" contenteditable>Sample comment</div>
      </div>
    </div>
  </body>
  <script>
    $(function() {
      $(".btn").click(function() {
        var command = $(this).data("command");
        if (
          command == "h1" ||
          command == "h2" ||
          command == "h3" ||
          command == "h4"
        ) {
          const selection = window.getSelection();
          document.execCommand(
            "insertHTML",
            false,
            `<${command}>${selection}</${command}>`
          );
        } else {
          document.execCommand(command);
        }
      });
    });
  </script>
</html>

也不要忘记序列化您的内容。

execCommand h1样式仅选中的文本

1 个答案: