Jquery <；预处理>；内部内容可编辑，替换<；br>；使用\r\n

我有一个内容可编辑分区。在此分区中，我插入了一个

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

不会开火。我还尝试处理父div上的正常键控，并将pre标记中的所有br替换为\r\n。但这会弄乱插入符号，而且很笨重

有没有更好的方法

我可能不得不在服务器端剥离它们，但我不愿意

非常感谢
简单的回答：在服务器端执行。
contentEditable
div中的任何内容都只是文本。因此，您的
代表将永远不会开火

我还建议看一下插件，它可能已经在处理所有这些问题了。
简单的答案：DoIt服务器端。
contentEditable
div中的任何内容都只是文本。因此，您的
代表将永远不会开火

我还建议看看插件，它可能已经处理了所有这些问题。
我已经找到了解决方案。它不是完美的，我正在考虑按照主任先生的建议尝试集成。唯一的问题是，我当前的解决方案允许我编辑将保存在后端并稍后显示的标记。这是真正的所见即所得。我应该提到，我的编辑器是一篇更大的contenteditable文章的一部分，我想在其中添加一些代码片段

使用像codemirror这样的编辑器会很棒，但我必须在保存之前去掉它，并且我的代码块必须显示为textarea（不像pre那样对RSS友好）

不管怎么说，对这里感兴趣的人来说，我的解决方案/黑客


您可以从嵌套的

然后我添加了一个这样的委托

此事件触发。我添加了一个单击/模糊删除来切换内部pre标记上的contenteditable，这样就不会在之后保存下来，但这可以在服务器端完成。这允许我在tab键上插入\t字符，\r\n代替br。
我实际上找到了一个解决方案。它不是完美的，我正在考虑按照主任先生的建议尝试集成。唯一的问题是，我当前的解决方案允许我编辑将保存在后端并稍后显示的标记。这是真正的所见即所得。我应该提到，我的编辑器是一篇更大的contenteditable文章的一部分，我想在其中添加一些代码片段

使用像codemirror这样的编辑器会很棒，但我必须在保存之前去掉它，并且我的代码块必须显示为textarea（不像pre那样对RSS友好）

不管怎么说，对这里感兴趣的人来说，我的解决方案/黑客


您可以从嵌套的

然后我添加了一个这样的委托

此事件触发。我添加了一个单击/模糊删除来切换内部pre标记上的contenteditable，这样就不会在之后保存下来，但这可以在服务器端完成。这允许我在选项卡键上插入\t字符，并\r\n代替br。
感谢您发布解决方案！您能告诉我您的代码中的
rangy
对象是什么吗？谢谢您发布您的解决方案！你能告诉我你的代码中的
rangy
对象是什么吗？
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');
    });