9 svar · 386 visningar · startad av brw
Jag har lite funderingar om hur man ska lösa tex. fet kursiv osv typ storlekar mm.. när man har gjort ett litet webpubliceringsverktyg. Man vill ju inte säga åt kunden att den ska använda lite "enklare" HTML-koder när den ska lägga in text osv. på hemsidan i admingränssnittet.
Då har jag hört att det skall finnas nå editorer som man kan implementera på hemsidan i admingränssnittet där det tydligen blir som en liten ordbehandlare med de vanliga knapparna för justering och stiler mm som kallas "WYSIWYG nånting" !?!?!
Nån som vet något om detta och isf om det finns några sådana som är gratis?
Mycket tacksam för svar!!
------------------
Ingenting är omöjligt, bara en utmaning.
[Redigerat av brw den 09 sep 2001]
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
------------------
/Morph
Tech Support: "I need you to boot the computer."
Customer: (THUMP! Pause.) "No, that didn't help."
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.
------------------
Ingenting är omöjligt, bara en utmaning.
[Redigerat av brw den 09 sep 2001]
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.
------------------
/Morph
Tech Support: "I need you to boot the computer."
Customer: (THUMP! Pause.) "No, that didn't help."
skulle vara schysst som fan om du hade nån man kan få.
------------------
Ingenting är omöjligt, bara en utmaning.
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]
------------------
/Morph
Tech Support: "I need you to boot the computer."
Customer: (THUMP! Pause.) "No, that didn't help."
[Redigerat av Morph den 10 sep 2001]
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?
------------------
Ingenting är omöjligt, bara en utmaning.
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.
------------------
/Morph
Tech Support: "I need you to boot the computer."
Customer: (THUMP! Pause.) "No, that didn't help."
[Redigerat av Morph den 10 sep 2001]
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?
------------------
Ingenting är omöjligt, bara en utmaning.
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
------------------
/Morph
Tech Support: "I need you to boot the computer."
Customer: (THUMP! Pause.) "No, that didn't help."