0

I have a tinyMCE inline text editor that that live edits content as the user is typing. It takes html_safe content like:

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

and turns it into a contenteditable div like so:

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

How can I, in real-time, mirror or copy the contenteditable div/html into a form for @object.content?

In the below example, I want to mirror any keypress events the user inputs on .editor (as an html element div), and copy it as text into the text_area :content form?

<%= 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 %>

How would one accomplish this with javascript?

Alex
  • 95
  • 1
  • 8

1 Answers1

0

This TinyMCE Fiddle shows how you can rely on events in TinyMCE to trigger JavaScript to do something. The example places the HTML content in an adjacent <div>.

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

Michael Fromin
  • 13,131
  • 2
  • 20
  • 31