javascript - 单击工具提示时无法使所选文本变为粗体/下划线-6ren

javascript - 单击工具提示时无法使所选文本变为粗体/下划线

转载作者：行者123 更新时间：2023-11-27 23:05:47

我有一些内容可编辑的段落，我希望能够在双击时使某些单词加粗下划线。当我双击一个单词时，它会被选中，并显示一个包含 3 个选项的工具提示。但是，单击工具提示选项后，选择就会消失，并且文本不会发生任何更改。

问题是:1) 如何将选定的文本加粗？

(问题 2 并不重要，也没有必要。)2)如何保持受影响的文本被选中？

JavaScript 解决方案比 jQuery 更受青睐。

代码如下:

var allpara = document.querySelectorAll('p');
[].forEach.call(allpara, function(para) {
  para.addEventListener('click', showTooltip, false);
});

var tooltip = document.getElementById('tooltip');

function showTooltip(e) {
  tooltip.style.display = 'block';
}

var tooltipOptions = document.querySelectorAll('.tooltip-option');
[].forEach.call(tooltipOptions, function(options) {
  options.addEventListener('click', function(e) {
    console.log(e.target.id);
    document.execCommand('bold');
  }, false);
});

body {
  position: relative;
}
#tooltip {
  display: none;
  position: fixed;
  background: black;
  color: white;
  width: 120px;
  font-size: 2em;
  border-radius: 4px;
  top: 10px;
  right: 150px;
}
.tooltip-option {
  width: 35px;
  margin-left: 10px;
  cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<body>
  <div id="notepad">
    <p class="notepad-paragraph" contenteditable="true">This is my text-ed</p>
    <p class="notepad-paragraph" contenteditable="true">itor. This is what I have</p>
    <p class="notepad-paragraph" contenteditable="true">built till no</p>
    <p class="notepad-paragraph" contenteditable="true">w. Now I am building it fur</p>
    <p class="notepad-paragraph" contenteditable="true">ther. This is fun.</p>
  </div>

  <div id="tooltip">
    <span id="tooltip-bold" class="tooltip-option">B</span>
    <span id="tooltip-und" class="tooltip-option">U</span>
    <span id="tooltip-red" class="tooltip-option">R</span>
  </div>
</body>

最佳答案

如果您更改 <span>在您的“工具提示”中:<button>您的解决方案已经有效!

只要您的编辑器样式按钮是输入类型元素，所选文本就会保持选中状态。

无论如何更改了您的代码片段 - id 现在已经包含 execCmd 所需的命令 - 因此下划线和斜体也可以使用。在 js 部分，您只需将 execCMD 行更改为: document.execCommand(this.id);

var allpara = document.querySelectorAll('p');
[].forEach.call(allpara, function(para) {
  para.addEventListener('click', showTooltip, false);
});

var tooltip = document.getElementById('tooltip');

function showTooltip(e) {
  tooltip.style.display = 'block';
}

var tooltipOptions = document.querySelectorAll('.tooltip-option');
[].forEach.call(tooltipOptions, function(options) {
  options.addEventListener('click', function(e) {
    console.log(e.target.id);
    document.execCommand(this.id);
  }, false);
});

body {
  position: relative;
}
#tooltip {
  display: none;
  position: fixed;
  background: black;
  color: white;
  width: 120px;
  font-size: 2em;
  border-radius: 4px;
  top: 10px;
  right: 150px;
}
.tooltip-option {
  margin-left: 10px;
  cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<body>
  <div id="notepad">
    <p class="notepad-paragraph" contenteditable="true">This is my text-ed</p>
    <p class="notepad-paragraph" contenteditable="true">itor. This is what I have</p>
    <p class="notepad-paragraph" contenteditable="true">built till no</p>
    <p class="notepad-paragraph" contenteditable="true">w. Now I am building it fur</p>
    <p class="notepad-paragraph" contenteditable="true">ther. This is fun.</p>
  </div>

  <div id="tooltip">
    <button id="bold" class="tooltip-option">bold</button>
    <button id="underline" class="tooltip-option">underline</button>
    <button id="italic" class="tooltip-option">italic</button>
    <button id="undo" class="tooltip-option">undo</button>
  </div>
</body>