---
title: "WYSISWYG-Ie5.5 pretty advanced.."
type: "forum-thread"
url: "https://www.webforum.nu/amne/javascript/47775-wysiswyg-ie5-5-pretty-advanced"
topic: "JavaScript"
topic_url: "https://www.webforum.nu/amne/javascript"
author: "K++"
published: "2002-07-12T17:27:02.000Z"
updated: "2002-07-23T21:22:16.000Z"
replies: 13
views: 428
page: 1
pages: 1
language: "sv-SE"
site: "webForum — webforum.nu"
rights: "Upphovsrätten till varje inlägg tillhör dess författare."
attribution: "Citera som: webForum, https://www.webforum.nu/amne/javascript/47775-wysiswyg-ie5-5-pretty-advanced"
---

# WYSISWYG-Ie5.5 pretty advanced..

## #1 — K++, 2002-07-12T17:27Z

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>
```

Permalänk: https://www.webforum.nu/p/47775

## #2 — Morph, 2002-07-12T20:07Z

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.

Permalänk: https://www.webforum.nu/p/720529

## #3 — Marcus E, 2002-07-13T11:09Z

OT: \<i\> är inte ogiltig. \<u\> och \<s\> är döremot ogiltiga.

Permalänk: https://www.webforum.nu/p/720766

## #4 — Morph, 2002-07-13T12:22Z

> **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.

Permalänk: https://www.webforum.nu/p/720801

## #5 — skarbratt, 2002-07-13T13:22Z

Går det på något sätt att spara innehållet? Typ som med en TEXTAREA med hjäälpt av FORM?

Permalänk: https://www.webforum.nu/p/720824

## #6 — Morph, 2002-07-13T14:10Z

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")

Permalänk: https://www.webforum.nu/p/720847

## #7 — K++, 2002-07-18T20:42Z

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>
  &nbsp;&nbsp;

  <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>&lt;&lt;</B></button>
  <button unselectable="On" onclick='document.execCommand("Indent");foo.focus();'
   style="background-color:powderblue; border-color:powderblue" title="Indent">
   <B>&gt;&gt;</B></button>
  &nbsp;&nbsp;

  <button unselectable="On" onclick='document.execCommand("JustifyLeft");foo.focus();'
   style="background-color:powderblue; border-color:powderblue" title="Left Justify">
   <B>|&lt;</B></button>
  <button unselectable="On" onclick='document.execCommand("JustifyRight");foo.focus();'
   style="background-color:powderblue; border-color:powderblue" title="Right Justify">
   <B>&gt;|</B></button>
  <button unselectable="On" onclick='document.execCommand("JustifyCenter");foo.focus();'
   style="background-color:powderblue; border-color:powderblue" title="Center Justify">
   <B>&gt;|&lt;</B></button>
  &nbsp;&nbsp;
  <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>
  &nbsp;&nbsp;
  <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
%>
```

Permalänk: https://www.webforum.nu/p/723652

## #8 — Morph, 2002-07-18T21:38Z

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;
}
```

Permalänk: https://www.webforum.nu/p/723707

## #9 — solbulle, 2002-07-18T23:29Z

Ä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?

Permalänk: https://www.webforum.nu/p/723762

## #10 — Erik Juhlin, 2002-07-23T12:48Z

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

Permalänk: https://www.webforum.nu/p/728858

## #11 — Morph, 2002-07-23T13:48Z

> 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.

Permalänk: https://www.webforum.nu/p/728928

## #12 — solbulle, 2002-07-23T21:17Z

Tackar för svaren, åter till "ritbordet" (Tangentbordet)

Permalänk: https://www.webforum.nu/p/729220

## #13 — Erik Juhlin, 2002-07-23T21:19Z

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. :)

Permalänk: https://www.webforum.nu/p/729221

## #14 — Erik Juhlin, 2002-07-23T21:22Z

Varför unselectable="on". Har man vettig onpaste/ondrop hantering så slipper man konstiga grejer som dyker upp i editorn. :)

Permalänk: https://www.webforum.nu/p/729224

---

Tråden på webben: https://www.webforum.nu/amne/javascript/47775-wysiswyg-ie5-5-pretty-advanced
