<?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>WP Engineer &#187; WYSIWYG Editor</title>
	<atom:link href="http://wpengineer.com/tag/wysiwyg-editor/feed/" rel="self" type="application/rss+xml" />
	<link>http://wpengineer.com</link>
	<description>WordPress News, Hacks, Tips, Tutorials, Plugins and Themes</description>
	<lastBuildDate>Mon, 21 May 2012 22:48:48 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<item>
		<title>Customize WordPress WYSIWYG Editor</title>
		<link>http://wpengineer.com/1963/customize-wordpress-wysiwyg-editor/</link>
		<comments>http://wpengineer.com/1963/customize-wordpress-wysiwyg-editor/#comments</comments>
		<pubDate>Thu, 18 Feb 2010 14:01:45 +0000</pubDate>
		<dc:creator>Frank</dc:creator>
				<category><![CDATA[WordPress Tutorials]]></category>
		<category><![CDATA[HTML Editor]]></category>
		<category><![CDATA[TinyMCE]]></category>
		<category><![CDATA[WordPress]]></category>
		<category><![CDATA[WP]]></category>
		<category><![CDATA[WYSIWYG Editor]]></category>

		<guid isPermaLink="false">http://wpengineer.com/?p=1963</guid>
		<description><![CDATA[Adjustments to the editor TinyMCE via hook, so regardless of the core files of WordPress is also possible and must be used in a number of requirements. So in this article are some examples that can be adapted to its needs and should give an introduction of customizing the TinyMCE editor in WordPress. You put [...]]]></description>
			<content:encoded><![CDATA[<p>Adjustments to the editor TinyMCE via hook, so regardless of the core files of WordPress is also possible and must be used in a number of requirements. So in this article are some examples that can be adapted to its needs and should give an introduction of customizing the TinyMCE editor in WordPress.<br />
<span id="more-1963"></span><br />
You put the following code snippet in the <code>functions.php</code> of the theme or stores it into a Plugin. There are a whole range of possibilities and I would like to show only a small range of them. Adjusting the buttons is quite comfortable to do via the Plugin <a href="http://wordpress.org/extend/plugins/tinymce-advanced/">TinyMCE Advanced</a>.</p>
<h4>Adjust HTML-Filter</h4>
<p>The default editor is set to always generate xHTML 1.0 and thus not all tags are allowed; a classic example are iframes, which you use for Google Map for example. Sure there are other approaches via short code, etc., but this is not the today topic. Merely as an example, allowing the tag <code>iframe</code>, with various attributes, and the Tags must be added to the variable <code>$ext</code>.</p>
<pre lang="php">
function fb_change_mce_options($initArray) {
	// Comma separated string od extendes tags
	// Command separated string of extended elements
	$ext = &#039;pre&#091;id|name|class|style&#093;,iframe&#091;align|longdesc|name|width|height|frameborder|scrolling|marginheight|marginwidth|src&#093;&#039;;

	if ( isset( $initArray&#091;&#039;extended_valid_elements&#039;&#093; ) ) {
		$initArray&#091;&#039;extended_valid_elements&#039;&#093; .= &#039;,&#039; . $ext;
	} else {
		$initArray&#091;&#039;extended_valid_elements&#039;&#093; = $ext;
	}
	// maybe; set tiny paramter verify_html
	//$initArray&#091;&#039;verify_html&#039;&#093; = false;

	return $initArray;
}
add_filter(&#039;tiny_mce_before_init&#039;, &#039;fb_change_mce_options&#039;);
</pre>
<h4>Customizing the function of the buttons in your Editor</h4>
<p>A way to expand the block formats (<code>theme_advanced_blockformats</code>) or modify and disable a few buttons in your editor (<code>theme_advanced_disable</code>).</p>
<p><img src="http://wpengineer.com/wp-content/uploads/mytinymce-en.png" alt="" title="mytinymce-en" width="468" height="240" class="aligncenter size-full wp-image-1962" /></p>
<pre lang="php">
function fb_change_mce_buttons( $initArray ) {
	//@see http://wiki.moxiecode.com/index.php/TinyMCE:Control_reference
	$initArray&#091;&#039;theme_advanced_blockformats&#039;&#093; = &#039;p,address,pre,code,h3,h4,h5,h6&#039;;
	$initArray&#091;&#039;theme_advanced_disable&#039;&#093; = &#039;forecolor&#039;;

	return $initArray;
}
add_filter(&#039;tiny_mce_before_init&#039;, &#039;fb_change_mce_buttons&#039;);
</pre>
<h4>Change language of spelling</h4>
<p>In our third case, we adapt the language of the spelling checker, in our example we will now allow German and English only.</p>
<pre lang="php">
function fb_mce_external_languages($initArray){
	$initArray&#091;&#039;spellchecker_languages&#039;&#093; = &#039;+German=de, English=en&#039;;

	return $initArray;
}
add_filter(&#039;tiny_mce_before_init&#039;, &#039;fb_mce_external_languages&#039;);
</pre>
<h4>The default values of WordPress</h4>
<p>Following the values that are used in the standard of wordpress which gives an insight into the possibilities for the transfer of the array.</p>
<pre lang="php">
&#039;mode&#039; =&gt; &#039;specific_textareas&#039;
&#039;editor_selector&#039; =&gt; &#039;theEditor&#039;
&#039;width&#039; =&gt; &#039;100%&#039;
&#039;theme&#039; =&gt; &#039;advanced&#039;
&#039;skin&#039; =&gt; &#039;wp_theme&#039;
&#039;theme_advanced_buttons1&#039; =&gt; &#039;bold,italic,strikethrough,|,bullist,numlist,blockquote,|,justifyleft,justifycenter,justifyright,|,link,unlink,wp_more,|,spellchecker,fullscreen,wp_adv&#039;
&#039;theme_advanced_buttons2&#039; =&gt; &#039;formatselect,underline,justifyfull,forecolor,|,pastetext,pasteword,removeformat,|,media,charmap,|,outdent,indent,|,undo,redo,wp_help&#039;
&#039;theme_advanced_buttons3&#039; =&gt; &#039;&#039;
&#039;theme_advanced_buttons4&#039; =&gt; &#039;&#039;
&#039;language&#039; =&gt; &#039;de&#039;
&#039;spellchecker_languages&#039; =&gt; &#039;English=en,Danish=da,Dutch=nl,Finnish=fi,French=fr,+German=de,Italian=it,Polish=pl,Portuguese=pt,Spanish=es,Swedish=sv&#039;
&#039;theme_advanced_toolbar_location&#039; =&gt; &#039;top&#039;
&#039;theme_advanced_toolbar_align&#039; =&gt; &#039;left&#039;
&#039;theme_advanced_statusbar_location&#039; =&gt; &#039;bottom&#039;
&#039;theme_advanced_resizing&#039; =&gt; true
&#039;theme_advanced_resize_horizontal&#039; =&gt; false
&#039;dialog_type&#039; =&gt; &#039;modal&#039;
&#039;relative_urls&#039; =&gt; false
&#039;remove_script_host&#039; =&gt; false
&#039;convert_urls&#039; =&gt; false
&#039;apply_source_formatting&#039; =&gt; false
&#039;remove_linebreaks&#039; =&gt; true
&#039;gecko_spellcheck&#039; =&gt; true
&#039;entities&#039; =&gt; &#039;38,amp,60,lt,62,gt&#039;
&#039;accessibility_focus&#039; =&gt; true
&#039;tabfocus_elements&#039; =&gt; &#039;major-publishing-actions&#039;
&#039;media_strict&#039; =&gt; false
&#039;paste_remove_styles&#039; =&gt; true
&#039;paste_remove_spans&#039; =&gt; true
&#039;paste_strip_class_attributes&#039; =&gt; &#039;all&#039;
&#039;wpeditimage_disable_captions&#039; =&gt; false
&#039;plugins&#039; =&gt; &#039;safari,inlinepopups,spellchecker,paste,wordpress,media,fullscreen,wpeditimage,wpgallery,tabfocus&#039;
</pre>
<hr /><a href="http://wpplugins.com/plugin/281/snippets" title="More informations about this plugin for WordPress"><img src="http://wpengineer.com/wp-content/themes/wpe-3/images/snippets-125-125.png" height="90" alt="WordPress Snippet Plugin" /></a> <a href="http://xtreme-theme.com"><img src="http://wpengineer.com/wp-content/uploads/feed-banner-2.jpg" alt="Xtreme One WordPress Framework"/></a><br />
&copy; <a href="http://wpengineer.com/">WP Engineer Team</a>, All rights reserved <small>(Digital Fingerprint: WPEngineer-be0254ce2b4972feb4b9cb72034a092d)</small></p>
]]></content:encoded>
			<wfw:commentRss>http://wpengineer.com/1963/customize-wordpress-wysiwyg-editor/feed/</wfw:commentRss>
		<slash:comments>21</slash:comments>
		</item>
	</channel>
</rss>

