Making a div box easily/safely editable without Mysql

[uhm]

Edit: Problem solved! Explanation and complete source code available below in my last post

Hi

I work for a small Public Library and am rebuilding our website.
But I could use some help with a few problems.

I'm building a website with a small section of text located in a DIV box on the far left. Similar to the area on this website: http://oml.prl.ab.ca/friends.html (http://oml.prl.ab.ca/friends.html)
(very similar, ours will have library news/info as well)

Anyway, creating the box isn't the problem.

My problem is that I have to make that area easily updateable by the other
staff members.
But they aren't familiar with Dreamweaver (Only Frontpage, and only with the visual side. HTML code is alien to them) . And aren't all that comfortable with the computers.

I need a way for them to easily add text in the area of the site, without accidently interfering/deleting/messing with the other code on the page.
I can't be responsible for editing the box, I'm out of a job in a couple months, and it will be nearly a year before there is money to hire another Computer savvy person.

I'm trying to fiigure out the best solution for this. The website is PHP/HTML/CSS
No Mysql or other databases are available. (web host restrictions)

Should I try loading in an external XML file?
I'm pretty sure they will need access to simple text formating (Primarily making Bold text)
But I could teach them simple html tags (<b> <i> etc..) as long as they can't interfere with the rest of the page.

Hope that makes sense.

Looking forward to any suggestions you may have.

Thanks

Uhm.

[blazes]

Your best best is to use something like fckeditor or tinymce, and then using php to save the content of that to a flat file. Either something like news.txt, or news.xml.

[hl]

http://php.net/include

Include a text file in the area. Have them edit the text file. Use one of the above editors if you want them to be able to format the text.

[uhm]

Hi

Thank you for your recomendations.

HL, I haven't gotten to the point to test it yet, but http://php.net/include (http://php.net/include) looks like the answer to loading the text. Thanks.
Edit: I tested it, and it's exactly what I was looking for. Source code in next post.

Blazes, I hadn't heard of fckeditor, but I have heard of TinyMCE (Seen TinyMCE in use when using Joomla) But I didn't realize I could use something like that without installing/running a full CMS website. Thanks.

I've downloaded and installed ckeditor (newest version) It works so far.
It allows the user to create Formated Text, and then click on the source button to view the created HTML code.

But I'm going to see if I can't simplify the process by having the editor overwrite/create the necessary Text file using the ckeditors value.

I've got a simple PHP script that the ckeditor form is pointing to, the php script overwrites/creates the text file. But I haven't figured out how to pass the text from the ckeditor to the php script. The text file keeps showing up as blank.

I'll keep trying, and if I run out of ideas, I'll create a new post for the problem.
Edit: Got it to work. Source code in next post

Thank you again for both of your help.

Uhm.

[uhm]

Hi me again.

Thank you both again for your help, after some googling, experimentation and online reading, I now have a working solution.

Heres a quick overview of what I have.

Page one: page_editor.php
Staff member goes to this page.
Page contains ckeditor embedded into it.
the editor box loads text from existing page_text.txt file
Staff members edits, deletes, creates text. Hits save and is brought to..

Page two: page_editor_script.php
This script does a basic file creation/overwrite (on page_text.txt) using the values sent from the first page.
The script then redirects you to...

Page three: page_viewer.php
This is my example test page. It loads the HTML formatted text from page_text.txt and places the imported text into a div box.
Overflow is handled by a scroll bar.

I like it and it looks like it will do what I wanted.
It provides a safe and easy way for staff to add/update the text on the website.
I think I'll add more...

Anyway Thank you again for all your help.

Uhm.

For those who are interested and or are facing similar problems, here is my source code:

Note: To make sure we are on the same page, I installed a copy of CKEditor 3.0.2 (http://ckeditor.com/) (Downloaded Dec 23rd 2009) to provide the rich text editor.
Installation was simple, just followed directions.

Page One: page_editor.php

<html>
<head>
<title>Sample - CKEditor</title>
<script type="text/javascript" src="files/ckeditor/ckeditor.js"></script>
</head>
<body>
<form action="page_editor_script.php" method="post">
<p>
<label for="editor1">
Editor 1:</label><br/>
<textarea cols="30" id="editor1" name="editor1" rows="20">
<?php
include("page_text.txt");
?>
</textarea>
<script type="text/javascript">
//<![CDATA[
// This call can be placed at any point after the
// <textarea>, or inside a <head><script> in a
// window.onload event handler.
// Replace the <textarea id="editor"> with an CKEditor
// instance, using default configurations.
CKEDITOR.replace( 'editor1' );
//]]>
</script>
</p>
<p>
<input type="submit" value="Submit"/>
</p>
</form>
</body>
</html>


Page Two: page_editor_script.php

<?php
$File = "page_text.txt";
$Handle = fopen($File, 'w');
?>
<?php
$File = "page_text.txt";
$Handle = fopen($File, 'w');
$Data = stripslashes( $_POST['editor1'] ) ;
fwrite($Handle, $Data);
// print "Data Written";
fclose($Handle);
?>
<html>
<META HTTP-EQUIV="refresh" content="0;URL=page_viewer.php">
</html>

Page Three: page_viewer.php

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Page Viewer</title>
<style type="text/css">
<!--
#apDiv1 {
position:absolute;
left:10px;
top:41px;
width:200px;
height:300px;
z-index:1;
background-color: #CCCCCC;
overflow: auto;
}
-->
</style>
</head>
<body>
<div id="apDiv1">
<?php
include("page_text.txt");
?>
</div>
<a href="page_editor.php">Return to Editor </a>
</body>
</html>