Mozile XHTML Editing Example

How does this work?

A PHP script adds the required HTTP headers and the XML declaration. The Mozile style sheet enables editing and loads an RSD configuration file at the same time. This method does leave an incorrect <meta> tag specifying the mime type as "text/html", but this will be ignored by the browser because the HTTP header has priority.

xhtmlfile.edit.php

<?php 
	header("Content-type: application/xhtml+xml; charset=iso-8859-1");
	echo '<?xml version="1.0" encoding="ISO-8859-1"?>'."\n";
	echo '<?xml-stylesheet href="mozilestyle.css" type="text/css"?>'."\n";
	include 'xhtmlfile.htm';
?>

mozilestyle.css

/* Mozile CSS */
.divEdit {
-moz-user-modify: read-write; -moz-user-input: enabled; -moz-user-select: text;
}
mozileconfiguration {
background-image: url("rsd2.xml");
}

xhtmlfile.htm

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Mozile XHTML Editing Example</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" type="text/css" href="switcher.css" />
</head>
<body>

<div class="divNoEdit">
<div id="switcher">
<ul>
<li><a href="xhtmlfile.htm">View file</a></li>
<li><a href="xhtmlfile.edit.php">Edit in XHTML Mode</a></li>
<li><a href="xhtmlfile.code.php">Show source code</a></li>
</ul>
</div>

<h1>Mozile</h1>
<h2>Mozile Example XHTML file</h2>

<p>This &lt;div&gt; is <i>not</i> editable.</p>

<p><a href="../index.html">Return to main index</a></p>

</div>

<div class="divEdit" id="xhtmlfile_edit1">

<p>This is an XHTML file served up as an HTML compatible file. It relies on the server
being configured correctly to serve files with the extension ".htm" as text/html.
Hence, there is no need to use a server script to set the HTTP headers.</p>

<p>To edit this file in XHTML Mode all that needs to be done is to add a few lines of server
side script to the very top of the file.</p>

<ol>
<li>Set the HTTP mime type to application/xhtml+xml</li>
<li>Set the HTTP character set</li>
<li>Add the XML declaration</li>
<li>Add an XML style sheet to enable editing</li>
</ol>

</div>

</body>
</html>

switcher.css

html {
background-color: #ff6;
}

body {
margin: 20px;
border: 10px solid #003;
padding: 10px;
font-family: verdana, arial, sans-serif;
background-color: #ffc;
color: #000;
}

div {
text-align: left;
}

pre {
background-color: #fff;
padding-left: 1em;
}

.divNoEdit {
margin: 10px auto;
border: 2px solid #000;
padding: 10px;
background-color: #ccc;
}
.divEdit {
margin: 10px auto;
border: 2px solid #0f0;
padding: 10px;
background-color: #cfc;
}

b { font-weight: bold; }

#switcher {
width: 15em;
float: right;
margin: 0.5em;
border: 1px solid #666;
padding: 1em;
}
#switcher ul {
margin: 0px;
padding: 0.5em 0.5em 0.5em .5em;
}