How can I stop that span tags being added automatically?

How can I stop that span tags being added automatically?

de Hartmut Scherer -
Número de respuestas: 19

Hi Mary and others,

We are using Aardvark-Makeover in Moodle 2.2+ (Build: 20111223). Once in a while when I write something in the HTML editor, everything looks normal, but when I save it, I am surprised to see parts of the text with a different font size. Here is one example in which the highlighted part was added automatically.

<p><strong>Recommended Hardware/Software</strong></p>
<ul>
<li><span style="font-size: 13px; line-height: 1.231;">A presentation program; . . .</span></li>
</ul>

The span tag looks like the element.style in Aardvark-Makeover.
element.style {
font-size: 13px;
line-height: 1.231;
}

What causes the additional span tag? How can I stop this behavior?

With kind regards,
Hartmut

Promedio de valoraciones: -
En respuesta a Hartmut Scherer

Re: How can I stop that span tags being added automatically?

de Mary Evans -
Imagen de Core developers Imagen de Documentation writers Imagen de Peer reviewers Imagen de Plugin developers Imagen de Testers

If you change any text in the TinyMCE Editor in Moodle, you will find that it adds these as inline style that will show up in Firebug as element.style {...}.

There is no CSS with that rule in Aardvark Makeover.

Mary

Promedio de valoraciones: -
En respuesta a Mary Evans

Re: How can I stop that span tags being added automatically?

de Hartmut Scherer -

Hi Mary,

Thank you for your fast reply. Although I cannot stop this behavior, I am glad to know that it is not theme related. 

With kind regards,

Hartmut

Promedio de valoraciones: -
En respuesta a Hartmut Scherer

Re: How can I stop that span tags being added automatically?

de Sam Thing -

Just to add my two cents....You can't get a machine to make code properly, you have to get a human to do it if you want it done right.

Promedio de valoraciones: -
En respuesta a Sam Thing

Re: How can I stop that span tags being added automatically?

de José Miguel Andonegi -
Hello: Could you post an example of the original HTML? If you are using font tags (deprecated), tinymce changes them to span. You could configure tiny to stop doing it (not recommended)
Promedio de valoraciones: -
En respuesta a José Miguel Andonegi

Re: How can I stop that span tags being added automatically?

de Hartmut Scherer -

Hi José,

Thank you for your reply. This is my original text after saving it.

original text

Then, I edited this text, changed the ordered list and saved it. This is what I will see after saving:

Text with additional span tags

<p>Test with span styles</p>
<ul>
<li>What do you see?</li>
</ul>
<p>How can I solve this problem?</p>
<ol>
<li><span style="font-size: 13px; line-height: 1.231;">Now I will try again.</span></li>
</ol>
<p><span style="font-size: 13px; line-height: 1.231;">Is there any change in the text?</span></p>
<p>Save and have a look.</p>

I did not add the span style and I would appreciate any help how to stop this. 

With kind regards,

Hartmut

Promedio de valoraciones: -
En respuesta a Hartmut Scherer

Re: How can I stop that span tags being added automatically?

de Mary Evans -
Imagen de Core developers Imagen de Documentation writers Imagen de Peer reviewers Imagen de Plugin developers Imagen de Testers

Can you test something out for me with that Aardvark Makeover theme?

Try settings a glossary to 'link words automatically'.

I had a problem with it adding <a></a> tags everywhere in the site topic.

There is some code in the profileblock that I removed and the problem stopped.

If the problem you are having is not happening in other themes, then is more than likely the Makeover theme, and probably stems from the profileblock. triste

You could test it by removing  <?php include('profileblock.php')?> from the layout files.

Cheers

Mary

Mary

Promedio de valoraciones: -
En respuesta a Mary Evans

Re: How can I stop that span tags being added automatically?

de Hartmut Scherer -

Hi Mary,

I switched to Formal White and tried out a similar text. When I added the bullet (ul) and the number (ol), the span style was already added even before I saved the text.

<p>Test with span styles</p>
<ul>
<li><span style="font-size: 13px; line-height: 1.231;">What do you see?</span></li>
</ul>
<p>How can I solve this problem?</p>
<ol>
<li><span style="font-size: 13px; line-height: 1.231;">Now I will try again.</span></li>
</ol>
<p>Is there any change in the text?</p>
<p>Save and have a look.</p>

 

This means that the added style is not theme specific. When I inspected the text in Google Chrome (while still using Formal White), I found some code in  public_html/lib/yui/3.4.1/build/cssfonts/cssfonts-min.css

body{font:13px/1.231 arial,helvetica,clean,sans-serif;*font-size:small;*font:x-small}select,input,button,textarea{font:99% arial,helvetica,clean,sans-serif}table{font-size:inherit;font:100%}pre,code,kbd,samp,tt{font-family:monospace;*font-size:108%;line-height:100%}

I will also reply to José (see below) and add a syllabus where I found many span styles. Thanks for all considerations.

With kind regards,

Hartmut

 

 

Promedio de valoraciones: -
En respuesta a Hartmut Scherer

Re: How can I stop that span tags being added automatically?

de José Miguel Andonegi -
Hi Harmut: Could you post the original html? I would lime to be sore about the use of font tag
Promedio de valoraciones: -
En respuesta a José Miguel Andonegi

Re: How can I stop that span tags being added automatically?

de Hartmut Scherer -

Hi José,

I attached the html file. Here are 3 screenshots.

screenshot #1

 

screenshot #2

screenshot #3

Thank you for all considerations.

With kind regards,

Hartmut

-------

