<?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>Robertdot, A Web Design Blog &#187; WYSIWYM</title>
	<atom:link href="http://robertdot.org/tags/wysiwym/feed/" rel="self" type="application/rss+xml" />
	<link>http://robertdot.org</link>
	<description>A web design blog for designers that develop or developers that design.</description>
	<lastBuildDate>Fri, 05 Mar 2010 15:59:57 +0000</lastBuildDate>
	<generator>http://wordpress.org/?v=2.8</generator>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<item>
		<title>WYMEditor HTML Textarea Loses Focus</title>
		<link>http://robertdot.org/2008/01/24/wymeditor-html-textarea-loses-focus/</link>
		<comments>http://robertdot.org/2008/01/24/wymeditor-html-textarea-loses-focus/#comments</comments>
		<pubDate>Thu, 24 Jan 2008 18:59:21 +0000</pubDate>
		<dc:creator>Robert</dc:creator>
				<category><![CDATA[Web Design]]></category>
		<category><![CDATA[Web Development]]></category>
		<category><![CDATA[HTML]]></category>
		<category><![CDATA[WYMEditor]]></category>
		<category><![CDATA[WYSIWYM]]></category>

		<guid isPermaLink="false">http://robertdot.org/2008/01/24/wymeditor-html-textarea-loses-focus/</guid>
		<description><![CDATA[
 I&#8217;ve been using the WYMEditor on a little content management system I&#8217;ve been building at work.  I was having a problem where I couldn&#8217;t edit in the HTML editor.  Every time I clicked, the HTML textarea in WYMEditor would lose focus.


 It turns out the problem was the way I used my [...]]]></description>
			<content:encoded><![CDATA[<p>
 I&#8217;ve been using the WYMEditor on a little content management system I&#8217;ve been building at work.  I was having a problem where I couldn&#8217;t edit in the <abbr title="HyperText Markup Language">HTML</abbr > editor.  Every time I clicked, the HTML textarea in WYMEditor would lose focus.
</p>
<p>
 It turns out the problem was the way I used my <code>label</code> for the textarea that turns into the WYMEditor.  There are two ways to use <code>label</code>.  One is to tie the element to a form element via <code>for="element-id"</code> where <code>element-id</code> is the <code>id</code> of the form element.  The other is to simply encapsulate the form element inside the <code>label</code>.  I was doing the latter since I had written <acronym title="Cascading Style Sheets">CSS</acronym> to display forms.
</p>
<p>
 <code>label</code>s focus the corresponding element when clicked (or when elements inside them are clicked).  If you click the element directly, the focus doesn&#8217;t change.  What I was failing to realize was that WYMEditor was putting the replacement / overlay inside the <code>label</code>.  The visual editor itself uses an <code>iframe</code>, which overrides the <code>label</code>.  The HTML Editor portion uses another <code>textarea</code>.  In FireFox, when I clicked the <code>textarea</code> to edit, the focus would shift to the hidden (and first in the code) <code>textarea</code>.
</p>
<p>
 The solution was to use the <code>for</code> method instead of the encapsulation method for WYMEditors and modify my CSS.</p>
]]></content:encoded>
			<wfw:commentRss>http://robertdot.org/2008/01/24/wymeditor-html-textarea-loses-focus/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>
