How do I remove inline styles from generated HTML

[jackbarham]

Apologies if I am missing something here. Adding <li> items in the editor creates <span style="line-height: 1.4em; background-color: initial;">. How do I stop the styles from being added, or at least stop it from submitting with the styles?

Great editor, btw :)

[Alex-D]

Which browser? Version? OS?

I think it's due to the browser content editable API.

[kntmrkm]

I think that is relate to ...

#103

Chrome recently versions occurs the problem maybe.

[jackbarham]

This only seems to happen when I add another UL > LI to a list already created and when I try to add a OL > LI it also adds inline styles but doesn't actually style it in the editor.

I've posted a QuckCast video to show the example: http://quick.as/Q4q5S7gpq

I'm using Chrome Version 46.0.2490.86 (64-bit) on OS X El Capitan 10.11.1 (15B42)

[Alex-D]

:/ Do you think I can remove all style before put it in a list?

[jackbarham]

I don't understand your comment?

[Alex-D]

Sorry :/
Do you think I can remove style attribute from content before put this content in <li>

[kntmrkm]

In my case. Temporary hack is below. but it's very dirty. I'm waiting for better solution.

function cleanUpWasteCode($textarea) {
    var textReplaced = $textarea.val();
    textReplaced = textReplaced.replace(/<strong><br><\/strong>/g, '<br>');
    textReplaced = textReplaced.replace(/<p><br><\/p>/g, '<br>');
    textReplaced = textReplaced.replace(/<strong><\/strong>/g, '');
    textReplaced = textReplaced.replace(/<p><\/p>/g, ''); // put last.

    // for chrome bug. https://github.com/Alex-D/Trumbowyg/issues/103
    textReplaced = textReplaced.replace(/ ?face=[\d\D]* ?/g, '');
    textReplaced = textReplaced.replace(/ ?font-family:[\d\D]*; ?/g, '');
    textReplaced = textReplaced.replace(/ ?font-family:[\d\D]*; ?/g, '');
    textReplaced = textReplaced.replace(/ ?font-size:[\d\D]*; ?/g, '');
    textReplaced = textReplaced.replace(/ ?font-weight:[\d\D]*; ?/g, '');
    textReplaced = textReplaced.replace(/ ?line-height:[\d\D]*; ?/g, '');
    textReplaced = textReplaced.replace(/ ?background-color:[\d\D]*; ?/g, '');
    textReplaced = textReplaced.replace(/ ?color:[\d\D]*; ?/g, '');

    textReplaced = textReplaced.replace(/ ?id="null" ?/g, '');
    textReplaced = textReplaced.replace(/ ?text-align: left; ?/g, '');
    textReplaced = textReplaced.replace(/ style=""/g, '');
    textReplaced = textReplaced.replace(/<>/g, '');
    $textarea.val(textReplaced);
  }

  options = {
    lang: 'ja',
    semantic: true, resetCss: true,
    removeformatPasted: true, // ver. 2.0.0
    fullscreenable: false,
    autogrow: true,
    btns: btns, closable: false
  };

  $('.markdown').trumbowyg(options)
    .on('tbwblur', function() {
      cleanUpWasteCode($(this));
    });

[jackbarham]

Thank you - I'm building a prototype so happy to use a dirty hack for now.

[jackbarham]

This seems to be a problem with most editors - A quick search brought this up. I've not tried it yet (will do tomorrow), but looks promising: http://www.neotericdesign.com/blog/2013/3/working-around-chrome-s-contenteditable-span-bug

[Alex-D]

Seems like fixed in Chrome. I can't reproduce this bug now.
Chorme 48.0.2564.103 m

[kntmrkm]

I think does not fixed this bug.
48.0.2564.116 (64-bit)

[Alex-D]

Someone can test if the problem persists in 2.0.0-beta.8 please?

I don't know how to reproduce this bug :/

[SkifAlef]

Don't know if it's related (think so).
If I paste some text in Twyg and then delete new line between paragraphs and then Shift+Enter to create <br>, I'm getting <span style="line-height: 1.42857;">
Chrome 49.0.2623.110 m.

Also removeformatPasted option doesn't remove styles inside <p>, for example <p class="BodyText" style="margin-top: 10px; margin-bottom: 15px;">. Very annoying.

[Alex-D]

Since v2.0.2 stable is release, anyone can test if this bug is still present? I don't have it on Chrome :)

[ra100]

I still see this happening in Chrome 49.x and 50.x

Couldn't it be fixed by something like this in semanticCode function? Which expands removes spans with style attribute and removes style attribute from every element.

t.$ed.find('span[style]').contents().unwrap();
t.$ed.find('[style]').removeAttr('style');

[Alex-D]

The color plugin use spans to add color in style attribute. We can't remove it completely.

[Alex-D]

Have you got a sample page with this bug? I need to reproduce it easily to try to fix it.

[ra100]

I've forgotten about color plugin, or anything else that could use spans.
Well, I tried now Trumbowyg on demontration site (http://alex-d.github.io/Trumbowyg/) and after moving cursor to header and clicking on list, then movin cursor to paragraph and again clicking on menu to make a list, I got this markup:

<h3><ul><li><span style="font-size: 1.17em; line-height: 1.4;">This is a demo of Trumbowyg</span><br></li></ul></h3>
<p><ol><li><span style="line-height: 1.4;">A simple paragraph, </span><strong style="line-height: 1.4;">strong</strong><span style="line-height: 1.4;"> and </span><em style="line-height: 1.4;">emphasis</em><span style="line-height: 1.4;"> funny test.</span><br></li></ol></p>
<p style="text-align: center;">

FIrefox seems fine. But Chrome/Chromium not. I tried it in these browsers:

• Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/49.0.2623.110 Safari/537.36 Vivaldi/1.1.443.3
• Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/50.0.2661.26 Safari/537.36 OPR/38.0.2190.0 (Edition developer)
• Google Chrome Version 49.0.2623.87 (64-bit)
  I know it doesn't matter, all have Blink engine. Maybe problem is operating system? I'm running xubuntu.

[Alex-D]

Can't reproduce each time, sorry I don't have the time to fix it.

[AlphaCaprice]

Problem is still actual, btw