使用javascript（Trix / ActiveText）设置富文本区域的草稿值

Question

我有一个“保存草稿”按钮，可成功将邮件内容另存为草稿。当页面加载草稿时，我将以下脚本添加到HTML：

<% if @draft_msg.present? %>
  <script>
    const richInput = document.querySelector('trix-editor');
    richInput.innerHTML = `<%= @draft_msg.content %>`;
  </script>
<% end %>

这呈现为这样的内容：

<script>
    const richInput = document.querySelector('trix-editor');
    richInput.innerHTML = `<div class="trix-content">
  <div>zzzzzzzzzzzzzzzzz</div>
</div>
`;
</script>

[当我在页面上工作并在编辑之间刷新时，我以为我的所有工作都可以进行，因为我的草案值存在于RTF编辑器中。但是，当我从索引页面转到“对话”页面（具有富文本编辑器和草稿）时，innerHTML不会更改。

脚本仍处于加载状态，如下所示：

<script>
    const richInput = document.querySelector('trix-editor');
    richInput.innerHTML = `<div class="trix-content">
  <div>zzzzzzzzzzzzzzzzz</div>
</div>
`;
  </script>

如果刷新页面，它将再次正常工作！

我不确定为什么会这样。

Answer 1

https://www.youtube.com/watch?v=NBk_zalHnac

本教程“ Ruby on Rails-Railscasts＃324将数据传递给Javascript”帮助我解决了这个问题。如果您将Rails数据上的ruby数据传递到javascript文件，则很容易：

1）在您的html.erb文件中写：

# views/model_name/show.html.erb
<%= javascript_tag do %>
  window.variableName = `<%= @rails_instance.data %>`;
<% end %>

2）然后，您可以在javascript文件中将variableName用作变量

// javascript/components/file_name.js
console.log(variableName)

重要的是，我有一个单独的javascript包'on_new_page.js'，它会加载到application.html.erb的底部，以跳过Rails的涡轮链接。在此“ on_new_page.js”文件中，将调用“ javascript / components / file_name.js”内部的函数。

views/layouts/application.html.erb
    ...        
    <%= javascript_pack_tag 'on_new_page' %>
  </body>
</html>