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

当我在页面上工作并在编辑之间刷新时，我认为我一切都可以正常工作，因为我的草稿值存在于我的富文本编辑器中。但是，当我从索引页转到"讨论"页面(具有富文本编辑器和草稿(时，内部HTML不会更改。

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

<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 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文件中，你可以使用变量Name作为变量

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