Topic on Extension talk:TinyMCE

A gap is created in the editor between the inserted image and the title

10
Summary by DuncanCrane

Partial fix, see comments for detail

Monocero (talkcontribs)

Hi @DuncanCrane


I use the TinyMCE editor on my wiki and I probably noticed a certain mistake.


The created article looks like this, no large spaces:


https://i.imgur.com/gdMJ2pi.png


But in the TinyMCE editor is visible the gap between the image and the created title, example: ==Title==


https://i.imgur.com/nHiwjNA.png


A space is created if the inserted image is in front of this title, example:


inserted image


==Title==


Can you check it and possibly fix this mistake?

86.139.55.197 (talkcontribs)

Hi

Firstly thank you for using this extension. I had a slight problem looking at the second image you uploaded as it says it is no longer available. I'll see if I can recreate the problem but would you also let me know which versions of software are being used in your environment?

Many thanks

Duncan

Monocero (talkcontribs)

At my computer two screens from imgur are displayed correctly. I use MediaWiki 1.32.0 and TinyMCE 0.3 latest version.

DuncanCrane (talkcontribs)

Hi Thank you - I can now also see both images. Looking at these, I wonder how you are stopping the text from wrapping around the picture? The usual approach would be to use the 'none' parameter for horizontal alignment when defining the picture link (in mediawiki source code or in the TinyMCE dialog box). If I do this, the images I insert are displayed correctly in both the wiki page and the TinyMCE editor. If you are not using the 'none' parameter, would you try it and see if that fixes the problem? If you are using the 'none' parameter, would you let me have the wiki source code for this part of the page, including the text before the image and after it? Many thanks - Duncan

Monocero (talkcontribs)

I use the "none" parameter in the code of the inserted photo.

See the code of this page:

LINK

In other articles it is the same.

86.139.55.197 (talkcontribs)

Hi

This is an interesting problem. You are right that the TinyMCE editor isn't displaying the page exactly as it shows when displayed by mediawiki. This is because mediawiki ignores the blank line that you have inserted after the picture and before the title. This blank line is not needed, as the effect of the 'none' parameter is that whatever text follows will be displayed on a new line anyway.

One might have expected that mediawiki would display the blank line you have entered as it would if it there was text on it, but it doesn't. If you remove this blank line you will find that the page displays exactly the same.

The problem is, if Tinymce hides this blank line then you would not know it is there if you wished to edit it. This might lead to strange results. I could replace the blank line with a placeholder character so that it shows up in TinyMCE editor which would allow it to be edited? This approach is used where a new line is used in a line of wiki text, which mediawiki also ignores.

Alternatively, you might just remove the blank line after the picture and then both TinyMCE and mediawiki would display the same? In fact, there is a bug in the current code which in effect does exactly this if you save the page without making any changes?

What do you think?

Duncan

Monocero (talkcontribs)

"This is an interesting problem. You are right that the TinyMCE editor isn't displaying the page exactly as it shows when displayed by mediawiki. This is because mediawiki ignores the blank line that you have inserted after the picture and before the title. This blank line is not needed, as the effect of the 'none' parameter is that whatever text follows will be displayed on a new line anyway".


I understand it. I just like neatness in the code, so I made one space between the texts and codes. I mean it:


https://images89.fotosik.pl/263/416a238560442a26.png


If I did not make space between content then the source would look like this:


https://images90.fotosik.pl/263/b77218aa8a4c015d.png


"The problem is, if Tinymce hides this blank line then you would not know it is there if you wished to edit it. This might lead to strange results. I could replace the blank line with a placeholder character so that it shows up in TinyMCE editor which would allow it to be edited? This approach is used where a new line is used in a line of wiki text, which mediawiki also ignores".


Do you want to check it out? Does this solution make sense? I have no idea, you are a programmer and what do you think about it?


"Alternatively, you might just remove the blank line after the picture and then both TinyMCE and mediawiki would display the same? In fact, there is a bug in the current code which in effect does exactly this if you save the page without making any changes?"


An empty line, I mean "larger space" is created only if this code is added. Look at the screen, I marked it with a red frame.


https://images91.fotosik.pl/263/9932b9a2b13094dc.png


https://images90.fotosik.pl/263/73c66a11cc952c3d.png

86.164.120.53 (talkcontribs)

I did try the placeholder idea. Because both the image and the title are html 'block' structures anything before or after them shows on a new line, so the placeholder would show up on its own line between the two. This doesn't seem to be any better than what happens now.

The 'larger space' you refer to is just how mediawiki displays an empty line between an image and a title. Try adding a second blank line in your wiki markup between the image and the title and see how it is displayed on the page. It looks larger than an empty line because the mediawiki styling for titles and images includes padding around them.

You ask what I think. As a programmer and an author I think that making everything that's in the wiki-markup available to be edited in the TinyMCE editor is the right thing to do, even if it means there is a slight difference between what is shown in the editor and what is eventually displayed on the page. For my users, this is much preferable to having to author pages in wiki markup.

I think, currently, it is not possible to make the empty line you have between the image and title in the wiki markup available to be edited in the TinyMCE editor without the space displaying. As this compromise only affects authors of pages I think it is acceptable. If you feel differently then I suggest you try out VisualEditor instead, although I don't know if this would fix this issue for you.

Thanks again for trying this extension and bringing this to my attention. I'm sorry at this time I don't have a solution for you.

Duncan


Monocero (talkcontribs)

I understand it. All right.

DuncanCrane (talkcontribs)

B.T.W., I've added a patch to the master branch that will stop the bug mentioned in my first response, where TinyMCE removes the blank line between the picture and the title. At least this way your formatting in the wiki markup should be preserved. This patch is waiting for review, but you may want to install it straight away if you are using the TinyMCE editor.

Many thanks

Duncan