jquery - 内内容可编辑，将 替换为\r\n

Question

我有一个内容可编辑的 div。在其中我插入一个 <pre>some code</pre>标签。该标签旨在允许用户输入格式化代码，类似于 SO。

我遇到的问题是 FF 正在插入 <br>标签代替\r\n，这在正常的 Html 中是正确的，但在 pre 中我实际上想要\r\n。

我尝试将委托(delegate)附加到父 contenteditable。但这不会触发嵌套 dom 元素。所以

$('#contenteditablediv').delegate('pre', 'keyup', function() { ... });

不着火。我还尝试过处理父 div 上的正常 keyup 并用\r\n 替换 pre 标记中的所有 brs。但这会弄乱插入符号并且很笨重。

有这样做的首选方法吗？

我可能不得不诉诸于在服务器端剥离它们，但我宁愿不这样做。

非常感谢

Answer 1

我确实找到了解决办法。它并不完美，我正在考虑尝试集成 codemirror正如酋长建议的那样。唯一的问题是我当前的解决方案允许我编辑将保存在后端并稍后显示的标记。它确实是所见即所得。我应该提到我的编辑器是一篇更大的内容可编辑文章的一部分，我想在其中添加一些代码片段。

使用像 codemirror 这样的编辑器会很棒，但我必须在保存之前将其删除，并且我的代码块必须显示为文本区域(不像以前那样对 RSS 友好)。

无论如何，对于任何对此感兴趣的人来说，这是我的解决方案/黑客。

<小时/>

您可以从嵌套 <pre> 委托(delegate)事件contenteditables 中的标签等，只要它们包含在带有 contenteditable="false" 的元素中即可。因此，不要插入:

<pre>some code</pre

我插入:

<code contenteditable="false"><pre>code snippet here</pre></code>

然后我像这样添加了一个委托(delegate)。

var getFirstRange = function() {
    var sel = rangy.getSelection();
    return sel.rangeCount ? sel.getRangeAt(0) : null;
}

contenteditablediv
    .delegate('pre', 'keydown', function(event) { 
        switch(event.keyCode) {
            case 13:
                var range = getFirstRange(), 
                    added = false,
                    newline = document.createTextNode('\r\n');

                if (range) {
                    range.insertNode(newline);              
                    range.setEndAfter(newline);
                    range.setStartAfter(newline);
                    var sel = rangy.getSelection();
                    sel.setSingleRange(range)
                    added = true;
                } 

                if (added) {
                    event.preventDefault();
                }
                break;
            case 9:
                // insert a tab
                var range = getFirstRange(),
                    tab = document.createTextNode('\t');
                if (range) {
                    range.insertNode(tab);
                    var sel = rangy.getSelection();
                    range.setEndAfter(tab);
                    range.setStartAfter(tab);
                    sel.setSingleRange(range)
                } 
                return false;   
        }
    }).delegate('pre', 'click', function() { 
        $(this).attr('contenteditable', true);
    }).delegate('pre', 'blur', function() {
        $(this).removeAttr('contenteditable');
    });

此事件触发。我添加了一个单击/模糊删除来切换内部预标记上的内容可编辑，因此之后不会保存下来，但这可以在服务器端完成。这允许我在 Tab 键上插入\t 字符并用\r\n 代替 br。