Question

我有以下问题。在blockquote中添加contenteditable后，按Enter键即可移至新行并添加另一个blockquote元素。它永远持续下去，我无法摆脱格式化。所需的功能将是无序列表的功能。当您按Enter键时，它会添加一个新的空<li>元素，但如果再次按Enter键，它将转义格式，删除以前创建的<li>并添加<p>。

查看演示：http://jsfiddle.net/wa9pM/

我发现，在您创建<p>之前，我会在blockquote下创建一个空的blockquote。但有没有办法打破JavaScript的格式化行为？我不知道如何检查：如果光标在哪里，它是行的结尾，如果是块引用，按Enter键，请不要添加新的blockquote。

我正在使用此代码在JS中生成blockquote：

document.execCommand('formatBlock', false, 'blockquote');

Answer 1

在为iOS应用程序创建富文本编辑器时，我遇到了同样的问题。每次我在我的文本字段中插入<blockquote>标签并按 Enter ，就无法摆脱块引用。

经过一番研究，我找到了一个有效的解决方案。

查找内部HTML标记：

function whichTag(tagName){

    var sel, containerNode;
    var tagFound = false;

    tagName = tagName.toUpperCase();

    if (window.getSelection) {

        sel = window.getSelection();

        if (sel.rangeCount > 0) {
            containerNode = sel.getRangeAt(0).commonAncestorContainer;
        }

     }else if( (sel = document.selection) && sel.type != "Control" ) {

         containerNode = sel.createRange().parentElement();

     }

     while (containerNode) {

         if (containerNode.nodeType == 1 && containerNode.tagName == tagName) {

             tagFound = true;
             containerNode = null;

         }else{

             containerNode = containerNode.parentNode;

         }

     }

     return tagFound;
 }

检查block-quote标记的出现次数：

function checkBlockquote(){

    var input = document.getElementById('text_field_id');

    input.onkeydown = function() {

        var key = event.keyCode || event.charCode;

        if( key == 13){

            if (whichTag("blockquote")){

                document.execCommand('InsertParagraph');
                document.execCommand('Outdent');

            }

        }

    };

}

触发按键事件：

<body onLoad="checkBlockquote();">
<!-- stuff... -->
</body>

我相信上面的代码可以轻松调整以满足您的需求。如果您需要进一步的帮助，请随时提出。

Answer 2

这样的事情对我有用（至少在Chrome和Safari上）。

http://jsfiddle.net/XLPrw/

演示

$("[contenteditable]").on("keypress", function(e) {
    var range = window.getSelection().getRangeAt();
    var element = range.commonAncestorContainer;
    if(element.nodeName == "BLOCKQUOTE") {
        element.parentElement.removeChild(element);   
    }
});

没有进行任何广泛的测试，但看起来range.commonAncestorElement会在blockquote包含文本的情况下返回当前的textnode，或者在它不包含textnode的情况下返回blockquote元素（在Chrome上，{{1}添加了插入符号并且后面放置了插入符号）。在这种情况下，您可以删除新创建的blockquote。无论如何，在删除元素后，插入符号看起来像是位于满足的位置，尽管键入确认它正好在原始黑色引号之后。希望这能为您提供更具决定性的解决方案。

Answer 3

超级迟到的答案，但对我来说这是一个更简单的解决方案。希望它可以帮助其他人看。浏览器兼容性可能会有所不同。

YOUR_EDITABLE_ELEMENT.addEventListener('keyup', e => {
  if (e.which || e.keyCode === 13) {
    if (document.queryCommandValue('formatBlock') === 'blockquote') {
      exec('formatBlock', '<P>')
    }
  }
})

在contenteditable如何在Enter键上按blockquote后添加段落？

3 个答案: