online texteditor

Et tekstarea kan ikke vise tekst, der varierer i formatering. Det betyder, at al din tekst enten er fed eller ej, ligesom du heller ikke kan variere skrifttypen eller indsætte billeder.

For at opnå dette, må du vise det i et div-element (som du kan placere i stedet for og skjule textarea'et) eller et IFrame. Et Iframe kan faktisk klare hele redigeringen selv, hvis du sætter designMode="on" med javascript på vinduet.

Nej, det kan ikke lade sig gøre uden at opbygge en egentlig texteditor, og så kan du ligesågodt benytte en præfabrikeret, f.eks. en af de nævnte !-)

okay, men hvordan skulle den iframe så se ud ?

<iframe id="wysiwyg" style="width:300px;height:200px;border:1px solid #000"></iframe>

:)

Og så skal du i hoveddokumentet sætte designMode på iframen med:

document.getElementById("wysiwyg").contentWindow.document.designMode="on";

Så kan der skrives i iframen. Ved submit skal du så bare overføre alt fra iframen til dit skjulte form-felt, så det kan postes til næste side:

document.getElementById("skjultformfelt").value=document.getElementById("wysiwyg").contentWindow.document.getElementsByTagName("body")[0].innerHTML;

Eller noget i den stil. =)

Bemærk, at når du skal arbejde med noget inde i iframen, så skal du altså bruge:

document.getElementById("wysiwyg").contentWindow.document

og ikke bare:

document

jaa okay, men ka ik helt få det til at virke,

er der nogen der har en mere færdig løsning til mig, men det skal stadig være en som der er "selvkodet"

Hvad virker ikke? Jeg har selv brugt præcis den løsning, jeg beskev, og det virker fint. Ellers må du poste din kode her, så vi kan prøve at rette det.

Min kode ser såldes ud og javescripten kan ses i den først jeg oprettede:



<?php
if(isset($_POST['send']))
{

if($_POST['send'] == "ok") {

$text = $_POST['text'];

include("../dbconnect.php");

    $insert = mysql_query("INSERT INTO allround (text) VALUES ('$text')") or die(mysql_error());

    echo "Oplysningen er oprettet!<br><br>";

}
}
if(isset($fejl))
{echo $fejl;
}
?>

<form enctype="multipart/form-data" method="post" name='formen'>
<input type="hidden" name="send" value="ok">


<tr>
<td>&nbsp;</td>
<td colspan='3'>

<a href='#' onclick="insertTag(document.formen.text,'','');"><img src='../billeder/texteditor/bold.gif'></a>

<a href='#' onclick="insertTag(document.formen.text,'','');"><img src='../billeder/texteditor/italic.gif'></a>

<a href='#' onclick="insertTag(document.formen.text,'','');"><img src='../billeder/texteditor/under.gif'></a>

<a href='#' onclick="insertTag(document.formen.text,'[s]','[/s]');"><img src='../billeder/texteditor/strikethrough.gif'></a>

<a href='#' onclick="insertTag(document.formen.text,'','');"><img src='../billeder/texteditor/center.gif'></a>

<a href='#' onclick="insertTag(document.formen.text,'[ul][li]','[/li][/ul]');"><img src='../billeder/texteditor/bullist.gif'></a>

<a href='#' onclick="insertTag(document.formen.text,'[li]','[/li]');"><img src='../billeder/texteditor/bul.gif'></a>

<a href='#' onclick="insertTag(document.formen.text,'[ol][li]','[/li][/ol]');"><img src='../billeder/texteditor/numlist.gif'></a>

<a href='#' onclick="insertTag(document.formen.text,'[li]','[/li]');"><img src='../billeder/texteditor/num.gif'></a>

<a href='#' onclick="insertTag(document.formen.text,'[sub]','[/sub]');"><img src='../billeder/texteditor/subscript.gif'></a>

<a href='#' onclick="insertTag(document.formen.text,'[sup]','[/sup]');"><img src='../billeder/texteditor/superscript.gif'></a>

<a href='#' onclick="insertTag(document.formen.text,'[hr]','[/hr]');"><img src='../billeder/texteditor/inserthorizontalrule.gif'></a>


</td>
</tr>

 
  <tr>
