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

Question

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

我对页面内的所有内容都使用了 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>

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

当用户点击内容时，有没有办法显示内联工具栏？

标签： javascriptphphtmljquerycss

Answer 1

是的，您可以制作一个隐藏左侧绝对位置的工具栏，当有人单击内容时，您可以删除隐藏并在其上应用显示。