时间戳

首页 > 解决方案 > 使用 javascript (Trix/ActiveText) 设置富文本区域的草稿值

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

问题描述

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

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

我不确定这是为什么。

标签： javascriptinnerhtmlrich-text-editorruby-on-rails-6

解决方案

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>

推荐阅读