Rails：Medium Editor不能與數據庫中存儲的html一起工作

我使用Medium editor可以編輯一些內容，然後將其存儲到數據庫中。對於「新」視圖，我使用render來顯示模板中的html。然後，對於「編輯」視圖，我顯示一個查詢到數據庫的HTML。中等編輯器顯示「新」視圖，但不顯示「編輯」視圖（但contenteditable爲true）。任何想法爲什麼它不適用於這個特定的視圖？Rails：Medium Editor不能與數據庫中存儲的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(); 
    } 
});

的源代碼，該介質編輯器被加載：

「編輯」鑑於

源代碼，編輯器中未加載：

來源

2017-02-04 AlphaNico

不知軌道非常好，所以我不知道什麼是「保存視圖」和之間的區別「編輯視圖」是。這些完全獨立的頁面可以通過瀏覽器導航進行瀏覽，還是在沒有單獨頁面加載的情況下在這些視圖之間切換？

這可能有助於看看一些實際的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()輔助方法。我可以找到here。

來源

2017-02-11 01:21:38

Rails：Medium Editor不能與數據庫中存儲的html一起工作

回答

相關問題