Rails: Редактор среды, не работающий с html, хранящийся в базе данных

Question

Я использую Medium editor, чтобы иметь возможность редактировать некоторый контент, а затем хранить его в базе данных. Для «нового» представления я отображаю html из шаблона с помощью рендеринга. Затем для представления «edit» я показываю html с запросом к базе данных. Редактор Medium отображает «новый» вид, но не для «редактирования» (но contenteditable is 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(); 
    } 
}); 

Исходный код "новой" точки зрения, средний редактор загружен:

Исходный код «изменить» точки зрения, средний редактор не загружен:

Answer 1

Я не знаю, рельсы очень хорошо, так что я не уверен, что разница между «сохранить зрения» и «редактировать вид». Являются ли эти полностью отдельными страницами, которые вы перемещаете между браузерами, или переключаетесь между этими видами без отдельной загрузки страницы?

Это может помочь узнать, как выглядит какой-то фактический html, особенно html, содержащий элемент .container_content, элементы <section> и элемент #input.

Я не уверен, что содержится в 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.