Rails: Medium Editor not working with html stored in database

Question

I use the Medium editor to be able to edit some content and then store it to the database. For the "new" view, I display the html from a template using render. Then for the "edit" view I display the html with a query to the database. The Medium editor shows up for the "new" view but not for the "edit" view (but contenteditable is true). Any idea why it's not working for this specific view?

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

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

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

Source code of the "new" view, the Medium Editor is loaded:

Source code of the "edit" view, the Medium Editor is not loaded:

Answer 1

I don't know rails very well, so I'm not sure what the difference between a "save view" and an "edit view" are. Are these completely separate pages that you navigate between via browser navigation or do you switch between these views without a separate page load?

It might help to see what some of the actual html looks like, particularly the html that contains the .container_content element, the <section> elements, and the #input element.

I'm not sure what is contained in menu.js, but one difference between the views is that menu.js and save.js are loaded in different orders, so there could be something there.

Some other MediumEditor tips that could help you:

• editor.getContent(index) and editor.serialize() are two helper methods for retrieving the html within the editor. getContent(index) lets you get the html content of one element within the editor, while serialize() will return JSON that contains the innerHTML of all the elements within the editor.
• Similar to editor.getContent(index), there's also a editor.setContent(html, index) method which will allow you to specify the html of an element within the editor. This is the preferable way to populate an editor element after the MediumEditor object has been instantiated.
• If you're attempting to add more elements to the same instance of the editor after its already been instantiated, you should use the editor.addElements() helper method.
• Documentation for the helper methods I've called out can be found here.