Wordpress visual editor not making line breaks - html

This should be very simple, i can not believe that a company the size of Wordpress cannot provide users a very simple way to make line breaks.
I know how to use the text tab and code the page using html (im a developer). However my clients have absolutely no idea what html is so they obviously can not use it.
All the client wants to do is make a "space between lines" , in our terms a break line. They only want to use the visual editor.
Now when they start typing and hit enter, it creates & nbsp; or closes a paragraph tag.
Many articles are saying that shift + enter will make one, however this 100% does not as ive tried.
Ive tried a plugin that most articles are suggesting called "tinymce advanced". But this does not resolve the problem.
Is there any way possible for a normal user with no html knowledge to only use the visual editor and create br lines without actually using code?

Holding down Shift+Enter definitely works.
Alternatively, you can always prevent Wordpress from automatically adding <p> tags to the markup using the following code inside of your theme's functions.php file:
remove_filter('the_content', 'wpautop');

I had this problem on my site, it began when I updated the theme, which had not been updated for years.
The "miraculous" solution was to update
all the plugins as well.
I have realized that the
<br / > and the < p >
symbols are not present in the wp editor in text mode
So there must be a conversion between \n (newline) and <br / > and < p > taking place, I have not investigated this further, but maybe somebody can explain how WordPress is working.

With the WordPress upgrade to version 3.2, the text editor seems to remove the line break by itself.
Add a filter in the functions.php file which adds a clear attribute to the <br/> tag. When the attribute is added, the <br/> tag is not removed by WordPress.
function clear_br($content){
return str_replace("<br/>","<br clear='none'/>", $content);
}
add_filter('the_content','clear_br');
Then apply this filter on a variable where you need break should come in that text content
$specification = apply_filters( 'the_content', $specification );
For more info: https://blog.templatetoaster.com/wordpress-line-break-not-working/

This small code fixed my issue.
echo nl2br(category_description( the_content);
Just replace the content tag with this in you file

Related

How to force closing HTML tags on a new line?

In VS Code, I use Beautify extensively. But it unnerves me that closing tags always wrap on the same line as "floating" text, or self-closing tags. For instance, before Beautify :
<div class="wrap">
<img src="/wp-content/uploads/2018/08/image.png">
</div>
<div class="wrap">This is just some text
<strong>but it needs to be emphasized</strong>! And then some...
</div>
And after Beautify :
<div class="wrap">
<img src="/wp-content/uploads/2018/08/image.png"> </div>
<div class="wrap">This is just some text
<strong>but it needs to be emphasized</strong>! And then some... </div>
Is there a setting, or another extension that could help get the code closer to what it looks like in the first example, or am I just doing things wrong ?
It doesn't matter much most of the time, other than being a bit ugly to my taste, but yesterday I saw that it actually created problems with Wordpress, I just can't use Beautify anymore, it risks breaking the formatting.
There isn't an option to force the end tags to new lines.
One setting that helps is preserve_newlines. Enabling that should keep your tags from getting pulled back to the same line if you have them on their own line.
Version 1.8.1 of js-beautify (the library underlying Beautify for VSCode) improves the behavior in this area, but still doesn't have an option to force the end tags to new lines.
Several issues have been filed around this, including #1468 and #1413. PRs are always welcome.
I do not know about that. If you want a similar result to the top bit of code you could use Glitch.Com, Made by the people who made stackoverflow. Glitch hosts your website (website.glitch.com) and has a nice editor, Not to mention project rewind if you want to revert to a previous version.. You have light and Dark theme too.. It automatically closes tags like this
<h1>
</h1>
I think it is perfect compared to any other editor, You can have multiple files too.. no download required. Auto saving and perfect for any developer :3

p:textEditor <br> line separator instead of <p>

I am using JSF (PrimeFaces) tag p:textEditor for my forum. This tag use Quill rich text editor. Default behavior is wrapping every line in blocks (wraping in paragraphs tags p /p):
<p>line1</p>
<p>line2</p> ....
And it does not looks nice, because of output too much spaces between lines.
Instead, I need to get like this (use tag br/ between lines):
<br/> line1
<br/>line2 .....
For example, PrimeFaces extension has tag pe:ckEditor, that use ckEditor (rich text editor). And I can change its behavior just adding "config.enterMode = CKEDITOR.ENTER_BR;" in config.js file.
Is there in p:textEditor and its Quill (rich text editor) same ability or some another way that can fix my problem?
I was looking into feedback of Quills owner -
https://github.com/quilljs/quill/issues/1074 . And I checked all new versions after this feedback.
So yet Quill does not has this ability. The owner suggests to use css-style for fixing this behaviour (adjust paddings). Yes, it can resolve a problem of big spaces, but:
1) this way is not so comfortable;
2) this way is not suitable for forums quotations, because separate every line in own quote.
Here the problem is discussed and here is some js approach to fix it. But I am not going to use it because I use Quill built in JSF library. So I switch to pe:ckEditor and ckEditor rich text editor

Is it at all possible to display HTML code in Wordpress?

