Wysiwyg-editor för webpubliceringsverktyg????!?!!?

Jag har skrivit ett par stycken sådana WYSIWYG-editorer. De fungerar dock bara i IE.

En bra sida om du vill göra din egen: http://www.siteexperts.com/tips/contents/ts12/page1.asp

Jo har för mig att det var något som inte var riktigt bra.. men de flesta kör eller har iaf. tillgång till explorer.

Du har ingen som jag kan få kika på? eller rentav få?

Red:
Vill gärna ha knapparna ovanför formuläret så att det ser ut som i word typ.

Du har ingen som jag kan få kika på? eller rentav få?

Humm, det är nog inte omöjligt. Jag ska kolla lite i kod-gömmorna på måndag.

skulle vara schysst som fan om du hade nån man kan få.

Ok, här kommer en "light-version" med de mest grundläggande funktionerna.

Följande kod slänger du in i en .html fil som du döper till nåt lämpligt, typ editor.html.

<STYLE>
  BODY {margin: 0px; padding: 0px; border: none}
  IFRAME {width: 100%; height: 100%; border: none;}
</STYLE>
<SCRIPT>
var strEditMode="Raw HTML"

function setFocus() {
  textEdit.focus()
}

function execCommand(strCommand, blnGUI, strArgument) {
  if (strEditMode=="Raw HTML") {
    var edit = textEdit.document.selection.createRange()
  if (strArgument==null)
    edit.execCommand(strCommand, blnGUI)
  else
    edit.execCommand(strCommand, blnGUI, strArgument)
  edit.select()
  textEdit.focus()
  }
}

function initEditor(text) {
  textEdit.document.designMode="On"
  textEdit.document.open()
  textEdit.document.write(text)
  textEdit.document.close()
  textEdit.document.body.style.fontFamily = "Verdana"
  textEdit.document.body.style.fontSize ="12px"
  textEdit.focus()
}

function swapModes() {
  if (strEditMode=="Raw HTML") {
    textEdit.document.body.innerText = textEdit.document.body.innerHTML
    textEdit.document.body.style.fontFamily = "monospace"
    textEdit.document.body.style.fontSize = "10pt"
    strEditMode="WYSIWYG"
  }
  else {
    textEdit.document.body.innerHTML = textEdit.document.body.innerText
    textEdit.document.body.style.fontFamily = "Verdana"
    textEdit.document.body.style.fontSize ="12px"
    strEditMode="Raw HTML"
  }
  textEdit.focus()
  var s = textEdit.document.body.createTextRange()
  s.collapse(false)
  s.select()
}
//window.onload = initEditor
</SCRIPT>
<BODY SCROLL="no" topmargin="0" leftmargin="0" marginwidth="0" marginheight="0">
<IFRAME ID="textEdit" frameborder="0" marginwidth="2" marginheight="2"></IFRAME>

Denna fil blir en liten "scriptlet" som du sedan länkar in på sidan där du vill placera editorn. Du länkar in den i en vanlig IFRAME:

<IFRAME id="edit" src="editor.html" width="400" height="250"></IFRAME>

Självklart kan du ha egna värden på width & height.

Sedan behövs lite javascript på samma sida som initierar toolbaren & editorn samt får det hela att funka.

<SCRIPT language="JavaScript">
function initToolbar() {
text = ''
objToolbar = document.all.toolbar
objToolbar._editor = window.frames["edit"]
objToolbar._editor.initEditor(text)
objToolbar._editor.setFocus()
}
function doFormat(strCommand) {
var objToolbar = document.all.toolbar
objToolbar._editor.execCommand(strCommand, false, arguments[1])
}
function insertLink() {
var objToolbar = document.all.toolbar
objToolbar._editor.execCommand('CreateLink', true, null)
}
function swapMode() {
var objEditor = document.all.toolbar._editor
objEditor.swapModes()
}

Du anropar sedan initToolbar() i onLoad i BODY-taggen.

Toolbar:en är en vanlig DIV. I mitt exempel har jag bilder som knappar. Du kan ju använda vanliga knappar eller text-länkar, det är onClick som är det viktiga.

<DIV ID="toolbar" onClick="this._editor.setFocus()">
<IMG src="fet.gif" onClick="doFormat('Bold')">
<IMG src="kursiv.gif" onClick="doFormat('Italic')">
<IMG src="understreck.gif" onClick="doFormat('Underline')">
<IMG src="vanster.gif" onClick="doFormat('JustifyLeft')">
<IMG src="center.gif" onClick="doFormat('JustifyCenter')">
<IMG src="right.gif" onClick="doFormat('JustifyRight')">
<IMG src="lank.gif" onClick="insertLink()">
<IMG src="html.gif" onClick="swapMode()">
</DIV>

Det var det hela (tror jag).

[r] Om du vill utveckla funktionaliteten lite så hittar du en beskrivning av alla kommandon du kan skicka till editorn här: http://msdn.microsoft.com/library/default.asp?url=/workshop/author/dhtml/reference/commandids.asp [/r]

Nu har jag fått den att fungera.. men om jag typ vill ha ett formulär ungefär som det som jag skriver i nu när jag skriver det här alltså TEXTAREA med dom där knapparna ovanför formuläret ungefär som ikonerna sitter här fast med bold och kursiv osv...

Kan jag köra med din kod och på så sätt redigera text mm och sen sända iväg formuläret och då ska den typ spara koden som blir i bakgrunden till en databas?

Kan jag köra med din kod och på så sätt redigera text mm och sen sända iväg formuläret och då ska den typ spara koden som blir i bakgrunden till en databas?

Jodå, fast du får trixa till det lite. Lägg till en Textarea i formuläret. Sätt style="display:none" på den. I form-taggen lägger du sedan nåt sånt här:

onSubmit="javascript:document.forms[0].textarean.value=edit.textEdit.document.body.innerHTML;"

Sedan hämtar du koden från textarean och smackar in den i databasen.

hmm.. hur menar du.. ge gärna ett exempel med ett litet formulär

det ska även fungera att redigera alltså att skriva ut info från databasen om man vill kunna redigera det som står där... hur fungerar det? går det oxå att lösa?

Så här:

<FORM action="spara.asp" method="post" name="foo" onSubmit="javascript:document.foo.koden.value=edit.textEdit.document.body.innerHTML;">
<DIV id="toolbar">
din toolbar
</DIV>
<IFRAME id="edit" src="editor.html" width="400" height="250"></IFRAME>
<TEXTAREA name="koden" style="display: none"></TEXTAREA>
</FORM>

När du ska spara alltihop i databasen hämtar du html-koden som skapats med Request.Form("koden") (om du kör ASP).

det ska även fungera att redigera alltså att skriva ut info från databasen om man vill kunna redigera det som står där... hur fungerar det? går det oxå att lösa?

Japp, blir ännu en specialare

Lägg till en DIV nånstans på sidan som precis som textarean är gömd. Sedan skriver du ut koden från databasen i denna DIV.

<DIV id="kodFranDatabas" style="display: none;">
<%= recordset("fältetsnamn") %>
</DIV>

Sedan får du ändra lite i initToolbar(). Ersätt
text = ''
med
text = kodFranDatabas.innerHTML