Pre-formatted text in the Visual Editor is not behaving like I’m used to. I’ve got an old installation (3.2.1), and when create pre-formatted text, all the line-breaks and spacing is preserved. In the latest version (3.3.1), the line breaks are interpreted as new paragraphs, and the code is broken across those paragraphs, leading spaces removed.
Process:
- Copy code from text editor.
- Click on the “New Post” link.
- Choose “Preformatted” from the format menu.
- Paste (ctrl-v).
3.2.1 – Correctly formatted code
3.3.1 – Incorrectly formatted code
I know I can switch to code view and put tags in myself, but I’m not looking for a workaround.
When you paste your code, TinyMCE (the visual editor) automatically switches back to paragraph mode because that’s the default for the editor. You have to highlight you pasted code and re-select “preformatted” to get it to be tagged correctly.
Also, TinyMCE always closes tags when you press enter. If you want to go to a new line without closing a tag, press shift + enter instead.
I didn’t have any luck with changing format to/from/back-to “preformatted” after pasting the text. What does work for me (on windows in firefox) is pasting the text with Ctrl-Shift-V rather than Ctrl-V. Now my leading code-indentation spaces are preserved after pasting text. I haven’t tried this in other browsers.
My personal solution is to paste the code firstly into MS.Word where it keeps the format/indents as well, then mark & copy them, paste then to WordPress, afterwards mark them and change to preformatted.
This works for me with macOS & Firefox.