13 svar · 421 visningar · startad av K++
Hittade en lite WYSISWYG-editor på en microsoft sida. (Detta fungerar bara i ie5.5 och över jag vet. Har inte tänkt att använda den för något annat ändamål heller.. Men nu till frågan hur gör jag för att konventera 'document.execCommand("Italic");' till <i></i> runt ordet/orden? Skulle vara rätt tufft om det gick. Har sett att det finns på en del sidor..
<html>
<head>
</head>
<body>
<DIV onpaste="window.event.returnValue = false;">
<div unselectable="on" align=center style="height:300; width:400; border:outset white">
<br>
<div id=foo contenteditable align=left style="height:250; width:350;background-color:white; font-face:Arial; padding:1; border:inset whitesmoke; scrollbar-base-color:whitesmoke; overflow=auto;"></div>
<br>
<button unselectable="On" onclick='document.execCommand("Bold");foo.focus();' style="width:30;"><B>F</B></button>
<button unselectable="On" onclick='document.execCommand("Italic");foo.focus();' style="width:30;"><B><I>K</I></B></button>
<button unselectable="On" onclick='document.execCommand("Underline");foo.focus();' style="width:30;"><B><U>U</U></B></button>
</div>
</body>
</html>
Varför skulle du vilja göra det?
<i> är ju ogiltigt i HTML4 och XHTML. Du ska använda det logiska elementet <EM> istället, vilket görs i MSHTML.
If it works, don't fix it! :)
F.ö. fungerar MSHTML i IE5 också men det saknas några funktioner jämfört med IE5.5.
OT: <i> är inte ogiltig. <u> och <s> är döremot ogiltiga.
Marcus E skrev:
OT: <i> är inte ogiltig. <u> och <s> är döremot ogiltiga.
Sant, det gick lite för fort där. :) <i> är giltigt men W3C rekommenderar att man använder logisk formatering och stilmallar istället.
Går det på något sätt att spara innehållet? Typ som med en TEXTAREA med hjäälpt av FORM?
Jodå, med lite javascript.
Börja med att skapa ett formulär med ett hidden-fält och en submit-knapp:
<form action="sida.asp" method="post" onSubmit="submitForm()">
<input type="hidden" name="myContent">
<input type="submit" value="Spara">
</form>
Sen fixar vi oss en snitsig javascript-funktion:
function submitForm() {
document.myContent.value = document.foo.innerHTML
}
På serversidan hämtar du sedan innehållet i myContent, med ASP blir det Request.Form("myContent")
Detta funkar iaf inte :) Blir bara javascript error. :)
defaul.asp
<html>
<head>
<script language="Javascript">
function submitForm() {
document.myContent.value = document.foo.innerHTML
}
</script>
</head>
<body>
<div unselectable="on" align=center style="height:250; width:425; background-color:whitesmoke; border:outset whitesmoke">
<br>
<div id=foo contenteditable align=left
style="height:200; width:370;background-color:white; font-face:Arial; padding:3;
border:inset powderblue; scrollbar-base-color:powderblue; overflow=auto;">
</div>
<br>
<button unselectable="On" onclick='document.execCommand("Bold");foo.focus();'
style="background-color:powderblue; border-color:powderblue" title="Bold">
<B>B</B></button>
<button unselectable="On" onclick='document.execCommand("Italic");foo.focus();'
style="background-color:powderblue; border-color:powderblue" title="Italic">
<B><I>I</I></B></button>
<button unselectable="On" onclick='document.execCommand("Underline");foo.focus();'
style="background-color:powderblue; border-color:powderblue;" title="Underline">
<B><U>U</U></B></button>
<button unselectable="On" onclick='document.execCommand("SuperScript");foo.focus();'
style="background-color:powderblue; border-color:powderblue" title="Superscript">
<B>^</B></button>
<button unselectable="On" onclick='document.execCommand("SubScript");foo.focus();'
style="background-color:powderblue; border-color:powderblue" title="Subscript">
<B>_</B></button>
<button unselectable="On" onclick='document.execCommand("InsertOrderedList");foo.focus();'
style="background-color:powderblue; border-color:powderblue" title="Ordered List">
<B>OL</B></button>
<button unselectable="On" onclick='document.execCommand("InsertUnorderedList");foo.focus();'
style="background-color:powderblue; border-color:powderblue" title="Unordered List">
<B>UL</B></button>
<button unselectable="On" onclick='document.execCommand("Outdent");foo.focus();'
style="background-color:powderblue; border-color:powderblue" title="Outdent">
<B><<</B></button>
<button unselectable="On" onclick='document.execCommand("Indent");foo.focus();'
style="background-color:powderblue; border-color:powderblue" title="Indent">
<B>>></B></button>
<button unselectable="On" onclick='document.execCommand("JustifyLeft");foo.focus();'
style="background-color:powderblue; border-color:powderblue" title="Left Justify">
<B>|<</B></button>
<button unselectable="On" onclick='document.execCommand("JustifyRight");foo.focus();'
style="background-color:powderblue; border-color:powderblue" title="Right Justify">
<B>>|</B></button>
<button unselectable="On" onclick='document.execCommand("JustifyCenter");foo.focus();'
style="background-color:powderblue; border-color:powderblue" title="Center Justify">
<B>>|<</B></button>
<br>
<button unselectable="On" onclick='document.execCommand("Cut");foo.focus();'
style="background-color:powderblue; border-color:powderblue"><B>Cut</B></button>
<button unselectable="On" onclick='document.execCommand("Copy");foo.focus();'
style="background-color:powderblue; border-color:powderblue"><B>Copy</B></button>
<button unselectable="On" onclick='document.execCommand("Paste")'
style="background-color:powderblue; border-color:powderblue"><B>Paste</B></button>
<button unselectable="On" onclick='document.execCommand("Overwrite");foo.focus();'
style="background-color:powderblue; border-color:powderblue"><B>Overwrite</B></button>
</div>
<form action="sida.asp" method="post" onSubmit="submitForm()">
<input type="hidden" name="myContent">
<input type="submit" value="Spara">
</form>
</body>
</html>
sida.asp
<%
dim html
html = Request.Form("myContent")
response.write html
%>
Det gick lite för fort där :)
Sätt ett namn på formuläret:
<form action="sida.asp" method="post" name="myForm" onSubmit="submitForm()">
och ändra lite i javascript-funktionen:
function submitForm() {
document.myForm.myContent.value = document.getElementById("foo").innerHTML;
}
Är det någon som har ett hett tips, mao länk kanbske, till hur man lätttast gör för att infoga bilder i denna eller kanske i den variant som IE6 stödjer?
Det går att använda execCommand('InsertImage', null, 'bild.jpg'); Men det är ju inte så bra med tanke på att man där inte får med width, height, border, alt eller något annat.
Så bäst är att bara klistra in en egen <img>-tagg. Tyvärr vet jag ännu inte hur man gör det. :l
Så bäst är att bara klistra in en egen <img>-tagg. Tyvärr vet jag ännu inte hur man gör det.
Det är alls svårt. Så här kan det se ut:
function insertRawHTML(strHTML) {
// Om markeringen är en bild, rensa.
if(document.selection.type == "Control")
document.selection.clear();
document.selection.createRange().pasteHTML(strHTML);
}
Det är bara att fixa till en img-tagg man trivs med och sedan skicka den som argument till funktionen.
Observera att samtliga element på sidan förutom de som skall kunna redigeras måste ha attributet unselectable="on" annars kan det bli konstigt.
Tackar för svaren, åter till "ritbordet" (Tangentbordet)
Tack Morph!
Frågat på flera olika ställen, men borde visst ställt frågan här först! :)
Trodde bara inte det var någon wFare som sysslade med sånt. :)
Varför unselectable="on". Har man vettig onpaste/ondrop hantering så slipper man konstiga grejer som dyker upp i editorn. :)