htmx - 如何在 HTMX 请求中包含 contenteditable 元素的内容？

Question

我想在 contenteditable 字段/div 更改时发布它的内容。hx-trigger="change"没有触发，但使用hx-trigger="blur"没问题。如何在请求中提交 contenteditable div 的值？

  <div id='parent-div'>
      <div contenteditable='true'
           hx-post="/update_db"
           hx-trigger="blur"
           hx-target="#parent-div"
           hx-swap="outerHTML">
               Hello, I am a content editable field
      </div>
  </div>

Answer 1

我不相信 htmx 支持开箱即用地提交 contenteditable 值。您可能需要将 contenteditable 中的内容文本镜像到隐藏输入并将hx属性移动到父 div。

您可以使用类似https://alpinejs.dev/或 htmx 的伴侣https://hyperscript.org/

使用超脚本，您可以这样做：

<div id='parent-div' 
    hx-post="/update_db"
    hx-trigger="blur"
    hx-target="#parent-div"
    hx-swap="outerHTML">

    <div id="editordiv" contenteditable='true'>
    Hello, I am a content editable field
    </div>

    <input type="hidden" name="editor" _="on keyup from #editordiv put its innerHTML into me" />
</div>

我从 htmx Discord 中找到了一个旧参考，它提供了另一种方法：

<form hx-post="/whatever" 
        hx-vals="javascript: editable:htmx.find('#myEditable').innerHTML"> ...