在CONTENTEDITABLE你怎么后BLOCKQUOTE添加段落上输入按键?(In conten

2019-08-16 16:53发布

我有以下问题。 一旦我添加了一个blockquotecontenteditable ,按ENTER键移动到新行,并增加了一个blockquote元素。 如此下去,直到永远,我无法逃避的格式。 所需的功能将是无序列表中。 当您按下回车键它增加了一个新的空<li>元素,但如果再次按Enter键,它避开了格式化,删除先前创建的<li>并增加了一个<p>

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

一个黑客,我发现是创建一个空的<p>blockquote ,您创建一个前blockquote 。 但是,有没有办法突破的JavaScript此格式的行为呢? 不知道我会怎样检查:若光标是,它是该行的结束,如果它是一个块引用和回车键按下,不增加新的blockquote

我使用这个代码来生成一个blockquote的JS:

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

Answer 1:

虽然创建iOS应用程序丰富的文本编辑器,我面临着同样的问题。 每次我插入的时间<blockquote>标签在我的文本字段,并按下回车键 ,就不可能摆脱掉块引用。

研究了一下后,我找到了一个可行的解决方案。

查找内部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;
 }

检查块引号标记的出现:

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返回当前textnode万一块引用包含文本,或者blockquote元素本身的情况下,它不包含任何textnode(在Chrome中, <br>添加和尖是定位后它)。 你可以在这种情况下,删除新创建的块引用。 总之,删除插入符号看起来像于CONTENTEDITABLE越来越某处,虽然打字确认它原来blackquote之后的元素之后。 希望这点你一个更确凿的解决方案。



Answer 3:

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

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


文章来源: In contenteditable how do you add a paragraph after blockquote on Enter key press?