SelectRange / MS editing component
Nu brænder jeg da snart helt sammen!Når jeg markerer tekst, og trykker på \'italic\' knappen, så bliver teksten *på knappen oven over* gjort italic, istedet for teksten i feltet...?
Jeg har haft det her til at virke, men af en eller anden grund dur det ikke mere, så nu poster jeg hele lortet, og håber nogen kan sige mig hvorfor...
editor.php >>
<html>
<head>
<title>backend</title>
<script language=\'javascript\' src=\'http://www.aggie.dk/hovedopgave/js_includes/editor.js\'></script>
<script language=\'javascript\' src=\'http://www.aggie.dk/hovedopgave/js_includes/help.js\'></script>
<link rel=\'stylesheet\' type=\'text/css\' href=\'http://www.aggie.dk/hovedopgave/css_includes/style_generator.css.php?pg=edit_module.php\'>
</head>
<body leftmargin=\'0\' rightmargin=\'0\' topmargin=\'0\' bottommargin=\'0\' scroll=\'no\'>
<script language=\'JavaScript\'>
pictures = new Array;
pictures[0] = new Object;
pictures[0].id=\'2\';
pictures[0].name=\'ak47.jpg\';
pictures[0].description=\'Et billede af en ak47 - et dejligt automatvåben\';
pictures[0].category=\'Weapons\';
pictures[0].priority=\'1\';
pictures[0].path=\'http://www.aggie.dk/hovedopgave/pictures\';
pictures[1] = new Object;
pictures[1].id=\'4\';
pictures[1].name=\'arab2.jpg\';
pictures[1].description=\'another arab\';
pictures[1].category=\'Persons\';
pictures[1].priority=\'2\';
pictures[1].path=\'http://www.aggie.dk/hovedopgave/pictures\';
</script>
<!-- this one is used for tooltipping - i cant figure out a way to pop in a new element without reflowing the page/erasing the old content... -->
<div id=\"tooltip\" class=\"framed_object\"></div>
<!-- the information and meta button bar -->
<div id=\"editor_headline\" class=\"header\">
Redigerer side: <b>\"Introduction\"</b>, paragraf: <b>\"About the farm\"</b>
<span
class=\"button\"
id=\"button_database_browser\"
onclick=\"window.location=\'database_browser.php\';\"
onmouseover=\"shortHelp(\'Annuller denne redigering og vælg en ny paragraf. Ingen data vil blive gemt.\',\'friendly\',event);\"
onmouseout=\"shortHelpDeactivate();\"
>
Åben anden paragraf
</span>
<span
class=\"button\"
id=\"button_end_application\"
onclick=\"window.close();\"
onmouseover=\"shortHelp(\'Lukker redigeringsprogrammet.\',\'friendly\',event);\"
onmouseout=\"shortHelpDeactivate();\"
>
Luk applikationen
</span>
</div>
<!-- the header -->
<div id=\"editor_title\">
Paragraf titel:
<span id=\"editor_title_container\" class=\"framed_object\">
Funny Farm </span>
</div>
<!-- the picture pane -->
<div id=\"editor_picture_pane\" class=\"framed_object\">
<!-- empty for now, we fill in the stuff when all the drawing is done -->
</div>
<!-- the editing area -->
<div id=\"editor_text_container\" class=\"framed_object\">
Dette er den tekst der skal ændres
</div>
<!-- the menu bar, editing commands -->
<div id=\"editor_option_menu\">
<div
class=\"button\"
onClick=\"modifyContent(\'Bold\');\"
onmouseover=\"shortHelp(\'Laver den markerede tekst fed.\',\'friendly\',event);\"
onmouseout=\"shortHelpDeactivate();\"
>
Fed
</div>
<div
class=\"button\"
onClick=\"modifyContent(\'Italic\');\"
onmouseover=\"shortHelp(\'Laver den markerede tekst kursiv\',\'friendly\',event);\"
onmouseout=\"shortHelpDeactivate();\"
>
Kursiv
</div>
<div
class=\"button\"
onClick=\"modifyContent(\'CreateLink\');\"
onmouseover=\"shortHelp(\'Laver den markerede tekst til et hyperlink\',\'friendly\',event);\"
onmouseout=\"shortHelpDeactivate();\"
>
Link
</div>
</div>
<!-- the \'meta-menu\' - save and preview -->
<div id=\"editor_meta_menu\">
<div
class=\"button\"
id=\"preview\"
onClick=\"previewDoc();\"
onmouseover=\"shortHelp(\'Se siden som den ser ud for besøgende.\',\'friendly\',event);\"
onmouseout=\"shortHelpDeactivate();\"
>
Preview
</div>
<div
class=button
id=save
onClick=\"saveContent();\"
onmouseover=\"shortHelp(\'Gem paragraffen.\',\'friendly\',event);\"
onmouseout=\"shortHelpDeactivate();\"
>
Gem
</div>
</div>
<!-- everything nice and square - now fill in the data and make the content editable-->
<script language=\"javascript\">
loadPictures();
setDesignMode();
</script>
<div class=\'footer\'>Visualizer/OTS, Munkebjergvej 130, 5230 Odense, Denmark | <a href=\'mailto:aggie@aggie.dk\'>Contact</a></div>
</body>
</html>
editor.js >>
// functions used by editor.php
function setDesignMode() {
document.designMode = \"On\";
document.all.editor_text_container.contentEditable = true;
document.all.editor_title_container.contentEditable = true;
document.all.editor_text_container.focus();
}
function modifyContent(action) {
if (window.range == null) {
window.range = document.selection.createRange();
}
window.range.select();
window.range.execCommand(action);
window.range.select();
document.all.editor_text_container.focus();
}
function previewDoc() {
previewWin = window.open(\'\',\'previewWin\',\'width=400,height=300,scrollbars=no, menubar=no\');
previewWin.title=\"Preview\";
previewWin.document.write(document.all.editor_text_container.innerHTML);
}
function loadPictures() {
document.all.editor_picture_pane.innerHTML = \"\";
for(i=0;i<pictures.length;i++) {
document.all.editor_picture_pane.innerHTML += \"<img src=\'\" + pictures[i].path + \"/\" + pictures[i].name + \"\' class=\'preview_picture\' ondblclick=\'removePicture(\" + pictures[i].id + \");\'>\";
document.all.editor_picture_pane.innerHTML +=\"<div class=\'picture_description\'>\" + pictures[i].description + \"</div>\";
}
}
function removePicture(id) {
for (i=0;i<pictures.length;i++) {
if (pictures[i].id == id) {
pictures.splice(i,1);
}
}
loadPictures();
}
