Question

我使用Medium editor来编辑某些内容，然后将其存储到数据库中。对于“新”视图，我使用渲染从模板显示html。然后，对于“编辑”视图，我显示带有查询的html到数据库。 “媒体”编辑器显示“新”视图，但不显示“编辑”视图（但是可信的是真实的）。知道为什么它不适用于这个特定的观点吗？

新观点：

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

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

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

Answer 1

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

查看一些实际的html可能会有所帮助，尤其是包含.container_content元素，<section>元素和#input元素的html。

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

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

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

Rails：Medium Editor不使用存储在数据库中的html

1 个答案: