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>

我如何实时将contenteditable 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://12factor.net

如何将div内容镜像/复制到带有javascript的表单字段中

1 个答案: