brwMedlem sedan juli 2000619 inlägg Jag har gjort en liten WYSIWYG-editor men jag har problem när man går in i "HTML-läget" och inte går tillbaka till normalläget. Om man klickar på spara när man är i HTML-läget så lägger den till brake-kod "<br>" för varje ny rad jag skapat. Men om jag däremot återgår till "normalläget" före jag sparar så blir det inga onödiga "<br>" i koden..
Är det någon som haft liknande problem och kanske vet hur man blir av med det?
Jag tycker inte att det bör spela någon roll om man är i NORMAL- eller HTML-läget.. det som den skickar iväg är ju bara HTML-kod men skillnaden är att i NORMALläget så ser jag inte själva koden.
Min tillfälliga lösning är att jag lagt en JAVA-alert på knappen när man trycker för att gå in i HTML-läget som talar om att man måste återgå till normalläge innan man sparar för annars så ställer den till och lägger in <br> i koden.. Men om man glömmer att återgå till normalläget vilket har hänt flera gånger så får man gå in och redigera och sitta och radera upp varje rad 1 gång.. vilket blir jävligt jobbigt om man har lång text.
Bifogar koden nedan.. :h
Koden ser ut såhär:
editor.html
---------------
<STYLE>
BODY {margin: 0px; padding: 0px; border: none}
IFRAME {width: 100%; height: 100%; border: none; FONT: 12pt VERDANA,ARIAL,HELVETICA;}
</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 ="8pt"
textEdit.focus()
}
function swapModes() {
if (strEditMode=="Raw HTML") {
alert("HTML-läge - Endast för användare med behörighetsnivå 1 och 2 \n\nNär du arbetat klart i HTML-läget MÅSTE du återgå till normalläge \ninnan du klickar på någon annan flik eller sparar artikeln. \n\nAnnars blir koden felaktig!");
textEdit.document.body.innerText = textEdit.document.body.innerHTML
textEdit.document.body.style.fontFamily = "monospace"
textEdit.document.body.style.fontSize = "8pt"
strEditMode="WYSIWYG"
}
else {
alert("Går nu tillbaka till normalläge!");
textEdit.document.body.innerHTML = textEdit.document.body.innerText
textEdit.document.body.style.fontFamily = "Verdana"
textEdit.document.body.style.fontSize ="8pt"
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="1" marginwidth="2" marginheight="2"></IFRAME>
och själva filen som har textareafältet:
<SCRIPT language="JavaScript">
function initToolbar() {
text = kodFranDatabas.innerHTML
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()
}
</SCRIPT>
<tr>
<td width="15%" valign="top" align="right"><em> </em></td>
<td width="2%"> </td>
<td width="83%" bgcolor="#cccccc" valign="middle">
<table border="0" cellpadding="2" cellspacing="0"><tr><td bgcolor="#cccccc">
<DIV ID="toolbar" onClick="this._editor.setFocus()">
<IMG src="images/fet.gif" height=18 hspace=0 alt="Fet stil" border="0" onClick="doFormat('Bold')">
<IMG src="images/kursiv.gif" height=18 hspace=0 alt="Kursiv stil" border="0" onClick="doFormat('Italic')">
<IMG src="images/understruken.gif" height=18 hspace=0 alt="Understruken text" border="0" onClick="doFormat('Underline')">
<IMG src="images/vanster.gif" height=18 hspace=0 alt="Vänsterjusterad text" border="0" onClick="doFormat('JustifyLeft')">
<IMG src="images/center2.gif" height=18 hspace=0 alt="Centrerad text" border="0" onClick="doFormat('JustifyCenter')">
<IMG src="images/hoger.gif" height=18 hspace=0 alt="Högerjusterad text" border="0" onClick="doFormat('JustifyRight')">
<IMG src="images/html.gif" height=18 hspace=0 alt="Visa HTML-läge" border="0" onClick="swapMode();"></DIV>
</td> <td width="15"> </td><td><em class="b">WYSIWYG Editor</em></td></tr></table>
</td>
</tr>
<tr>
<td width="15%" valign="top" align="right"><em>Text:</em></td>
<td width="2%"> </td>
<td width="83%"><em>
<IFRAME id="edit" src="editor.html" class="formular" width="500" height="240"></IFRAME>
<TEXTAREA name="textform" style="display: none"></TEXTAREA>
<% If command = "edit" Then %>
<div id="kodFranDatabas" style="display: none;">
<% Response.Write textform %>
</div>
<% ElseIf command = "add" Then %>
<div id="kodFranDatabas" style="display: none;">
<% Response.Write textform %>
</div>
<% End If %>
</td>
</tr>
:h
MorphMedlem sedan juli 2000534 inlägg Vet inte om det fortfarande är aktuellt, men:
Det är en "feature" i editorn som orsakar detta, inget att göra åt. Dock kan du på ett enkelt sätt tvinga editorn att gå till normal-läge innan du skickar formuläret.
Till att börja med så ser jag att funktionen swapModes() i editor.html blivit lite omkastad... Skriv om den så den ser ut så här:
function swapModes() {
if (strEditMode=="WYSIWYG") {
textEdit.document.body.innerText = textEdit.document.body.innerHTML
textEdit.document.body.style.fontFamily = "monospace"
textEdit.document.body.style.fontSize = "10pt"
strEditMode="Raw HTML"
}
else {
textEdit.document.body.innerHTML = textEdit.document.body.innerText
textEdit.document.body.style.fontFamily = "Verdana"
textEdit.document.body.style.fontSize ="12px"
strEditMode="WYSIWYG"
}
textEdit.focus()
var s = textEdit.document.body.createTextRange()
s.collapse(false)
s.select()
}
I filen med textarean så lägger du in följande lilla javascript-metod nånstans i huvudet, exempelvis efter swapMode()-funktionen:
function checkMode() {
if (document.all.toolbar._editor.strEditMode=='Raw HTML'){
document.all.toolbar._editor.swapModes();
}
}
Sedan så kör du funktionen innan du skickar formuläret:
<form action="..." method="..." onSubmit="checkMode()">
brwMedlem sedan juli 2000619 inlägg Det är högaktuellt ... jag skall testa det imorgon på jobbet.
Du verkar kunna det här med Wysiwyg-editorer..
hur skall jag göra om jag vill implementera en sån där tabellfunktion så man kan infoga en tabell i min editor? har du nån kodsnutt? sen undrar jag om det går att få så att man kan välja target när man skall skapa länkar så att sidor kan öppnas i nytt fönster?
Många frågor på en gång.. :)
Mycket tacksam för svar.
Puttar iväg den här tråden till JavaScript-forumet. :)
brwMedlem sedan juli 2000619 inlägg Ändrar jag i editor.html som du skriver så fungerar inte HTML-läget alls.. blir helt kokko.. är du säker på att du inte missat något?
:q
MorphMedlem sedan juli 2000534 inlägg Varit lite borta ett tag så svaret är lite sent. Håll till godo:
Ändrar jag i editor.html som du skriver så fungerar inte HTML-läget alls.. blir helt kokko.. är du säker på att du inte missat något?
I editor.html (högt upp), ändra också
var strEditMode="Raw HTML"
till
var strEditMode="WYSIWYG"
så borde det funka...
sen undrar jag om det går att få så att man kan välja target när man skall skapa länkar så att sidor kan öppnas i nytt fönster
Du har ju redan en funktion för detta, insertLink() :i Skapa en ny knapp i toolbaren bara:
<IMG src="images/link.gif" height=18 hspace=0 alt="Skapa länk" border="0" onClick="insertLink();">
Markera text som du vill länka & klicka på den nya knappen så får du upp en trevlig dialogruta där du kan välja attribut för länken.
brwMedlem sedan juli 2000619 inlägg Hmmm jag får det fan inte att fungera... bifogar koden nedan som den ser ut nu.. för tillfället går det att skriva i textfältet men ingen av WYSIWYG-funktionerna fungerar till exempel fetstil mm.
Ang. länkar så har jag ju funktionen och det kommer upp en ruta för att ställa attribut för länken men det som saknas är target (målfönster) det finns bara URL-fält. Man vill ju inte alltid öppna länken i samma fönster.. speciellt inte om man länkar till en annan webbplats.
------------
editor6.html
------------
<STYLE>
BODY {margin: 0px; padding: 0px; border: none}
IFRAME {width: 100%; height: 100%; border: none; FONT: 12pt VERDANA,ARIAL,HELVETICA;}
</STYLE>
<SCRIPT>
var strEditMode="WYSIWYG"
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 ="8pt"
textEdit.focus()
}
function swapModes() {
if (strEditMode=="WYSIWYG") {
textEdit.document.body.innerText = textEdit.document.body.innerHTML
textEdit.document.body.style.fontFamily = "monospace"
textEdit.document.body.style.fontSize = "10pt"
strEditMode="Raw HTML"
}
else {
textEdit.document.body.innerHTML = textEdit.document.body.innerText
textEdit.document.body.style.fontFamily = "Verdana"
textEdit.document.body.style.fontSize ="12px"
strEditMode="WYSIWYG"
}
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="1" marginwidth="2" marginheight="2"></IFRAME>
----------------------------------
artikelproperties.asp
----------------------------------
<%
'================================================================================
' TEXTFÄLTET BÖRJAR HÄR
'================================================================================
%>
<% If command = "edit" OR command = "add" Then %>
<SCRIPT language="JavaScript">
function initToolbar() {
text = kodFranDatabas.innerHTML
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()
}
function checkMode() {
if (document.all.toolbar._editor.strEditMode=='Raw HTML'){
document.all.toolbar._editor.swapModes();
}
}
</SCRIPT>
<% End If %>
<form name="artikel" action="artikelproperties.asp" method="post" class="form" onSubmit="javascript:document.artikel.textform.value=edit.textEdit.document.body.innerHTML; checkMode();">
<table>
<tr>
<td width="13%" valign="top" align="right"><em> </em></td>
<td width="2%"><em> </em></td>
<td width="85%" bgcolor="#cccccc" valign="middle">
<table border="0" cellpadding="1" cellspacing="0"><tr><td bgcolor="#cccccc">
<DIV ID="toolbar" onClick="this._editor.setFocus()">
<IMG src="images/fet.gif" height=18 hspace=0 alt="Fet stil" border="0" onClick="doFormat('Bold')">
<IMG src="images/kursiv.gif" height=18 hspace=0 alt="Kursiv stil" border="0" onClick="doFormat('Italic')">
<IMG src="images/understruken.gif" height=18 hspace=0 alt="Understruken text" border="0" onClick="doFormat('Underline')">
<IMG src="images/vanster.gif" height=18 hspace=0 alt="Vänsterjusterad text" border="0" onClick="doFormat('JustifyLeft')">
<IMG src="images/center2.gif" height=18 hspace=0 alt="Centrerad text" border="0" onClick="doFormat('JustifyCenter')">
<IMG src="images/hoger.gif" height=18 hspace=0 alt="Högerjusterad text" border="0" onClick="doFormat('JustifyRight')">
<IMG src="images/indrag.gif" height=18 hspace=0 alt="Indrag i text" border="0" onClick="doFormat('Indent')">
<IMG src="images/ejindrag.gif" height=18 hspace=0 alt="Ta bort indrag i text" border="0" onClick="doFormat('Outdent')">
<IMG src="images/lank.gif" height=18 hspace=0 alt="Skapa hyperlänk" border="0" onClick="insertLink()">
<% If Session("usertype") = "1" OR Session("usertype") = "2" Then %><IMG src="images/html.gif" height=18 hspace=0 alt="Visa HTML-läge" border="0" onClick="swapMode();"><% End If %></DIV>
</td> <td width="15"> </td><td><em class="b">WYSIWYG Editor</em></td></tr></table>
</td>
</tr>
<tr>
<td width="13%" valign="top" align="right"><em>Text:</em></td>
<td width="2%"> </td>
<td width="85%"><em>
<IFRAME id="edit" src="editor6.html" class="formular" width="500" height="350"></IFRAME>
<TEXTAREA name="textform" style="display: none"></TEXTAREA>
<% If command = "edit" Then %>
<div id="kodFranDatabas" style="display: none;">
<% Response.Write textform %>
</div>
<% ElseIf command = "add" Then %>
<div id="kodFranDatabas" style="display: none;">
<% Response.Write textform %>
</div>
<% End If %>
</td>
</tr>
</table>
</form>
MorphMedlem sedan juli 2000534 inlägg Klantigt av mig!
Du måste ändra i IF-satsen i execCommand-funktionen i editor.html också.
if (strEditMode=="Raw HTML") {
blir
if (strEditMode=="WYSIWYG") {
Ang länkarna så kom jag ihåg fel, jag hade för mig att man kunde välja target i den dialogrutan...
En möjlig lösning på problemet är att du svänger ihop en egen dialogruta i form av ett html-dokument. Ett formulär där man får skriva in URL och välja target. När man skickar formuläret så uppdateras editorn med den nya länken. Lite krångligt men om du absolut vill att man skall kunna välja target utan att pilla på HTML-koden är det enda sättet.
brwMedlem sedan juli 2000619 inlägg Ah.. nu fungerar iaf. WYSIWYG funktionerna.... när jag trycker spara och är i HTML-läget så ser jag snabbt hur den går över till vanligt läge men den lägger till "<br>" ändå i koden?!
Har du något exempel på det där med target från en htmlsida så får du gärna klistra in det här.
En annan sak som jag funderar på är om du har nån smart idé på hur man gör för att hantera bilder och tabeller?
Du åkar inte känna till nån hemsida som visar vilka funktioner som finns och vad man kan göra med WYSIWYG-editorn?
