Rails：Mediumデータベースに格納されたhtmlで動作しないエディタ

Question

私はMedium editorを使用して一部のコンテンツを編集し、それをデータベースに格納できるようにします。 「新しい」ビューでは、レンダリングを使用してテンプレートから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(); 
    } 
}); 

ソースコードは、ミディアムエディタがロードされます。

「編集」ビューの

ソースコードは、ミディアムエディタがロードされていません： は

Answer 1

私は非常によくレールを知らないので、私はよく分からないものを「保存ビュー」との違い"編集ビュー"はありません。これらは完全に別々のページで、ブラウザのナビゲーションを介してナビゲートするか、別々のページの読み込みを行わずにこれらのビューを切り替えることはできますか？

実際のhtmlの外観、特に.container_content要素、<section>要素、および#input要素を含むhtmlを確認するのに役立ちます。

私はmenu.jsに含まれているかわからないんだけど、景色の違いの1つは、menu.jsとsave.jsは異なる順序でロードされているということなので、そこに何かがあるかもしれません。

あなたを助けることができるいくつかの他のMediumEditorのヒント：

• editor.getContent(index)とeditor.serialize()は、エディタ内のHTMLを取得するための2つのヘルパー メソッドです。 getContent(index)は、1つの要素 のhtmlコンテンツをエディタ内で取得できます。serialize()は、エディタ内のすべての要素のinnerHTMLを というJSONを返します。
• editor.getContent(index)と同様に、 editor.setContent(html, index)メソッドもあります。 の要素のhtmlを指定することができます。これは、MediumEditorオブジェクトがインスタンス化された後にエディタ要素を設定するための好ましい方法です。
• 既にインスタンス化された後に同じエディターインスタンスに要素を追加しようとする場合は、editor.addElements()ヘルパーメソッドを使用する必要があります。
• 私が呼び出したヘルパーメソッドのドキュメントはhereです。