<td><b>Teskt:</b></td>
<td colspan='2'>
<textarea name='text' style='width:600px;' rows='16' onfocus='fokus = true;' onblur='fokus = false;' onclick='storeTextRange()' onkeyup='storeTextRange();'></textarea>
</td>
  </tr>

  <tr valign="top">
    <td colspan="3">
<br /><br />
<center><input type="submit" value="Opret oplysning"></center>
    </td>
  </tr>

</form>

Jeg ville gerne se, hvordan du havde forsøgt min løsning.

Har slettet det igen, for kunne ik få det til at virke,

jeg vil bare gerne vide hvordan man gør ?

Mange gør, som jeg skrev 10/01-2008 14:59:59 :)

jaa, men eftersom jeg ik kunne få det til at virke hjælper det nok ik at henvise til det ;D

men ville meget gerne ha hvis du kunne vise mig det lidt nærmere ? :)

Følgende kode illustrerer det meget godt:
-----------------------------------------
<html>
<head>
<script type="text/javascript">
function LoadWysiwyg(){
    var editor=document.getElementById("wysiwyg");
    editor.contentWindow.document.body.innerHTML=document.getElementById('text').innerHTML;
    editor.contentWindow.document.designMode="on"
}
</script>
</head>
<body>

<textarea id="text" name="text" style="display:none">Test</textarea>
<iframe id="wysiwyg" style="width:600px;height:300px" onload="LoadWysiwyg()"></iframe>

</body>
</html>

Her bruges et textarea (så vi kan arbejde med det som et normalt form-element), men der benyttes et IFrame til selve redigeringen.

Data skal selvfølgelig overføres tilbage til textareaet ved submit.

Nu har jeg sat det op såldes men kan ikke få det til at virke, der skaer slet ingen ting inden i feltet...

<html>
<head>
<script type="text/javascript">
function insertTag(frmElm,startTag,endTag) {
      if (typeof frmElm.selectionStart == "number") {
            selectedtext = startTag+frmElm.value.substring(frmElm.selectionStart,frmElm.selectionEnd)+endTag;
            frmElm.value = frmElm.value.substring(0,frmElm.selectionStart)+selectedtext+frmElm.value.substr(frmElm.selectionEnd);
      }
      else if (document.selection) {
              frmElm.focus();
              r = document.selection.createRange();
              r.text = startTag+r.text+endTag;}
      else frmElm.value += startTag+endTag;
  }


function LoadWysiwyg(){
    var editor=document.getElementById("wysiwyg");
    editor.contentWindow.document.body.innerHTML=document.getElementById('text').innerHTML;
    editor.contentWindow.document.designMode="on"
}
</script>
</head>
<body>
<a href='#' onclick="insertTag(document.formen.text,'','');">FED</a>
<textarea id="text" name="text" style="display:none" onfocus='fokus = true;' onblur='fokus = false;' onclick='storeTextRange()' onkeyup='storeTextRange();'>Test</textarea>
<iframe id="wysiwyg" style="width:600px;height:300px" onload="LoadWysiwyg()"></iframe>

</body>
</html>

har os prøvet sådan her, men virker heller ik:

<form enctype="multipart/form-data" method="post" name='formen'>
<a href='#' onclick="insertTag(document.formen.text,'','');">FED</a>
<textarea id="text" name="text" style="display:none" onfocus='fokus = true;' onblur='fokus = false;' onclick='storeTextRange()' onkeyup='storeTextRange();'>Test</textarea>
<iframe id="wysiwyg" style="width:600px;height:300px" onload="LoadWysiwyg()"></iframe>
</form>

Hvad hvis du retter:

function LoadWysiwyg(){
    var editor=document.getElementById("wysiwyg");
    editor.contentWindow.document.body.innerHTML=document.getElementById('text').innerHTML;
    editor.contentWindow.document.designMode="on"
}

Til:

function LoadWysiwyg(){
    alert("test");
    var editor=document.getElementById("wysiwyg");
    alert(editor);
    editor.contentWindow.document.body.innerHTML=document.getElementById('text').innerHTML;
    editor.contentWindow.document.designMode="on"
}

Alerter den så noget?

ja det gør den, først alerter den "test" og bagefter [object HTMLIFrameElement]

se her:
http://easy-websolutions.dk/test.php

Ok. Og hvad så med:

function LoadWysiwyg(){
    var editor=document.getElementById("wysiwyg");
    alert(editor.contentWindow.document.body.innerHTML);
    alert(document.getElementById('text').innerHTML);
    editor.contentWindow.document.body.innerHTML=document.getElementById('text').innerHTML;
    editor.contentWindow.document.designMode="on"
}

først en tom alert, og så en hvor der står test

Dit link virker altså både i mit IE7 og FF 2. Teksten bliver fint indsat.

nå jaja, men kan ik lave den fed ?

Nej, ikke med din kode. =)

Brug i stedet:

ExecCommand('Bold',false)

og så sammen med funktionen:

function ExecCommand(a,b,c){
    document.getElementById("wysiwyg").contentWindow.focus();
    document.getElementById("wysiwyg").contentWindow.document.execCommand(a,b,c);
}

fedt nu virker det.

har du nogle flere tags end bold jeg kan putte i?

eller ved du hvor jeg kan finde en liste med de forskellige tags ?

Jepsen! :)
http://msdn2.microsoft.com/en-us/library/ms536419(VS.85).aspx

Du kan også bare søge på execcommand

Og et svar! =)

Tak for hjælpen

Det var så lidt og tak for point!

hov, har li et spørgsmål til, det er det der "test" som der står i forvejen der bliver sat ind i min database.. hvordan får jeg den til at sætte alt det jeg skriver ind i min database?

Ved submit skal der overføres data tilbage fra wysiwyg til text:

<form ... onsubmit="document.getElementById('text').innerHTML=editor.contentWindow.document.body.innerHTML">

...

</form>

Så skal:
    var editor=document.getElementById("wysiwyg");

stå uden for funktionen LoadWysiwyg(), ellers kan vi ikke bruger "editor" i onsubmit.

hmm, det virker ik :/

det ser sådan her ud:

<script type="text/javascript">

function ExecCommand(a,b,c){
    document.getElementById("wysiwyg").contentWindow.focus();
    document.getElementById("wysiwyg").contentWindow.document.execCommand(a,b,c);
}


function LoadWysiwyg(){
    var editor=document.getElementById("wysiwyg");
    editor.contentWindow.document.body.innerHTML=document.getElementById('text').innerHTML;
    editor.contentWindow.document.designMode="on"
}
</script>

<form enctype="multipart/form-data" method="post" name='formen' onsubmit='document.getElementById('text').innerHTML=editor.contentWindow.document.body.innerHTML'>

<a href='#' onclick="ExecCommand('Bold',false);"><img src='../billeder/texteditor/bold.gif'></a>

<textarea id="text" name="text" style="display:none" onfocus='fokus = true;' onblur='fokus = false;'>Test</textarea>
<iframe id="wysiwyg" style="width:600px;height:300px" onload="LoadWysiwyg()"></iframe>

</form>

Det virker helt fint for mig, så du må ha' glemt et eller andet. Prøv lige at lægge det ud som test.php igen.

ser lige på det =)

mange tak :)

Jep, du glemte lige at flytte:
var editor=document.getElementById("wysiwyg");
ud af funktionen. Gør således:

<script type="text/javascript">

function ExecCommand(a,b,c){
    document.getElementById("wysiwyg").contentWindow.focus();
    document.getElementById("wysiwyg").contentWindow.document.execCommand(a,b,c);
}


var editor=document.getElementById("wysiwyg");
function LoadWysiwyg(){
    editor.contentWindow.document.body.innerHTML=document.getElementById('text').innerHTML;
    editor.contentWindow.document.designMode="on"
}
</script>

<form enctype="multipart/form-data" method="post" name='formen' onsubmit='document.getElementById('text').innerHTML=editor.contentWindow.document.body.innerHTML'>

<a href='#' onclick="ExecCommand('Bold',false);"><img src='../billeder/texteditor/bold.gif'></a>

<textarea id="text" name="text" style="display:none" onfocus='fokus = true;' onblur='fokus = false;'>Test</textarea>
<iframe id="wysiwyg" style="width:600px;height:300px" onload="LoadWysiwyg()"></iframe>

</form>

------------------------------------------------------
Når en variable var'es inde i en funktion, kan man ikke bruge den andre steder i dokumentet, og vi prøver jo at få fat på "editor" inde i onsubmit, så derfor må "var editor=...;" ikke stå inde i funktionen.

Hov, dette skal også lige rettes:

