Text editor looks all jumbled up

Beaver Builder
1

Whenever I use the text editor module the text in the editor is spaced all sporadically and looks like a mess. The output looks fine and so does the code but in the text tab its all messed up.

2

Looks as if it has been solved. I copy and pasted some text from a web page and that is what caused it. If I type it from scratch the problem does not occur. I thought it was weird because the html looked just fine. An h1 and a p tag was all that was in there.

3

Hi Hector,

It sounds as though you may have copied the text from a web page that was being displayed in Internet Explorer. Doing so will give one all sorts of grief, woe and misery :slight_smile:

Mind you, you say the HTML looked fine, which is definitely not the case when you paste from IE.

Cheers!
Lyle

4

Im running chrome. Have not used IE in ages lol. Not sure how it happened. But now I have another (minor) issue that I noticed.

In the text editor everything is fine and dandy. I have a heading tag and a line or two of text wrapped in p tags. It saves just fine and looks great.

But now when I close the text editor, admire my work and go back in to make adjustments everything wrapped in the heading tags does not show up, just blank space and I cannot make changes to anything in the heading tags unless I go into the html (which is no big deal).

Just noticing little things that may throw off the cake decorators / non coders and get BB flamed.

Anyway I freakin LOVE this plugin so far!

5

Hey Hector,

Glad you’re liking the plugin! The issue you are experiencing may be caused by the styling you have on your heading tags? If it has a white font color then it won’t show since the text editor’s background is white as well. That’s the only thing I can think of causing the issue.

Ben

6

Ben,

Is there a fix for this when you have a white font? My client’s are confused when they go to edit and they can’t see the content in the text editor because it blends in. This is not very productive when you have a lot of text you need to edit and you can’t see it unless you highlight it! Can this be fixed?

7

Hey Michelle,

We can actually add a custom stylesheet for the TinyMCE editor then force all the texts inside it to be black. First, you need to create the stylesheet, preferably on your child theme. The filename doesn’t matter, so long as it’s a .css file. This is where we store our custom styling. For your case, you can add the CSS below inside the stylesheet.

#tinymce p, 
#tinymce p span {
  color: black !important;
}

Save the file. Add the following code to your functions.php file(child theme). This adds the stylesheet we have above to the TinyMCE.

function my_editor_style( $stylesheets ) {   
  if ( FLBuilderModel::is_builder_active() ) {
    $stylesheets .= ! empty( $stylesheets ) ? ',' : '';
    $stylesheets .= get_stylesheet_directory_uri() . '/stylesheet.css';
  }
  return $stylesheets;
}
add_filter('mce_css', 'my_editor_style');

Just replace stylesheet.css with the filename that you have.

Let us know how it goes!

Ben