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]