I have tried countless plugins, codyfying HTML with escape keys, and my blood is beginning to boil. Switching between Visual and HTML mode is actually changing my content, ie destroying it!!!
OK, i figured out what to do.
First go into visual mode.
Select Preformatted in the formatting drop down. A little grey box is created.
Inside the grey box, copy and paste your raw HTML.
Save it and switch from visual to HTML views a few times. There should be no mangling.
IT IS ABSOLUTELY CRUCIAL that you paste into visual tab, instead of in the text tab, or it will get stuffed up completely (very unintuitive. You would think it would work the other way araound).
Wordpress does a strange thing where if you switch between visual and "text" mode (HTML mode was renamed in 3.5 update) it strips any tags that appear empty which often times may not be. This might be what you are experiencing if I am understanding the problem correctly.
If you are just trying to display code on your website you should be able to wrap the code like this:
<code><p>Example code post</p></code>
This is laid out in these guidelines here: http://codex.wordpress.org/Writing_Code_in_Your_Posts
If it is a block of code that needs to not wrap you could also use the "pre" tag like so:
<pre><code><p>Example code post</p></code></pre>
This is described very well here: <code> vs <pre> vs <samp> for inline and block code snippets
Yes, it is absolutely possible. You can follow any of the above mentioned methods. I prefer the following way.
First of all, decode the HTML code using online html decoder. You can find any on google. Then, You can paste the decoded code on your post. The benefit of this method is that, your indentation won't be lost.
Decoded Code
Rendered View File
Hope, it helps future reader to find a way.
Wordpress is very buggy. It took me a long time to finally succeed. For my Wordpress.org installed on my pc I tried: go to visual mode, add pre-formatted text block, copy/paste decoded or encoded. I tried :
<pre><code><p>Example code post</p></code></pre>
That did not work.
The only way it works for me is:
Go to visual, instead of adding a pre-formatted text block I create a paragraph text block, copy/paste the encoded HTMl and then convert it to preformat.
Hope that helps.
Perhaps, You should try out this plugin
http://wordpress.org/extend/plugins/insert-html-snippet/
Hope this helps!
One way to do is to make the code commented. Something like,
<!--div>
<md-divider class="org__meta-divider md-soc-theme"></md-divider>
<h4 class="org__meta-heading">Technologies</h4>
<ul layout="" layout-wrap="" class="org__tag-container layout-wrap layout-row">
<li class="organization__tag organization__tag--technology">web services</li>
</ul>
</div-->
instead of
<div>
<md-divider class="org__meta-divider md-soc-theme"></md-divider>
<h4 class="org__meta-heading">Technologies</h4>
<ul layout="" layout-wrap="" class="org__tag-container layout-wrap layout-row">
<li class="organization__tag organization__tag--technology">web services</li>
</ul>
</div>

Preventing wp from removing br and p tags

Is there a way to prevent WP from removing br and p tags from posts or pages ?
so far I've added remove_filter('the_content', 'wpautop'); to my functions.php file which completely disables formatting.
However when i edit a post or page, and in the HTML editor add br or p tags then switch back to visual mod the br/p tags that i added get removed.
Is there a way to prevent this ?
It is not really a solution but a workaround: write your <p> tags like this:
<p dir="ltr">something</p>
This way they are preserved when switching from editors. You can apply this to any text tag. Here you can read about the dir attribute: http://www.w3.org/TR/html401/struct/dirlang.html
I have noticed that if you try to do the same with <br> tags, when you swicht editors WP has replaced <br> with a . To prevent that, br tags can be written like this:
<br class="blank" />
I am also looking for a definitive solution for this issue and it seems there is none yet, not even with the new Wordpress 3.6 release. Please if anyone knows a better solution I'll be so glad!
Try the below code, in your functions.php,
function stop_removing_tags(){
remove_filter('the_content', 'wpautop');
}
add_action('init', 'stop_removing_tags');
Code Not Tested ...

Containing markup INSIDE data

Yes, I am struggling with displaying data from our database that CONTAINS markup! One particular field I am displaying has an open-bold tag but no close bold tag. I am trying to 'contain' this markup so it doesn't affect the rest of the page.
The data coming from my database is like this text:
this is soem nasty <b>data
(note the lack of a closing < /b > tag)
If I enclose the markup in a div, the rest of the page is bold:
<div>this is some nasty <b>data</div>
However if I wrap it in a table like this:
<table><tr><td>this is some nasty <b>data</td></tr></table>
All is well! In fact, the DOM inspector for both FF (FireBug) and IE9 show the tree. In the div-case, it shows the open-b tag and the rest of the document contained within it. But the table seems to enclose it.
How can I get this to 'close the b' without a table?
You use a closing </b> tag properly, like any sane human being.
You can use DOMDocument and tidy to try and fix the malformed markup in case you have no control over it, but it's best if you could fix it before it got to your database.
I've read somewhere that HTML Purifier should be able to achieve this. Might be worth trying.
I took a cue from HTML rich-text editors like TinyMCE and built up an IFrame. It seems to contain the arbitrary, possibly-mal-formed content better.