什麼所見即所得編輯器與速度模板一起工作？

Question

我一直在（優秀）CKeditor工作了一段時間，但是當我開始與NVelocity結合時，我開始遇到麻煩。事實證明，如果我使用一個上下文關鍵字（比如$ GarbagePailKids其中包括錶行的HTML）是這樣的：

<table> 
    <tbody>$GarbagePailKids</tbody> 
</table> 

的CKEditor的所見即所得的方式糾正無效的HTML爲：

$GarbagePailKids 
<table> 
    <tbody></tbody> 
</table> 

現在一切我一直在閱讀，暗示你沒有（或者不能）關閉CKeditor糾正無效HTML的能力，而且我不願意切換回textarea（在用這個編輯器破壞我的用戶這麼久之後）。對於像CKEditor這樣可行的任何想法，或者CKEditor的插件都可以阻止這種行爲？

Answer 1

經過許多所見即所得的實現後，我得出了一個不幸的結論，即我嘗試做的事不能用富文本編輯器完成，但是從StackOverflow獲取靈感，我可以渲染文本區域的內容（一個iframe感謝無效HTML和一切），以幫助從this answer我創造了這個：

<h1>Input</h1> 
<textarea id='Template' style="width: 98%;"> 
    <p>Hello World !!</p> 
</textarea> 
<h1>Output</h1> 
<iframe id="TemplateView" style="width: 98%;"></iframe> 
<script> 
$(function() { 
    var template = $('#Template'), 
     view = $('#TemplateView'), 
     update = function() { 
      view.contents().find('html').html(template.val()); 
     }; 

    $(template).on('keyup change', update); 
    update(); 
}); 
</script> 

，你可以看到here。

現在，這確實不解決在看到一些「正確的方式」無效的HTML的問題，但它讓我保持所見即所得的編輯器的預覽方面，而不去嘗試和糾正內容的願望。

Answer 2

我不確定CKEditor是否允許你想要的行爲。我建議調查猛禽編輯器 - http://www.raptor-editor.com/

我已經把如何與選擇，將保證編輯器不會嘗試解決無效的HTML實例猛禽一個例子 - JSFiddle。

猛禽實例是：

<textarea id="raptor"> 
    <table> 
     <tbody>$GarbagePailKids</tbody> 
    </table> 
</textarea> 
​ 
<script type="text/javascript"> 
    $('#raptor').editor({ 
     // Enable editor immediately 
     autoEnable: true, 
     // Replace the element with the editor 
     replace: true, 
     // Disable the cancel, save & dock buttons 
     disabledUi: ['cancel', 'save', 'dock'], 
     // Disable the unsaved edits warning, and the clean & empty element plugins, both of which will attempt to fix broken HTML 
     disabledPlugins: ['unsavedEditWarning', 'clean', 'emptyElement'], 
     // Disable the "you have unsaved edits on this page" warning triggered when one attempts to leave the page after editing 
     unloadWarning: false, 
     // Plugin specific options 
     plugins: { 
      // Docking options forcing the editor to be always docked to the textarea 
      dock: { 
       docked: true, 
       dockToElement: true, 
       persistent: false 
      }     
     }     
    }); 
</script> 

無論如何，瀏覽器通常會嘗試糾正無效的HTML。