contenteditable - Auswählen von zwei untergeordneten Absätzen und Schreiben von Text über (Firefox Issue)

Question

Ich suche seit über einer Woche bei Google, habe versucht, verschiedene Lösungen zu implementieren, aber ohne Erfolg, und es nervt von mir.

Sie haben also ein contenteditable div mit mehreren Absätzen (oder andere untergeordnete Elemente der gleichen Art). Offensichtlich ist dies die Art von Layout, die du behalten willst. Wenn der Benutzer zwei oder mehr Absätze und Typen Text darüber, entfernt es die Absätze und setzt den Einfügemarke Fokus innerhalb des übergeordneten div:

body { 
 
    font-family: georgia; 
 
} 
 
.editable { 
 
    color: red; 
 
} 
 
.editable p { 
 
    color: #333; 
 
} 
 
.editable span { 
 
    color: limegreen !important; 
 
}

<div class="editable" contenteditable><p>paragraph one</p><p>paragraph two</p></div> 
 

 
<hr> 
 
    
 
<p>How to reproduce the bug:</p> 
 
<ul> 
 
    <li>Focus the contenteditable above by placing the cursor somewhere in one of the two paragraphs.</li> 
 
    <li>press ctrl-a (in windows or linux) or cmd-a (in osx) to select-all</li> 
 
    <li>type some text</li> 
 
    <li>red text means that the text went directly inside the contenteditable div, black text means it went inside a paragraph</li> 
 
</ul> 
 
    
 
<p>The correct behaviour should be that that select-all and delete (or "type-over") in a contenteditable with only block tags should leave the cursor inside the first block tag.</p> 
 
    
 
<p>Webkit gets this right, Firefox gets it wrong.</p>

Ich habe so etwas wie dies in JQuery versuchen:

$(document).on('blur keyup','div[contenteditable="true"]',function(event){ 
    var sel = window.getSelection(); 
    var activeElement = sel.anchorNode.parentNode; 
    var tagName = activeElement.tagName.toLowerCase(); 
    if (!(tagName == "p" || tagName == "span")) { 
     console.log('not on editable area'); 
     event.preventDefault(); 
     //remove window selection 
     var doselect = window.getSelection(); 
     doselect.removeAllRanges(); 
    } 
}); 

So nach Unschärfe oder keyup Ereignis auf contenteditable, festzustellen, wo die Position caret und wenn es draußen akzeptiert editierbare Bereiche der Veranstaltung oder etwas stoppen?

Ich habe versucht, den Auswahlbereich zu ändern, und eine Menge anderer Sachen, aber vielleicht sehe ich es einfach nicht. Ich bin mir sicher, dass viele Leute das gleiche Problem hatten, aber die einzigen Antworten, die ich bei Google oder hier gefunden habe, sind "editierbare Inhalte", "warum verwendest du nicht einfach einen Open-Source-Editor" und solche Sachen.

Firefox seltsames Verhalten: Einfügen von BR-Tags auf Bruchlinie Ich habe auch versucht Firefox'es seltsames Verhalten mit einer Funktion entfernen Sie all <BR> Tags firefox fügt automatisch zu entfernen. Wie folgt aus:

function removeBr(txteditor) { 
    var brs = txteditor.getElementsByTagName("br"); 
    for (var i = 0; i < brs.length; i++) { brs[i].parentNode.removeChild(brs[i]); } 
} 

So brachte ich dies zu einem keydown Ereignis, und es tut genau das, was es erwartet wird, aber dass mehr seltsame Verhalten verursacht (wie verhindern Sie Plätze auf ausgewählten Absatz hinzufügen).

Bitte stimmen Sie die Frage ab, damit wir mehr Bewusstsein schaffen können.

Ich bin mir sicher, dass viele andere Leute das gleiche Problem angetroffen haben, ich denke es wäre gut zu wissen, ob es einen Workaround oder einen "richtigen" Weg gibt. Ich denke, es sollte wirklich diskutiert werden ...

Answer 1

Was passiert, wenn Sie beide Gruppen von Text auswählen und löschen Sie löschen Sie auch alle Tags innerhalb des editierbaren Elements. So löschen Sie tatsächlich die <p> Tags aus dem div und dann das einzige Ding zu schreiben ist das div selbst.

Warum benötigen Sie zwei separate Absatztags? Es wäre einfacher, das div haben für sich ... Anstatt die div als bearbeitbaren, haben Sie versucht, die <p> Tags als <p contenteditable="true">

Answer 2

So Firefox spritzt diese Gräuel Einstellung - <br></br> - in die contenteditable div, wenn die Entfernung Absätze.

Mit ein bisschen jQuery können wir es entfernen und durch Absatzmarken ersetzen.

Strombegrenzung - Das break-Tag scheint nur beim Entfernen mit delete oder backspace, nicht beim Überschreiben ...dies ein Konzept betrachten :-)

öffnet Beispiel in Firefox zu testen:

$("button").click(function() { 
 

 
$("br:not(p br)").replaceWith('<p>Write Me!</p>'); // dont replace when inside p 
 
});

body { 
 
    font-family: georgia; 
 
} 
 
.editable { 
 
    color: red; 
 
} 
 
.editable p { 
 
    color: #333; 
 
} 
 
.editable span { 
 
    color: limegreen !important; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="editable" contenteditable> 
 
    <p>paragraph one</p> 
 
    <p>paragraph two</p> 
 
</div> 
 

 
<hr> 
 

 
<p>Remove all text to trigger bug in Firefox and hit "fix problem!"</p> 
 

 
</ul> 
 

 
<p>Webkit gets this right, Firefox gets it wrong.</p> 
 

 
<button class="fix">Fix Problem</button>