Javascript Rails：媒体编辑器无法处理存储在数据库中的html

我使用可以编辑一些内容，然后将其存储到数据库中。对于“new”视图，我使用render显示模板中的html。然后，对于“编辑”视图，我将显示带有数据库查询的html。 介质编辑器显示为“新建”视图，但不显示为“编辑”视图（但contenteditable为true）。知道为什么它不适用于这个特定的视图吗

新观点：

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

转到第节

编辑视图：

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

转到第节

Save.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();
    }
});

$（'.container_content'）.children（'section'）.children（）。每个（函数（元素）{
如果（$（此）.is（“节”））{
$（此）。每个（函数（）{
$（this）.children（）.each（函数（）{
$（此）.addClass（“可更改”）；
});
});
}
否则{
$（此）.addClass（“可更改”）；
}
});
var editor=new MediumEditor（'.change'）；
var contents=$（'.changable'）.html（）；
var new_content=$（'.container_content'）.clone（）.wrap（''））.parent（）.html（）；
$（'输入'）.val（新内容）；
$（'.change'）.blur（函数（）{
if（contents！=$（this.html（））{
var guide=$（'.container_content'）.clone（）.wrap（''）.parent（）.html（）；
$（'输入'）.val（指南）；
contents=$（this.html（）；
}
});

“新建”视图的源代码，加载媒体编辑器：

“编辑”视图的源代码，未加载媒体编辑器：

---

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

它可能有助于查看某些实际html的外观，特别是包含

.container\u content

元素、

元素和

\input

元素的html

我不确定

menu.js

中包含什么，但视图之间的一个区别是

menu.js

和

save.js

以不同的顺序加载，因此可能会有一些内容

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

• editor.getContent（index）

  和

  editor.serialize（）

  是两个助手 在编辑器中检索html的方法。

  getContent（index）

  用于获取一个元素的html内容 在编辑器中，

  serialize（）

  将返回包含 编辑器中所有元素的innerHTML
• 类似于

  editor.getContent（index）

  ，还有一个

  editor.setContent（html，index）

  方法，该方法允许您 在编辑器中指定元素的html。这是在实例化MediumEditor对象后填充编辑器元素的首选方法
• 如果您试图在编辑器的同一实例已实例化后向其添加更多元素，则应使用

  editor.addElements（）

  helper方法
• 可以找到我调用的助手方法的文档