Tutorial – Simple PHP Text Editor

There really isn’t a simple way to break this down in sections as it is one chunk of code, so instead I will show you the whole block of code and then explain each section:

 $file */
	'Save Title'	=>'title.txt',
	'Save Body Section' =>'paragraph.txt'
);
foreach($files as $value=>$file) {

	file_exists($file) ? null : $fh = fopen($file, 'w');

	if(isset($_POST['save']) && $_POST['save'] == $value) {
		$fh = fopen($file, 'w') or die("can't open file");
		$stringData = stripslashes($_POST['edittext']);
		fwrite($fh, $stringData);
		fclose($fh);
	}
}
?>

I opted to go with just simple text files to store the actual text for each section. The first thing that must be done is define the file(s) I’m using 2 files so that I can change the header and paragraph section so that you can see how this works with an input form and textarea form. The files are defined here:

$files = array(
	/* $value => $file */
	'Save Title'	=>'title.txt',
	'Save Body Section' =>'paragraph.txt'
);

I’m using an array so that both files can be identified and called through $files and later through $file. Also a value is being defined which will help pull the text from the respective submit buttons in the form fields.

In the next section is the check for 2 things, one is if the submit button has been pressed then it will change the text in the file, and the other part is if the files exist. That portion can be found here:

foreach($files as $value=>$file) {

	file_exists($file) ? null : $fh = fopen($file, 'w');

So what this does is it checks each file associated with a value and within the array $files. If the file exists then it does nothing (null), if the file doesn’t exist it makes a writable (w) file.

if(isset($_POST['save']) && $_POST['save'] == $value) {
		$fh = fopen($file, 'w') or die("can't open file");
		$stringData = stripslashes($_POST['edittext']);
		fwrite($fh, $stringData);
		fclose($fh);
	}
}
?>

This is checking for two things the first is if the submit button with the name=”save” has been clicked (either of them) and then it also checks which value belows to the submit button.

This is also creating a variable ($stringData) that will pull any text without slashes within an input or textarea defined by name=”edittext” .

Assuming both checks pass it then opens the respective text file that is associated with the value. After opening the file it will place the text inside of the textarea or input field being defined by name=”edittext”.

Now that you know how the core code will function lets add the HTML that will also you to display the text within the file and edit the text. Keep in mind that because these are just .txt files if you want to add any extra HTML/XHTML you’ll have to hand code it. Here is the XHTML/PHP that will display the title and paragraph respectively:

"; } fclose($file); ?>

The PHP code opens the respective file and then reads each line in the respective files.

Note: I had to add a space in the break(br) tag just to properly display the code. That break tag will be added at the end of each line when displayed. I opted to go this route instead of /r/n in PHP coding just to ensure there were no issues with W3C Validation or formating.

Here are the 2 forms you’ll fill out to change the text in each file:

" />

This is the title form. The reason this is using an input to define the “edittext” to ensure you’re only able to add 1 line of text, obviously there is no character limit so if the line is long enough it will wrap around. I did this so that the break tag doesn’t get added to the header tag which would be invalid code when checked for W3C rules.

The next form is the form that will create/modify the text within the paragraph tags. This uses textarea so that it supports pressing enter for a new line. One difference you’ll notice is the missing break tag within the PHP code used to display the text. This is done so that the text in the textarea will show the same thing as in the .txt file. Another reason is adding the break tags in here would double up the break tags once the user saves.

< br/>

And that is how you’d make a simple text editor that you can add to your website. Now Ideally this would be done in conjunction with a login code so that only you can use it to edit the text on your website.

If you came here from my portfolio then you’ll notice the code doesn’t save if you refresh the demo, that is because for the demo I’ve used this modified bit of code to allow the user to get an idea of the effect of the functionality without worrying about breaking the text inside of my text files.

Leave a Reply