nicht angemeldet
Hallo,
die Methode contenteditable ist subobtimal, weil sie nur vom IE unterstützt wird. Im Gegensatz dazu kann document.designMode auch Mozilla. Siehe http://www.mozilla.org/editor/ie2midas.html und für Microsoft http://msdn.microsoft.com/workshop/author/dhtml/reference/properties/designmode.asp. Für Dein Problem ist das aber nicht direkt relevant. Der IE hat in editable documents automatisch die shortcuts [Strg]+b, [Strg]+i, [Strg]+u aktiviert. Ein Eventhandler für onkeypress ist zwar implementierbar. Die Steuertastencodes e.ctrlKey, e.altLeft, e.altKey werden aber nur aktiv, wenn auch ein Zeichen erzeugt wird, z.B. bei ²³@€. Sie sind also nicht für zusätzliche shortcuts nutzbar. Im folgenden Beispiel ist das in window.status zu sehen. Für Mozilla sind die shortcuts [Strg]+[Alt]+b, [Strg]+[Alt]+i, [Strg]+[Alt]+u implementiert.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>IFrame im Designmode für IE und Mozilla</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<script type="text/javascript">
<!--
function watchFormats() {
var editorDoc = document.getElementById('editor').contentWindow.document;
var format = "";
format += editorDoc.queryCommandValue('fontname') + " ";
format += editorDoc.queryCommandValue('fontsize') + " ";
if (editorDoc.queryCommandState('bold')) format += "bold ";
if (editorDoc.queryCommandState('italic')) format += "italic ";
if (editorDoc.queryCommandState('underline')) format += "underline ";
document.getElementById('tf').value = format;
}
function shortCuts(e) {
if(!e && document.getElementById('editor').contentWindow.event) e = document.getElementById('editor').contentWindow.event;
if (e.which && e.altKey && e.ctrlKey) {
if (e.which==98) document.getElementById('editor').contentWindow.document.execCommand('bold', false, null);
if (e.which==105) document.getElementById('editor').contentWindow.document.execCommand('italic', false, null);
if (e.which==117) document.getElementById('editor').contentWindow.document.execCommand('underline', false, null);
} else if (e.keyCode) {
window.status = "" + e.keyCode + e.ctrlKey + e.altLeft + e.altKey;
}
}
window.onload = function() {
var editorDoc = document.getElementById('editor').contentWindow.document;
editorDoc.designMode="on";
if(editorDoc.addEventListener) {
editorDoc.addEventListener('keypress', shortCuts, true);
} else {
editorDoc.onkeypress = shortCuts;
}
window.setInterval("watchFormats()", 100);
};
//-->
</script>
</head>
<body>
<h1>Demonstration der Nutzung eines IFrames als Editor-Element</h1>
<p><button onclick="document.getElementById('editor').contentWindow.document.execCommand('bold', false, null)">Fett</button>
<button onclick="document.getElementById('editor').contentWindow.document.execCommand('italic', false, null)">Kursiv</button>
<button onclick="document.getElementById('editor').contentWindow.document.execCommand('underline', false, null)">Unterstrichen</button></p>
<p><label>aktuelles Format </label><input type="text" id="tf" value="" size="50" maxlength="50"></p>
<p>Hier Text eingeben:</p>
<iframe id="editor" width="400" height="100"></iframe>
<p><textarea rows="5" cols="50" id="ta"></textarea></p>
<button onclick="document.getElementById('ta').value=document.getElementById('editor').contentWindow.document.getElementsByTagName('html')[0].innerHTML;">Zeige Quelltext</button>
</body>
</html>
viele Grüße
Axel