Tag: wp_editor

Autoresize for wp_editor (the TinyMCE editor) in WordPress 4.0+

A lovely feature finding its way into the default post editor for WordPress is autoresizing. This means that you no longer have to scroll up and down inside the editor, it will expand to fit your content automatically removing the scrollbars. It is even better now that the toolbar will always stay in view.

If you are using wp_editor to create custom editing instances, you can take advantage of this feature too. Previously I was using an autoresize plugin for TinyMCE but now it is as simple as passing in a setting.

[codeshower ui_state=”” language=”php” code=”wp_editor(%20%0A%20%20%20%20”%2C%20%2F%2F%20content%0A%20%20%20%20’yourcustomeditorid’%2C%20%2F%2F%20a%20unique%20id%20in%20lowercase%20letters%0A%20%20%20%20array(%0A%20%20%20%20%20%20%20%20’tinymce’%20%3D%3E%20array(%0A%09%09’resize’%20%3D%3E%20false%2C%20%2F%2F%20disables%20the%20ability%20to%20resize%20the%20editor%20with%20the%20mouse%0A%09%09’wp_autoresize_on’%20%3D%3E%20true%20%2F%2F%20editor%20expands%20to%20fit%20content%0A%20%20%20%20)%20%2F%2F%20settings%20array%0A)%3B” linenumber=””]

A quick & dirty fix for the devious appearance of nbsp; (non-breaking spaces) in TinyMce editor

Sometimes when pasting content into WordPress’ native tinymce editor, non-breaking space characters appear in the output where there should be spaces. You can verify this is this issue by inspecting the source code in your browser’s dev tools. As a result text may break outside of its container and give a disastrous look. When troubleshooting this, you look at the editor in Text or Visual mode there appear to be just normal spaces. Strange.

My first instinct is to see if there are any content filters going on at the front-end. A common instigator for markup issues can be wp_autop() or some other filtering function. This was not the case though.

So I decided to correct the problem at the source, since the issue was happening with pasted text inside the tinymce editor.

It goes like this:

1) open up dev tools in your browser (control + shift + i for Chrome on Windows)

2) go to the console tab

3) Here you can enter commands. We are going to run some manual lines of jQuery/js . Make sure you have the visual mode enabled.

var contents = jQuery('#content_ifr').contents().find('#tinymce').html();

This stores the content that tinyMCE is working with in a variable.

var filtered = contents.replace(/ /g, ' ');

This filters that content and replaces non-breaking spaces with normal spaces. Note that this also gets rid of deliberate/manual instances of non-breaking spaces. If you need to preserve these, you’ll need more complex code or you’ll need to reapply them manually.

jQuery('#content_ifr').contents().find('#tinymce').html(filtered);

This replaces the tinyMCE window with the filtered content.

4) Update the post. Check on the front-end. And now your text should look proper.