I’ve been using the WYMEditor on a little content management system I’ve been building at work. I was having a problem where I couldn’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
label for the textarea that turns into the WYMEditor. There are two ways to use
label. One is to tie the element to a form element via
element-id is the
id of the form element. The other is to simply encapsulate the form element inside the
label. I was doing the latter since I had written CSS to display forms.
labels focus the corresponding element when clicked (or when elements inside them are clicked). If you click the element directly, the focus doesn’t change. What I was failing to realize was that WYMEditor was putting the replacement / overlay inside the
label. The visual editor itself uses an
iframe, which overrides the
label. The HTML Editor portion uses another
textarea. In FireFox, when I clicked the
textarea to edit, the focus would shift to the hidden (and first in the code)
The solution was to use the
for method instead of the encapsulation method for WYMEditors and modify my CSS.