使用 javascript (Trix/ActiveText) 设置富文本区域的草稿值答案

【问题标题】：Setting draft value of rich text area with javascript (Trix/ActiveText)使用 javascript (Trix/ActiveText) 设置富文本区域的草稿值
【发布时间】：2020-01-17 00:42:31
【问题描述】：

我有一个“保存草稿”按钮，可以成功地将邮件内容保存为草稿。当页面加载草稿时，我将以下脚本添加到 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>

当我在页面上工作并在两次编辑之间刷新时，我认为一切正常，因为我的草稿值存在于我的富文本编辑器中。但是，当我从索引页面转到“谈话”页面（具有富文本编辑器和草稿）时，innerHTML 没有改变。

脚本仍在加载，如下所示：

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

如果我刷新页面，它会再次工作！

我不确定这是为什么。

【问题讨论】：

标签： javascript innerhtml rich-text-editor ruby-on-rails-6

【解决方案1】：

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

本教程“Ruby on Rails - Railscasts #324 Passing Data To Javascript”帮助我解决了这个问题。将 ruby on rails 数据传递到 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 的 turbolinks。在这个“on_new_page.js”文件中，“javascript/components/file_name.js”中的函数被调用。

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

【讨论】：