所见即所得编辑器适用于速度模板

Question

我已经使用（优秀的）CKeditor一段时间了，但是当我开始将其与NVelocity结合使用时，我开始遇到麻烦。 事实证明，如果我使用上下文关键字（例如$GarbagePailKids包含表格行的 HTML），如下所示：

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

CKEditor的所见即所得模式将无效的HTML更正为：

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

现在我一直在阅读的所有内容都表明您不会（或不能）关闭 CKeditor 更正无效 HTML 的功能，我不想切换回文本区域（在用这个编辑器宠坏了我的用户这么长时间之后）。 关于像 CKEditor 这样确实有效的东西，甚至是防止这种行为的 CKEditor 插件的任何想法？

Answer 1

我不确定 CKEditor 是否允许您想要的行为。我建议调查猛禽编辑器 - http://www.raptor-editor.com/

我整理了一个如何实例化Raptor的示例，这些选项将确保编辑器不会尝试修复无效的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。

Answer 2

试试这个：

#set( $openComment = "<!--" )
#set( $closeComment = "-->" )
<table>
  <tbody>
      <!-- begin of rows $closeComment $GarbagePailKids $openComment end of rows -->
  </tbody>
</table>

如果$GarbagePailKids是这样的：

<tr>
  <td>A</td>
</tr>
<tr>
  <td>B</td>
</tr>

结果是：

<table>
  <tbody>
    <!-- begin of rows -->
    <tr>
      <td>A</td>
    </tr>
    <tr>
      <td>B</td>
    </tr>
    <!-- end of rows -->
  </tbody>
</table>

Answer 3

在浏览了许多所见即所得的实现之后，我得出了一个不幸的结论，即我试图做的事情无法使用富文本编辑器完成，但是从 StackOverflow 中获得灵感，我可以在 iframe 中渲染文本区域的内容（无效的 HTML 和所有内容），这要归功于这个答案的帮助，我创建了这个：

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

你可以在这里看到。

现在这并不能解决以某种"正确方式"查看无效 HTML 的问题，但它让我保留所见即所得编辑器的预览方面，而不想尝试更正内容。