I’m going to spend some time experimenting with TinyMCE in WordPress. It seems to cause a lot of confusion, depending on who you talk to, and I’ve honestly never used it enough to have that great of an opinion.
Most of my blog posts are written in the HTML view, because I like to structure my paragraphs with paragraph tags. I’m always confused when I try out the Visual editor and switch to the HTML view, because it seems that the paragraph tags are missing.
That aside, I’m going to save a draft of this post right now and see what the HTML looks like when I view source on the preview.
…and I’m back. Really, that’s exactly what I expected to happen. The three paragraphs I had already written are all correctly surrounded by paragraph tags. I even flipped back and forth between the Visual and HTML editors and saved a draft in each view. Nothing appeared to change.
It does seem that things really start getting funk when something more than paragraphs is inserted into a document. For that reason, I’m going to insert a picture. For this picture, I’ll be inserting it after hitting enter, so I’ll assume this paragraph is closed correctly.
Ok. That picture has been inserted as a medium image, centered. My cursor was immediately brought to a new line upon inserting the image, and Path shows as p in the bottom left, so I’m guessing that I’m still good. I’m going to save a draft here and find out.
I remain pleasantly surprised. The image was inserted properly inside a new paragraph tag. The text below the image is still part of the same paragraph tag and the spacing is controlled by the margin-bottom property of the img element. While writing an HTML document from scratch, I may have put the image in its own paragraph element, but this is definitely a good way to do it.
Of course now I’ll test inserting an image while in the middle of a paragraph. How about here.
Here’s where things got confusing. As soon as the image was inserted, a large cursor showed up on the right side, as high as the image itself. Hitting enter a couple of times did nothing – the cursor stayed right where it was. Just starting to type is what actually moved the text down to what appears to be a new paragraph. I’m going to save a draft here and find out what happened.
Ok, so technically we’re good. (And I just used the bold option for the first time by hitting ctrl-b.) When I saved the draft and looked at the source, I can see that paragraph elements surround the entire section from “Of course now” down to the end of the last paragraph. The image is cleanly inserted in the middle and the spacing is controlled by margins.
The only real confusing thing that happened is due to me trying to hit enter after inserting the image. The source showed to paragraphs inserted with a non-breaking space entity inside – i.e. two blank lines. These two blank lines caused a bunch of empty white space to appear at the bottom of my post.
To remove those smoothly, I’ve used the down arrow to go to the last 2 paragraphs here instead of hitting enter again. In fact, I imagine you could always test for those blank paragraphs by just hitting the down arrow. If there’s a space below, there’s an empty paragraph.
Ok. Another test with an image. I’m going to click in the paragraph above, right before the text ‘these two blank lines’, and insert a small thumbnail that I’m going to try to align to the right side. After that I’m going to save a draft and see what it looks like in the source.
That also worked beautifully. I even found some more options that I wasn’t aware of by editing the image through the visual editor. I was able to view it fine as a right aligned thumbnail amongst the text, then edit it to be a 120px left aligned thumbnail, then edit it again to go back to right aligned and 150px. With each edit, I saved the draft and checked the HTML source – no weirdness. I’m starting to doubt my doubts about TinyMCE…
Woah! There we go. First weirdness of the night. I attempted to drag the image around, just to see what would happen. Definitely meant to go at the beginning or end of a sentence, as a new paragraph is created when you drop the image down. A couple of drag and drops later and my sentence was way out of whack. It all kind of made sense in the end, but it was still weird.
To fix, I dragged the image to a good place – at the beginning of a sentence – and then maneuvered my cursor through the crazy looking section to see where all the paragraphs were created. I deleted each extra line and things are back to normal.
Hrm. Time to play with lists. Let’s start an unordered list here without creating a new paragraph.
- Well that’s interesting. It automatically made the line I was on the first item in the unordered list. What do I do if that’s not what I wanted?
- I put my cursor back in front of ‘Hrm’ and hit backspace. It not only deleted the beginning of the unordered list, but brought Hrm all the way back to the end of the last paragraph. The list item above stayed the same.
- I hit enter again and the Hrm paragraph was created while the list remained ok. Good enough for me.
- Now how do I end the list?
I tried a couple of things, but quickly found that hitting enter twice made a new paragraph appear. I’m going to view the source to make sure I’m not crazy.
Ahh… here’s the part that makes someone crazy. I’ve somehow ended the unordered list, which itself is not contained in a paragraph, gone down to a new line that appears to be a paragraph, but is in reality a div element. This means any formatting I have defined with my CSS won’t appear for this large block of text. You can hardly tell that I have a line break in here as well.
Well that’s interesting too. I went back to the beginning of the ‘I tried a couple’ paragraph, hit the drop down arrow next to Format, and selected Paragraph. This automatically formatted that section of text inside paragraph elements, but kept the ‘Ahh…’ paragraph in its own div element. It must have detected the line break and acted accordingly.
Now that I have 3 paragraphs in this one div element, separated by line breaks, I’m going to go back to the beginning of each line and change the formatting. With a few clicks, these should all be paragraphs again.
The TinyMCE world is starting to make sense. I can kind of live with that behavior. It seems like the biggest thing is paying attention to what the current Path is in the bottom left hand corner of the window.
In fact, the only real confusing issue I ran into during this exercise was when using the unordered list. If there was a way to automatically format the resulting new line as a paragraph once the list ended, that would be ideal. I did notice that if you uncheck the unordered list option, it will automatically bring the last list item down to a new, correctly formatted, paragraph. This may also be unexpected behavior at first, but may quickly become learned behavior instead.
That’s all I have for TinyMCE. Maybe I’ll play around with the advanced plugin next and see what quirks I can find. Maybe I’ll even dive into the code and see if I can help define the behavior on the lists… you never know.