The issue was with various headings in the template. They would look fine when browsing the site as the public but as soon as you logged into the front-end to perform the inline editing then you would have the headings looking like this:
{DIV CLASS="EDITABLE" DATA-ID="148" DATA-CONTEXT="ARTICLE" DATA-TYPE="TITLE" DATA-ITEMTYPE="BLOG" CONTENTEDITABLE="TRUE" STYLE="DISPLAY:INLINE;"}Heading One
After much research and contacting support for both ARK Editor and TemplateMonster.com I finally found the issue myself.
The issue is with a custom function that seems to be present in most TemplateMonster themes called wrap_with_span() it looks something like this:
//Wrap Title words with Spans
function wrap_with_span($string){
if(strpos($string, '||')){
$string_delim_arr = explode('||', $string);
$string = $string_delim_arr[0];
}
$string_array = explode(" ", $string);
$string_spans[] = "";
foreach ($string_array as $key => $value) {
$string_spans[] = '<span class="item_title_part' . $key . '">'.$value.'</span> ';
}
$wrapped_string = implode($string_spans); return $wrapped_string; }
Resolving the issue
To fix this issue, I simply added a few lines of code to the beginning of this custom function.
$user = JFactory::getUser();
if (!$user->guest) {
return $string;
}
This bit of code simply returns the original string if there is someone logged in. This is a quick fix and may break some responsiveness of the website. It is used generally if you are allowing someone to log into the site to edit pages/articles. You might want to reconsider the code if you have people registered on the site that will not have access to the ARK Editor plugin.