13

我有以下问题。一旦我添加了一个blockquotein contenteditable,通过按 Enter 键它移动到一个新行并添加另一个blockquote元素。它永远持续下去,我无法逃避格式。所需的功能将是无序列表的功能。当您按 Enter 键时,它会添加一个新的空<li>元素,但如果您再次按 Enter,它会转义格式,删除先前创建的<li>并添加一个<p>.

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

我发现的一个技巧是<p>blockquote创建blockquote. 但是有没有办法用 JavaScript 打破这种格式化行为?不知道我会如何检查:如果光标在哪里,它是行尾,如果它是一个块引用并且在 Enter 键上,不要添加一个新的blockquote.

我正在使用此代码blockquote在 JS 中生成一个:

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

3 回答 3

8

在为 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;
 }

检查块引用标签的出现:

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>

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

于 2013-04-20T02:12:17.993 回答
1

像这样的东西对我有用(至少在 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返回当前文本节点,或者如果它不包含文本节点,则返回块引用元素本身(在 Chrome 上,<br>添加 a 并将插入符号定位在它之后)。在这种情况下,您可以删除新创建的块引用。无论如何,在删除元素后,插入符号看起来像是定位在 contenteditable 上的某个位置,尽管键入确认它就在原始黑引号之后。希望这会为您提供一个更有说服力的解决方案。

于 2013-04-28T13:21:43.470 回答
0

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

YOUR_EDITABLE_ELEMENT.addEventListener('keyup', e => {
  if (e.which || e.keyCode === 13) {
    if (document.queryCommandValue('formatBlock') === 'blockquote') {
      exec('formatBlock', '<P>')
    }
  }
})
于 2018-03-11T21:38:51.547 回答