如何将div内容镜像/复制到表单字段w / javascript

Question

我有一个tinyMCE内联文本编辑器，可以在用户输入时实时编辑内容。它需要html_safe内容，如：

@object.content = "<h1>Test Event</h1><h2>09/02/18 @ 04:20</h2><br><hr><p>Bring Cheese</p>"

并把它变成一个可信的div，如下所示：

<div class="editor mce-content-body mce-edit-focus" id="visibile-text" contenteditable="true" style="position: relative;" spellcheck="false"><h1>Second Test Event</h1><h2>09/02/18 @ 04:20</h2><p><br></p><hr><p>Bring Cheese</p></div>

我怎样才能实时地将可信的div / html镜像或复制到@ object.content的表单中？

在下面的示例中，我想镜像用户在.editor上输入的任何按键事件（作为html元素div），并将其作为文本复制到text_area :content表单中？

<%= form_with(model: @object, local: true) do |form| %>

    <%= form.hidden_field :event_id, value: @event.id %>    
    <%= form.text_area :content, :id => "hidden-text", :style => 'display: none;' %>

    <div class="editor" id="visibile-text"><%= @object.content.html_safe %></div>
    <script type="text/javascript">
          tinyMCE.init({
            selector: '.editor',
            menubar: false,
            inline: true,
            plugins: "save",
            toolbar: "none",
          });
        </script>
        <form><button name="submitbtn" id="submit-changes">Save</button></form>
<% end %>

如何用javascript实现这一目标？

Answer 1

这个TinyMCE小提琴展示了如何依靠TinyMCE中的事件来触发JavaScript来做某事。该示例将HTML内容放在相邻的<div>中。

http://fiddle.tinymce.com/Gegaab/5