I just tried to see whether the span style is added in this forum as well. I wrote testing, clicked on numbered list and saw the span style added.

  1. testing

<ol>
<li><span style="font-size: 13px; line-height: 1.385;">testing</span></li>
</ol>

 

Promedio de valoraciones: -
En respuesta a Hartmut Scherer

Re: How can I stop that span tags being added automatically?

de Mauno Korpelainen -
  1. Testing

No spans added...

Editor (TinyMCE) adds this kind of span tags with style attribute ONLY when you add/change font families, font sizes... or otherwise use <font...>...</font> tags - or copy & paste html from other applications that have styled text.

Using <span style="font-size: 13px;">testing</span> is the correct and valid way to set font of word testing to 13px in HTML - old <font> tags have been deprecated a long time ago in (X)HTML4 and they are not supported in HTML5, see for example http://www.w3schools.com/tags/tag_font.asp

You can set TinyMCE to not convert font elements to span elements if you edit the editor configuration (lib/editor/tinymce/lib.php) - see http://www.tinymce.com/wiki.php/Configuration:convert_fonts_to_spans - but you really should not use old depracated html tags because future versions of browsers may stop supporting them.

If you want to clean styles from pasted html you can paste it first to some simple text editor like Notepad and copy & paste again to moodle or use buttons like "Paste as plain text" and "Paste from Word"...

 

Promedio de valoraciones: -
En respuesta a Mauno Korpelainen

Re: How can I stop that span tags being added automatically?

de José Miguel Andonegi -

Hi Hartmut:

I agree with Mauno.

Just some test:

  1. test
  1. test modified but no style

May be the original text was created in Moodle 19, with the old WYSWYG editor.

Regards!

Promedio de valoraciones: -
En respuesta a José Miguel Andonegi

Re: How can I stop that span tags being added automatically?

de Hartmut Scherer -

Hi Mauno and José

Thank you for your patience and for your detailed explanation. I still need more time to understand depreciated tags and have to be careful when I copy text from a text program.

At the bottom of my previous post, I did not paste text from any other program nor did I change the font style. Did you toggle HTML, José, after you inserted the numbering list?

Here are the steps that I took in this forum, not at our DE site.

Step 1: write a word or sentence (without numbering; see next line)

This is a test.

When I toggle HTML, I see this:

<p>This is a test.</p>

Step 2: I write the text first and after I am done with writing, I insert numbering. The text looks like this:

  1. This is a test.

When I toggle HTML, I see this:

<ol>
<li><span style="font-size: 13px; line-height: 1.385;">This is a test.</span></li>
</ol>

All is done here in this forum and I did not change the font family nor the font size. I am using Google Chrome. Just sharing my observation. Can anyone go through the two steps and toggle HTML after each step? What do you see?

With kind regards,

Hartmut

Promedio de valoraciones: -
En respuesta a Hartmut Scherer

Re: How can I stop that span tags being added automatically?

de Mary Evans -
Imagen de Core developers Imagen de Documentation writers Imagen de Peer reviewers Imagen de Plugin developers Imagen de Testers

What browser and what operating system are you using? I use FireFox 19.0 and Windows 7 I don't see any span tags. Cheers Mary

  1. Test (Firefox)
  2. Test 2 (Google Chrome - without span tags)
  3. This does not seem to be affected as it was started in FFox
  4. Neither is this line
  5. Opera here no tags
  • New test (Google Chrome - with span tags)
  • More span tags
  1. Some text with more span tags

another test this also has span tags and is classed as Paragraph in editor.

All this is in Google Chrome. How wiered is that!

Some more testing needed.

Then Opera:

  1. It's not over until the fat lady sings!
  2. more span tags

IE9 here and still span tags

Jumped two lines and cleared the Span tags.

  1.  No not here
Adjunto TinMCE editor span tags.jpg
Promedio de valoraciones: -
En respuesta a Mary Evans

Re: How can I stop that span tags being added automatically?

de Mauno Korpelainen -

This seems to be a Webkit bug and fixed in the latest version of TinyMCE (3.5.8) - see http://www.tinymce.com/develop/changelog/index.php?type=tinymce

So you are right, it happens in Chrome until moodle gets the latest version of tinymce...

Promedio de valoraciones: -
En respuesta a Mauno Korpelainen

Re: How can I stop that span tags being added automatically?

de Hartmut Scherer -

Many thanks, Mauno and Mary, for your replies and your patience with me. I highly appreciate your willingness to help. 

With kind regards,

Hartmut

Promedio de valoraciones: -
En respuesta a Mary Evans

Re: How can I stop that span tags being added automatically?

de Mauno Korpelainen -

Update: I was investigating this a little more and it is actually easy to fix in any version of moodle 2.

Configuration of plugin configuration has not been changed during the time we have had tinymce in moodle 2 and for example safari plugin was totally removed already in tinymce version 3.3b1 (3 years ago!!!) - but it is still there in init code of all versions of moodle 2...

The more important thing is however the there is one plugin missing from core plugins in moodle called "lists" - see http://www.tinymce.com/wiki.php/Plugin:lists

So as a temporary fix open file lib/editor/tinymce/lib and find line starting with

'plugins' =>

and replace there the non-necessary plugin "safari" with a plugin "lists"

No more problems with Chrome and Safari lists (with spans).

I am going to report this to tracker - it should be fixed in core moodle.

Promedio de valoraciones: -
En respuesta a Mauno Korpelainen

Re: How can I stop that span tags being added automatically?

de Mauno Korpelainen -

Done: https://tracker.moodle.org/browse/MDL-38329

Promedio de valoraciones:Useful (1)