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

Question

我想 post contenteditable field/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/ or htmx's companion https://hyperscript.org/

使用 hyperscript，你可以用这样的方式来完成：

<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"> ...

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

How do I include the contents of a contenteditable element in a HTMX request?

htmx