Установка чернового значения области расширенного текста с помощью javascript (Trix / ActiveText) - PullRequest
0 голосов
/ 17 января 2020

У меня есть кнопка «Сохранить черновик», которая успешно сохраняет содержимое сообщения как черновик. Когда страница загружается с черновиком, я добавляю следующий скрипт в 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>

Когда я работал над страница и обновление между правками. Я думал, что у меня все работает, так как мое черновое значение присутствовало в моем редакторе форматированного текста. Однако, когда я go перехожу со своей индексной страницы на страницу «Обсуждение» (в которой есть редактор форматированного текста и черновик), внутренняя HTML не изменяется.

Скрипт все еще загружается и выглядит вот так:

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

Если я обновлю sh страницу, она снова работает!

Я не уверен, почему это так.

1 Ответ

0 голосов
/ 18 января 2020

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

Этот урок 'Ruby на Rails - Railscasts # 324 Передача данных в Javascript' помог мне решить эту проблему. Передача 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 pack 'on_new_page. js', который загружается внизу приложения. html .erb, чтобы пропустить турболинку рельсов. В этом файле 'on_new_page. js' вызывается функция внутри 'javascript / components / file_name. js'.

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