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

Posted 2023-05-08

【中文标题】如何为 contenteditable="true" 内容添加内联工具栏？

【英文标题】：How to add inline toolbar for contenteditable="true" content?

【发布时间】：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>

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

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

【问题讨论】：

并不简单。这样做超出了 *** 的范围，可能有一个 jQuery 插件可以帮助您

你能推荐任何可以帮助的jQuery插件

【参考方案1】：

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

【讨论】：

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