Question

我一直在和（优秀的）CKeditor合作一段时间，但是当我开始将它与NVelocity结合起来时，我开始遇到麻烦。事实证明，如果我使用上下文关键字（例如$ GarbagePailKids，其中包括表行的HTML），如下所示：

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

CKEditor的WYSIWYG模式将无效的HTML更正为：

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

现在我读过的所有内容都表明你没有（或不能）关闭CKeditor修正无效HTML的能力，我不想再切换回textarea（在用户长期损坏用户之后）用这个编辑器）。关于像CKEditor那样有用的东西的想法，甚至是阻止这种行为的CKEditor插件？

Answer 1

我不确定CKEditor是否允许您想要的行为。我建议调查Raptor编辑器 - 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

在抓住了许多WYSIWYG实现之后，我得出了一个不幸的结论，即我想要做的事情无法通过富文本编辑器完成，但是从StackOverflow获取灵感，我可以渲染文本区域的内容（无效）感谢来自this answer的帮助，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>

您可以看到here。

现在这样做不解决了以某种“正确方式”看到无效HTML的问题，但是它让我保持所见即所得编辑器的预览方面，而不想尝试和纠正内容。< / p>

Answer 3

尝试一下：

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

什么WYSIWYG编辑器与Velocity模板一起使用？

3 个答案: