javascript - rails : Medium Editor not working with html stored in database

Question

我使用Medium editor能够编辑一些内容然后将其存储到数据库中。对于"new" View ，我使用 render 显示模板中的 html。然后，对于“编辑” View ，我显示带有数据库查询的 html。中型编辑器显示在"new" View 中，但不显示在“编辑” View 中(但 contenteditable 是 true)。知道为什么它不适用于此特定 View 吗？

新 View :

<nav id="nav_sections">
  <ul id="ul_menu">
    <li id="header_nav">GO TO SECTION</li>
    <li><a href="#title">Introduction</a></li>
  </ul>
  <%= render 'form', guide: @guide %>
</nav>

<%= render 'layouts/template' %>

<% content_for :save_js do %>
  <script type="text/javascript" src="/javascripts/lib/save.js"></script>
  <script type="text/javascript" src="/javascripts/lib/menu.js"></script>
<% end %>

编辑 View :

<nav id="nav_sections">
  <ul id="ul_menu">
    <li id="header_nav">GO TO SECTION</li>
    <li><a href="#title">Introduction</a></li>
  </ul>
  <%= render 'form', guide: @guide %>
</nav>

<%= raw @guide.html %>

<% content_for :save_js do %>
  <script type="text/javascript" src="/javascripts/lib/menu.js"></script>
  <script type="text/javascript" src="/javascripts/lib/save.js"></script>
<% end %>

保存.js:

$('.container_content').children('section').children().each(function (element) {
  if ($(this).is("section")) {
    $(this).each(function () {
      $(this).children().each(function () {
          $(this).addClass( "changeable" );
      });
    });
  }
  else {
      $(this).addClass( "changeable" );
  }
});

var editor = new MediumEditor('.changeable');

var contents = $('.changeable').html();
var new_content = $('.container_content').clone().wrap('<p>').parent().html();
$('#input').val(new_content);
$('.changeable').blur(function() {
    if (contents!=$(this).html()){
      var guide = $('.container_content').clone().wrap('<p>').parent().html();
      $('#input').val(guide);
      contents = $(this).html();
    }
});

"new" View 的源代码，媒体编辑器已加载:

“编辑” View 的源代码，中型编辑器未加载:

Answer 1

我不太了解rails，所以我不确定“保存 View ”和“编辑 View ”之间有什么区别。您是通过浏览器导航在这些完全独立的页面之间导航，还是在这些 View 之间切换而不加载单独的页面？

查看一些实际 html 的样子可能会有所帮助，特别是包含 .container_content 的 html。元素，<section>元素，以及 #input元素。

我不确定 menu.js 中包含什么内容，但 View 之间的一个区别是 menu.js和save.js以不同的顺序加载，因此可能存在某些内容。

其他一些可以帮助您的 MediumEditor 提示:

• editor.getContent(index)和editor.serialize()是两个 helper 在编辑器中检索 html 的方法。 getContent(index)让你获取一个元素的 html 内容在编辑器内，而 serialize()将返回包含以下内容的 JSON编辑器中所有元素的innerHTML。
• 类似于 editor.getContent(index) ，还有一个 editor.setContent(html, index)方法将允许你指定编辑器中元素的 html。这是在实例化 MediumEditor 对象后填充编辑器元素的最佳方法。
• 如果您在实例化编辑器后尝试向同一编辑器实例添加更多元素，则应使用 editor.addElements()辅助方法。
• 可以找到我调用的辅助方法的文档 here .