如何为 contenteditable="true" 内容添加内联工具栏？答案

【问题标题】：How to add inline toolbar for contenteditable="true" content?如何为 contenteditable="true" 内容添加内联工具栏？
【发布时间】：2021-09-13 04:07:42
【问题描述】：

我正在处理一个可以在页面中编辑其内容的页面。

我对页面内的所有内容都使用 contenteditable="true"。

当用户单击要编辑的部分时，我想显示一个包含一些基本选项的内联工具栏。（类似：https://builder.dynamicxx.com/templates/93218/newview）

我的代码如下所示：

<div class="home">
  <form action="action.php" method="post">
    <div class="heading">
      <h1 contenteditable="true">Page Heading</h1>
      <input type="hidden" class="clone-heading">
    </div>
    <div class="content">
      <p contenteditable="true">Page content</p>
      <input type="hidden" class="clone-content">
    </div>
  </form>
</div>

我正在使用带有隐藏输入字段的表单来保存用户添加的内容。

有没有办法在用户点击内容时显示内嵌工具栏？

【问题讨论】：

并不简单。这样做超出了 StackOverflow 的范围，可能有一个 jQuery 插件可以帮助您
你能推荐任何可以帮助的jQuery插件

标签： javascript php html jquery css

【解决方案1】：

是的，您可以将左侧绝对位置隐藏的工具栏，当有人点击内容时，您可以删除隐藏并应用显示。

【讨论】：

我对此很熟悉。但我正在寻找一个插件或任何可以从中获取工具栏的东西。