3

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

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

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

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

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

4

3 回答 3

3

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

我已经整理了一个示例，说明如何使用选项实例化 Raptor，以确保编辑器不会尝试修复无效的 HTML - JSFiddle。

Raptor 实例化是：

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

于 2012-08-09T23:37:28.133 回答
1

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

<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 的问题，但是它让我可以保留所见即所得编辑器的预览方面，而无需尝试更正内容。

于 2012-08-15T22:50:36.507 回答
1

尝试这个：

#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>
于 2019-01-30T19:51:29.067 回答