Как отразить / скопировать содержимое div в поле формы с javascript

Question

У меня есть встроенный текстовый редактор tinyMCE, который в реальном времени редактирует контент, когда пользователь печатает. Требуется содержимое html_safe, например:

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

и превращает его в contenteditable 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>

Как я могу в реальном времени отразить или скопировать contenteditable div / html в форму для @ object.content?

В приведенном ниже примере я хочу отразить любые события нажатия клавиш, которые пользователь вводит в .editor (в виде элемента HTML), и скопировать его в виде текста в форму 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 Fiddle показывает, как вы можете положиться на события в TinyMCE, чтобы заставить JavaScript что-то делать. В этом примере содержимое HTML помещается в соседнюю <div>.

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