Javascript Div content可编辑并绑定到输入

v-ajax是我的一个指令，当您按下submit时，它会自动提交表单。表单获取我的所有输入，序列化它们并通过ajax提交它们。现在，对于我的一个表单，我希望允许使用粗体和斜体，而不是使用

TextArea

，因此我使用

div

和

contenteditable

属性

这是我试图完成的一个精简版本

<form v-ajax action="someurl">
    <div contenteditable>{{ message }}</div>
    <input name="content" type="hidden" value="{{ message}}">
    ... bunch  of other inputs...
    <input type="submit" value="Save">
</form>

{{message}}
... 一堆其他的输入。。。

---

我的问题是，如何使人在

div中键入的内容自动用内容名称填充输入值。
这里有一种方法可以用键入到div中的内容填充隐藏输入：

首先，为了能够访问它们，请为div和hidden输入提供唯一ID：

<div id="contenteditable" contenteditable>...</div>
...
<input id="content" name="content" type="hidden" value="{{ message}}">

这是一个例子

var editDiv = document.getElementById('contenteditable');
editDiv.addEventListener( 'keyup', function () {
    var hiddenInput = document.getElementById('content');
    hiddenInput.value = this.textContent;
});