0

我使用Medium 编辑器能够编辑一些内容，然后将其存储到数据库中。对于“新”视图，我使用渲染显示来自模板的 html。然后对于“编辑”视图，我显示带有数据库查询的 html。Medium 编辑器显示“新”视图，但不显示“编辑”视图（但 contenteditable 为真）。知道为什么它不适用于这个特定的视图吗？

新观点：

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

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

“新”视图的源代码，媒体编辑器已加载： 在此处输入图像描述

“编辑”视图的源代码，Medium Editor 未加载： 在此处输入图像描述

4

1 回答 1

1

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

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

我不确定 中包含什么menu.js，但视图之间的一个区别是menu.js和save.js以不同的顺序加载，所以那里可能有一些东西。

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

  • editor.getContent(index)并且editor.serialize()是在编辑器中检索 html 的两个辅助方法。 getContent(index)让您在编辑器中获取一个元素的 html 内容，同时serialize()返回包含编辑器中所有元素的 innerHTML 的 JSON。
  • 与 类似editor.getContent(index)，还有一种 editor.setContent(html, index)方法可以让您在编辑器中指定元素的 html。这是在 MediumEditor 对象被实例化后填充编辑器元素的首选方式。
  • 如果您在实例化后尝试将更多元素添加到编辑器的同一实例，则应使用editor.addElements()辅助方法。
  • 我调用的辅助方法的文档可以在这里找到。
于 2017-02-11T01:21:38.587 回答