Wysiwig Editor Example Code Issue

One of my issues lately with my CMS system has been the TinyMCE (Wysiwig Editor). Doing example code has been extremely painful. As everytime I would go back in to make an edit I would have to rewrite the examples as it would convert it to real HTML and or Javascript. Because of this I found myself wasting a lot of time fixing these articles every time I would make an edit.

Luckily I found an easy fix. I switched from using blockquotes to pre tags with code tags. Not only this but I found a PHP script that cleans the code behind these tags to make things as they should be.

My code used to look something like this:

<blockquote> <script>alert("Hi!");</script> </blockquote>

Now I have something that is really how it all should have been instead.. I am using the pre and nested code tags.

Pre tags definition is this:

The tag defines preformatted text. Text in a pre element is displayed in a fixed-width font (usually Courier), and it preserves both spaces and line breaks. Thanks to W3C schools.

So inside of the code tag formatting can take place without all sorts of crazy html and such.

Now I found TinyMCE to have one small issue. Even with pre and code tags it would translate the content inside the tags to real HTML or javascript. To fix this I found this PHP script that goes inside of a string and locates the code tags and changes the code out for its htmlentities. matthewjamestaylor.com

function fixcodeblocks($string) {
	// Create a new array to hold our converted string
	$newstring = array();
	
	// This variable will be true if we are currently between two code tags
	$code = false;
	
	// The total length of our HTML string
	$j = mb_strlen($string);
	
	// Loop through the string one character at a time
	for ($k = 0; $k < $j; $k++) {
		// The current character
		$char = mb_substr($string, $k, 1);
		
		if ($code) {
			// We are between code tags
			// Check for end code tag
			if (atendtag($string, $k)) {
				// We're at the end of a code block
				$code = false;
				
				// Add current character to array
				array_push($newstring, $char);
				
			} else {
				// Change special HTML characters
				$newchar = htmlspecialchars($char, ENT_QUOTES);
				
				// Add character code to array
				array_push($newstring, $newchar);
			}
		} else {
			// We are not between code tags
			// Check for start code tag
			if (atstarttag($string, $k)) {
				// We are at the start of a code block
				$code = true;
			}
			// Add current character to array
			array_push($newstring, $char);
		}
	}
	//Turn the new array into a string
	$newstring = join("", $newstring);
	
	// Return the new string
	return $newstring;
}

function atstarttag($string, $pos) {
	// Only check if the last 6 characters are the start code tag
	// if we are more then 6 characters into the string
	if ($pos > 4) {
		// Get previous 6 characters
		$prev = mb_substr($string, $pos - 5, 6);
		
		// Check for a match
		if ($prev == "<code>") {
			return true;
		} else {
			return false;
		}
	} else {
		return false;
	}
}

function atendtag($string, $pos) {
	// Get length of string
	$slen = mb_strlen($string);
	
	// Only check if the next 7 characters are the end code tag
	// if we are more than 6 characters from the end
	if ($pos + 7 <= $slen) {
		// Get next 7 characters
		$next = mb_substr($string, $pos, 7);
		
		// Check for a match
		if ($next == "</code>") {
			return true;
		} else {
			return false;
		}
	} else {
		return false;
	}
} 

I found this to work like a charm. While their may be other methods out their that are faster and work way better. This method was the simplest.