<form enctype="multipart/form-data" method="post" name='formen' onsubmit="document.getElementById('text').innerHTML=editor.contentWindow.document.body.innerHTML">

Ellers går der rod i det, fordi du bruger ' flere gange.

men det virker stadig ik ? :(

Læg lige ud :)

sorry, hva ska jeg ligge ud ? :) heh

Bare så jeg selv kan prøve at se det i aktion. Eller evt. smide en opdateret kode, ligesom du gjorde lige før. Men hellere et link.

Du kan også prøve med:

<form enctype="multipart/form-data" method="post" name='formen' onsubmit="document.getElementById('text').innerHTML=editor.contentWindow.document.body.innerHTML;return">

Men det burde ikke gøre nogen forskel.

det ser sådan her ud:

<?php
include("../img_placering.php");
if(isset($_POST['send']))
{

if($_POST['send'] == "ok") {


$type = $_POST['type'];
$headline = $_POST['headline'];
$text = $_POST['text'];
$bredde = $_POST['bredde'];
$hoejde = $_POST['hoejde'];




include("../dbconnect.php");

    $insert = mysql_query("INSERT INTO allround (type, headline, text, img, bredde, hoejde) VALUES ('$type', '$headline', '$text', '$img', '$bredde', '$hoejde')") or die(mysql_error());

    echo "Oplysningen er oprettet!<br><br>";


}

?>


<form enctype="multipart/form-data" method="post" name='formen' onsubmit="document.getElementById('text').innerHTML=editor.contentWindow.document.body.innerHTML;return">
<input type="hidden" name="send" value="ok">


<a href='#' onclick="ExecCommand('Bold',false);"><img src='../billeder/texteditor/bold.gif'></a>

<textarea id="text" name="text" style="display:none" onfocus='fokus = true;' onblur='fokus = false;'>Test</textarea>
<iframe id="wysiwyg" style="width:600px;height:300px" onload="LoadWysiwyg()"></iframe>

<input type="submit" value="Opret oplysning">

</form>

Og javascript-delen?

ser sådan her ud :

<script type="text/javascript">

function ExecCommand(a,b,c){
    document.getElementById("wysiwyg").contentWindow.focus();
    document.getElementById("wysiwyg").contentWindow.document.execCommand(a,b,c);
}


var editor=document.getElementById("wysiwyg");
function LoadWysiwyg(){
    editor.contentWindow.document.body.innerHTML=document.getElementById('text').innerHTML;
    editor.contentWindow.document.designMode="on"
}
</script>

Nå ja, det har vel noget at gøre med, at vi her sætter editor=document.getElementById("wysiwyg"), men hvis den kode er indsat før wysiwyg-iframet, så findes det jo ikke endnu, og derfor kan id="wysiwyg" heller ikke findes. Ryk hele <script>-blokken ned under <form>-elementet, altså evt. lige før </body>

det hjalp desværre ikke, den sætter stdig kun test ind i min database

Jeg kan se, at jeg i nogle tilfælde har brugt et <input type="text"... i stedet for textarea, det kunne muligvis hjælpe. Så skal document.getElementById('text').innerHTML være document.getElementById('text').value de steder, hvor det står.

så sætter den "test" udenfor tekstfeltet og nu bliver der slet ik sat noget ind i databasen

<form enctype="multipart/form-data" method="post" name='formen' onsubmit="document.getElementById('text').value=editor.contentWindow.document.body.innerHTML;return">

<a href='#' onclick="ExecCommand('Bold',false);"><img src='../billeder/texteditor/bold.gif'></a>

<input type="text" id="text" name="text" style="display:none" onfocus='fokus = true;' onblur='fokus = false;'>Test</textarea>
<iframe id="wysiwyg" style="width:600px;height:300px" onload="LoadWysiwyg()"></iframe>

script type="text/javascript">

function ExecCommand(a,b,c){
    document.getElementById("wysiwyg").contentWindow.focus();
    document.getElementById("wysiwyg").contentWindow.document.execCommand(a,b,c);
}


function LoadWysiwyg(){
    var editor=document.getElementById("wysiwyg");
    editor.contentWindow.document.body.innerHTML=document.getElementById('text').value;
    editor.contentWindow.document.designMode="on"
}
</script>

<center><input type="submit" value="Opret oplysning"></center>

</form>

Sådan her:

<form enctype="multipart/form-data" method="post" onsubmit="document.getElementById('text').value=editor.contentWindow.document.body.innerHTML;return">

<img style="cursor:pointer" src="../billeder/texteditor/bold.gif" onclick="ExecCommand('Bold',false)">

<input type="text" id="text" name="text" style="display:none" value="Test">
<iframe id="wysiwyg" style="width:600px;height:300px" onload="LoadWysiwyg()"></iframe>

<script type="text/javascript" language="javascript">
function ExecCommand(a,b,c){
    document.getElementById("wysiwyg").contentWindow.focus();
    document.getElementById("wysiwyg").contentWindow.document.execCommand(a,b,c);
}

function LoadWysiwyg(){
    var editor=document.getElementById("wysiwyg");
    editor.contentWindow.document.body.innerHTML=document.getElementById('text').value;
    editor.contentWindow.document.designMode="on"
}
</script>

<div style="text-align:center"><input type="submit" value="Opret oplysning"></div>

</form>

den sætter stdig kun test ind i databasen :/

Ja, nu har jeg fundet ud af, at det var fordi "var editor=...;" igen stod inde i funktionen LoadWysiwyg()

Dette er testet og virker:

<form enctype="multipart/form-data" method="post" onsubmit="document.getElementById('text').value=editor.contentWindow.document.body.innerHTML;alert(document.getElementById('text').value);return">

<img style="cursor:pointer" src="../billeder/texteditor/bold.gif" onclick="ExecCommand('Bold',false)">

<input type="text" id="text" name="text" style="display:none" value="Test">
<iframe id="wysiwyg" style="width:600px;height:300px" onload="LoadWysiwyg()"></iframe>

<script type="text/javascript" language="javascript">
function ExecCommand(a,b,c){
    document.getElementById("wysiwyg").contentWindow.focus();
    document.getElementById("wysiwyg").contentWindow.document.execCommand(a,b,c);
}

var editor=document.getElementById("wysiwyg");
function LoadWysiwyg(){
    editor.contentWindow.document.body.innerHTML=document.getElementById('text').value;
    editor.contentWindow.document.designMode="on"
}
</script>

<div style="text-align:center"><input type="submit" value="Opret oplysning"></div>

</form>

nu virker det, tusind tak for hjælpen :)

