Recent Topics

Problems with the WYSIWYG editor

Started by on May 13, 2019 – Contents updated: Jul 08, 2019

May 13, 2019 09:14    

Problems with the WYSIWYG editor

Hi, been using b2evolution for a long time now. Currently on 6.10.8, but the same problems began on 6.10.7. Pretty sure everything was OK prior to the last 2 updates. I'm running the blog on Ubuntu 18.04, was using Apache2 before, but have recently converted to Nginx. I am also using Cloudflare (from mid Dec 2018).

Problem 1

When editing a blog, clicking or right clicking on any inline picture in the editor will shoot me to the top of the article (like pressing the CTRL+HOME key).

Problem 2

When editing articles, I like to click "save & edit", or "preview". One of these actions (or both) will insert an extra blank line (empty paragraph) before and after every image. After several edits, I often have to remove 5+ empty lines before and after every image.

Problem 3

This only happens on my mobile phone. I can't seem to replicate this on my desktop browser (even after I set the width/dimensions to a mobile (e.g. Samsung S5). The first pages load fine, but second pages onwards, pictures are not sized properly (e.g. https://www.snakeoil-os.net/news/folklore/folklore-power-cables-do-not-make-a-difference?page=2). That page fails to work on my mobile (tested with Firefox, Chrome and the mobile built in browser)

Problems 1 and 2 is making it hard for me to create content. And 3 basically killed the mobile experience for my users. Hopefully folks can help me identify if this is a config issue, or a bug in the blogging software.

May 13, 2019 22:50

Problem 1: I can't reproduce this on Mac/Safari. What browser/OS are you using?

Problem 2: I can't reproduce this. Can you make the smallest possible post that exhibits this problem and copy/paste the HTML source it in a codeblock here. I will copy/paste it into b2evo to see if it adds blank lines on that content.

Problem 3: This is not related to the WYSIWYG editor, please make a separate post (and don't forget to mention if and how you modified the original skin and CSS).

May 14, 2019 02:19

@fplanque wrote earlier:

Problem 1: I can't reproduce this on Mac/Safari. What browser/OS are you using?


Windows 10. Tried with Chrome (74.0.3729.131), Opera (58.0.3135.132) and Firefox(66.05).

The blog articles I'm editing are always using page breaks, with a lot of pictures (all inline). The blog is set to "community".

@fplanque wrote earlier:

Problem 2: I can't reproduce this. Can you make the smallest possible post that exhibits this problem and copy/paste the HTML source it in a codeblock here. I will copy/paste it into b2evo to see if it adds blank lines on that content.


I'll see if I can do this later this weekend. As mentioned in the previous post, it's an empty paragraph, when I switch to the markup, the code looks something like:

<p> </p>
<p> </p>
[image:1042]
<p> </p>
<p> </p>

@fplanque wrote earlier:

Problem 3: This is not related to the WYSIWYG editor, please make a separate post (and don't forget to mention if and how you modified the original skin and CSS).


Good point. I'll do that later. (Work hours right now).

Thanks for the quick resonse :).

Edit: I'm assuming nobody else is seeing this?

May 14, 2019 09:23

Seeing and following but not responding as I don't use WYSIWYG

May 27, 2019 09:43

Nobody else have this problem? Was the editor updated in 6.10.8 and 6.10.7? I don't recall having issues #1/#2 with editing articles until this two releases.

Beginning to think #3 is related to the way the editor inserts the picture now as the UI to insert a picture have changed.

Discovered a new issue as well - I couldn't adjust the column widths with the mouse now in the editor. This was something I could do before.

Attached a document I was working on recently. If I do "save & edit" and "preview" over time, every picture will have extra blank lines above and below. Hopefully the devs can use that and test and find out what is wrong. Probably have to replace the picture IDs with the correct ones from here: https://www.snakeoil-os.net/Manual/clients/how-to-play-mpd

Thanks in advance.


Attachments:

May 27, 2019 14:57

every picture will have extra blank lines above and below.

<p>This will launch a new browser tab like so:</p>
[image:169:]
<h3>ympd - Database Scan</h3>

Yes you will get a line above and below if you use the paragraph and headings tags, so either don't use them or use css to remove the margins above and below.

May 28, 2019 01:58

@amoun wrote earlier:

&gt; every picture will have extra blank lines above and below.


&gt; &lt;p&gt;This will launch a new browser tab like so:&lt;/p&gt;
[image:169:]
&lt;h3&gt;ympd - Database Scan&lt;/h3&gt;


Yes you will get a line above and below if you use the paragraph and headings tags, so either don't use them or use css to remove the margins above and below.


What I'm trying to say is the extra lines. The text started like so:

<p>This will launch a new browser tab like so:</p>
[image:169:]
<h3>ympd - Database Scan</h3>

When I do a save, the content may be altered into:

<p>This will launch a new browser tab like so:</p>
<p> </p>
[image:169:]
<p> </p>
<h3>ympd - Database Scan</h3>

Doesn't happen everytime, but if I do several previews, saves, and "saves and edits", the article will morph into :

<p>This will launch a new browser tab like so:</p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
[image:169:]
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<h3>ympd - Database Scan</h3>

It's kind of a hassle if the article have tons of pictures. Past few months I simply switch into code view, cut and paste the whole thing, and remove all the blank lines in another editor. Cut and paste back, save and check that save don't add one extra blank line top and bottom. If it does, I will re-paste and save again until it's correct.

Unsure why TinyMCE (or something else) will add those extra blank lines.

May 29, 2019 13:51

@agent_kith We cannot reproduce your Problem #2. Please try disabling all your renderer plugins and re-enable them one by one to find which one potentially does this.

May 29, 2019 16:24

@agent_kith
I recall a similar issue, probably with the WYSIWYG many years ago, hence my reluctance to use it. I like to insert my own html tags.

I wonder if you have the Auto P plugin enabled and that takes a liking to your key strokes when you press ENTER

May 30, 2019 02:35

@fplanque wrote earlier:

@agent_kith We cannot reproduce your Problem #2. Please try disabling all your renderer plugins and re-enable them one by one to find which one potentially does this.


Holy. That appears to fix #1 and #2 so far. :)

@amoun wrote earlier:

@agent_kith
I recall a similar issue, probably with the WYSIWYG many years ago, hence my reluctance to use it. I like to insert my own html tags.


I wonder if you have the Auto P plugin enabled and that takes a liking to your key strokes when you press ENTER


I believe so. Funny thing is, if I disable "Auto P", and reable it again, don't get the same issue. I did around 10 "saves and edits" and it's all working as expected. Best thing is I can now work on images again without being bumped to the top fo the page.

Thanks guys!:)

May 30, 2019 15:32

@agent_kith so you mean you disabled all plugins and then reenabled them ALL the same as before and the issue is gone?

Is there no single plugin that you can isolate as the culprit?

May 31, 2019 02:17

@fplanque wrote earlier:

@agent_kith so you mean you disabled all plugins and then reenabled them ALL the same as before and the issue is gone?


Is there no single plugin that you can isolate as the culprit?


I only disabled AutoP. The two issues went away. Then I reneabled the plugin. Clicking on any image sending me back to the top of the editor is confirmed gone.

As for the extra lines, so far havn't been seeing it yet. Pretty sure this is gone as well.

Seems obvious on hindsight the extra

<p> </>


tags are caused by a plugin called "Auto P". Not obvious so far is why #1 happened, and how this fixed it, and why renabling it doesn't add those extra p tags back.

Just happy things are working again.


Form is loading...

CMS + email marketing – This forum is powered by b2evolution CMS, a complete engine for your website.