<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>36Flavours.com &#187; tinymce</title>
	<atom:link href="http://36flavours.com/tag/tinymce/feed/" rel="self" type="application/rss+xml" />
	<link>http://36flavours.com</link>
	<description>A taste of something different...</description>
	<lastBuildDate>Mon, 19 Apr 2010 20:01:53 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.0</generator>
		<item>
		<title>Using WP-Syntax and the visual editor</title>
		<link>http://36flavours.com/2009/09/using-wp-syntax-and-the-visual-editor/</link>
		<comments>http://36flavours.com/2009/09/using-wp-syntax-and-the-visual-editor/#comments</comments>
		<pubDate>Tue, 15 Sep 2009 20:09:40 +0000</pubDate>
		<dc:creator>Steve Whiteley</dc:creator>
				<category><![CDATA[Blogging]]></category>
		<category><![CDATA[PHP]]></category>
		<category><![CDATA[WordPress]]></category>
		<category><![CDATA[plugin]]></category>
		<category><![CDATA[tinymce]]></category>
		<category><![CDATA[wp-syntax]]></category>

		<guid isPermaLink="false">http://36flavours.com/?p=388</guid>
		<description><![CDATA[Many of the blog posts I write tend to be about web development related topics and will often include a number of code snippets. My current choice of syntax highlighter is WP-Syntax, which supports a wide range of popular languages and has the ability to also include line numbers. The problem with using this plug-in [...]]]></description>
			<content:encoded><![CDATA[<p class="first">Many of the blog posts I write tend to be about web development related topics and will often include a number of code snippets. My current choice of syntax highlighter is <a href="http://wordpress.org/extend/plugins/wp-syntax/" target="_blank">WP-Syntax</a>, which supports a wide range of popular languages and has the ability to also include line numbers.</p>
<p>The problem with using this plug-in is that the <a href="http://wordpress.org/" target="_blank">WordPress</a> WYSIWYG Editor (<a href="http://tinymce.moxiecode.com/" target="_blank">TinyMCE</a>), will <strong>remove any tags and attributes</strong> that it believes to be invalid according to it&#8217;s configuration. As two of the attributes used by this plug-in are custom attributes <em>(escaped/line)</em> they are removed, causing some unexpected output.<span id="more-388"></span></p>
<p>One solution to this problem is to add the custom attributes to the list of valid elements by using the &#8216;<strong>tiny_mce_before_init</strong>&#8216; filter and appending them to the &#8216;<strong>extended_valid_elements&#8217;</strong> string.</p>
<p>The function below can be added to the <em>functions.php</em> file within your theme directory:</p>

<div class="wp_syntax"><div class="code"><pre class="php" style="font-family:monospace;"><span style="color: #000000; font-weight: bold;">function</span> tinymce_wp_syntax<span style="color: #009900;">&#40;</span><span style="color: #000088;">$init</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
	<span style="color: #000088;">$values</span> <span style="color: #339933;">=</span> <span style="color: #0000ff;">'pre[lang|escaped=true|line]'</span><span style="color: #339933;">;</span>
	<span style="color: #b1b100;">if</span> <span style="color: #009900;">&#40;</span><span style="color: #990000;">empty</span><span style="color: #009900;">&#40;</span><span style="color: #000088;">$init</span><span style="color: #009900;">&#91;</span><span style="color: #0000ff;">'extended_valid_elements'</span><span style="color: #009900;">&#93;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
		<span style="color: #000088;">$init</span><span style="color: #009900;">&#91;</span><span style="color: #0000ff;">'extended_valid_elements'</span><span style="color: #009900;">&#93;</span> <span style="color: #339933;">=</span> <span style="color: #000088;">$values</span><span style="color: #339933;">;</span>
	<span style="color: #009900;">&#125;</span> <span style="color: #b1b100;">else</span> <span style="color: #009900;">&#123;</span>
		<span style="color: #000088;">$init</span><span style="color: #009900;">&#91;</span><span style="color: #0000ff;">'extended_valid_elements'</span><span style="color: #009900;">&#93;</span> <span style="color: #339933;">.=</span> <span style="color: #0000ff;">','</span><span style="color: #339933;">.</span><span style="color: #000088;">$values</span><span style="color: #339933;">;</span>
	<span style="color: #009900;">&#125;</span>
	<span style="color: #b1b100;">return</span> <span style="color: #000088;">$init</span><span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span>
add_filter<span style="color: #009900;">&#40;</span><span style="color: #0000ff;">'tiny_mce_before_init'</span><span style="color: #339933;">,</span> <span style="color: #0000ff;">'tinymce_wp_syntax'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></div></div>

<p>Adding this to my blog enables me to continue using the visual editor instead of disabling it and at the same time will allow the other HTML filters to continue as normal <img src='http://36flavours.com/wp-includes/images/smilies/icon_smile.gif' alt=':)' class='wp-smiley' /> .</p>
<p><strong>Note:</strong> You may have to force refresh (ctrl + f5) the post / page editing page for the changes to take effect.</p>
<p><strong>EDIT</strong>: This solution does not fully solve the problem in <a href="http://mu.wordpress.org/">WordPress MU</a> installations, as you need to adjust the allowed post tags used by the content filter.</p>

<div class="wp_syntax"><div class="code"><pre class="php" style="font-family:monospace;"><span style="color: #b1b100;">if</span> <span style="color: #009900;">&#40;</span><span style="color: #339933;">!</span>CUSTOM_TAGS<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
	<span style="color: #000088;">$allowedposttags</span><span style="color: #009900;">&#91;</span><span style="color: #0000ff;">'pre'</span><span style="color: #009900;">&#93;</span> <span style="color: #339933;">=</span>  <span style="color: #990000;">array</span><span style="color: #009900;">&#40;</span>
		<span style="color: #0000ff;">'lang'</span> <span style="color: #339933;">=&gt;</span> <span style="color: #990000;">array</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">,</span>
		<span style="color: #0000ff;">'escaped'</span> <span style="color: #339933;">=&gt;</span> <span style="color: #990000;">array</span><span style="color: #009900;">&#40;</span><span style="color: #0000ff;">'true'</span> <span style="color: #339933;">=&gt;</span> <span style="color: #990000;">array</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">,</span>
		<span style="color: #0000ff;">'line'</span> <span style="color: #339933;">=&gt;</span> <span style="color: #990000;">array</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span>
	<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span></pre></div></div>

]]></content:encoded>
			<wfw:commentRss>http://36flavours.com/2009/09/using-wp-syntax-and-the-visual-editor/feed/</wfw:commentRss>
		<slash:comments>4</slash:comments>
		</item>
	</channel>
</rss>