vil gerne give dig flere point, men ved ik li hvordan man gør ?

Det kan du ikke her, men det er også ligemeget. =)
Godt at det virker!

okay...

og er jeg os glad for :)

texteditoren virker helt fint,
men hvordan kan jeg tilføje links i teksten ?

I stedet for ExecCommand('Bold',false) bruger du ExecCommand('CreateLink',true)

og hvordan fortæller jeg den så hvor linket skal være til ?

lige nu er den undifined. men man kan måske lave det med en slags popup hvor man så i den skriver hvor linket skal være til ?

En showModalDialog ?-)

er ik helt med ;D

Hvordan bruger du:

ExecCommand('Bold',false)

lige nu?

bruger det sådan her :

<img style="cursor:pointer" src="../billeder/texteditor/bold.gif" onclick="ExecCommand('Bold',false)">

<input type="text" id="text" name="text" style="display:none">
<iframe id="wysiwyg" style="width:600px; height:300px;" onload="LoadWysiwyg();"></iframe>

<script type="text/javascript" language="javascript">
function ExecCommand(a,b,c){
    document.getElementById("wysiwyg").contentWindow.focus();
    document.getElementById("wysiwyg").contentWindow.document.execCommand(a,b,c);
}

var editor=document.getElementById("wysiwyg");
function LoadWysiwyg(){
    editor.contentWindow.document.body.innerHTML=document.getElementById('text').value;
    editor.contentWindow.document.designMode="on"
}
</script>

Så skal du vel bare bruge:

<img style="cursor:pointer" src="../billeder/texteditor/bold.gif" onclick="ExecCommand('CreateLink',true)">

Du kan også bruge:

<img style="cursor:pointer" src="../billeder/texteditor/bold.gif" onclick="ExecCommand('CreateLink',false,prompt('URL','http://'))">

den nederste virker, tak :)

Undskyld jeg forstyrrer men jeg leder selv efter lidt ala en Tekst Editor så jeg har prøvet at følge hvad der skal gøres men uden held så er der en af jer der vil skære det ud i pap hvad der skal stå i filen eller filerne ?

På forhånd tak ..