[英]In contenteditable how do you add a paragraph after blockquote on Enter key press?
我有以下问题。 一旦我在contenteditable添加一个blockquote ，按Enter键就会移动到一个新行并添加另一个blockquote元素。 它永远持续下去，我无法摆脱格式化。 所需的功能将是无序列表的功能。 当您按Enter键时，它会添加一个新的空<li>元素，但如果再次按Enter键，它将转义格式，删除先前创建的<li>并添加<p> 。
看看演示： http ： //jsfiddle.net/wa9pM/
我发现一个hack是在你创建一个blockquote之前在blockquote下创建一个空的<p> 。 但有没有办法打破JavaScript的格式化行为？ 我不知道如何检查：如果光标在哪里，它是行的结尾，如果它是一个块引用，按Enter键，请不要添加新的blockquote 。
我正在使用此代码在JS中生成一个blockquote ：
document.execCommand('formatBlock', false, 'blockquote');
在为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>
我相信上面的代码可以轻松调整以满足您的需求。 如果您需要进一步的帮助，请随时提出。
这样的事情对我有用（至少在Chrome和Safari上）。
$("[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上，添加了一个<br>并且插入符号是定位在它之后）。 在这种情况下，您可以删除新创建的blockquote。 无论如何，在删除元素后，插入符号看起来像是位于满足的位置，尽管键入确认它正好在原始黑色引号之后。 希望这能为您提供更具决定性的解决方案。
超级迟到的答案，但对我来说这是一个更简单的解决方案。 希望它可以帮助其他人看。 浏览器兼容性可能不同
YOUR_EDITABLE_ELEMENT.addEventListener('keyup', e => {
if (e.which || e.keyCode === 13) {
if (document.queryCommandValue('formatBlock') === 'blockquote') {
exec('formatBlock', '<P>')
}
}
})
如何在按Enter键时contenteditable添加新段落标签时将类添加到创建的附加元素中？
[英]How do you add a class to an appended element that is created when contenteditable adds new paragraph tag when pressing enter?
在 contenteditable div 中按回车键时如何添加新 div
[英]How to add new div when hitting enter key in contenteditable div
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.