Align problems in IE/Edge due to lack of support for styleWithCSS

So I got my page with all the styling and stuff, and I would like to be able to contentedit those texts. The problem is that in Firefox and IE/Edge, instead of using style="text-align : left | right | center", it adds an extra attribute that is deprecated which is “align”, i know you aren’t adding it but is just the normal browser behavior for the document.execCommand() on justifyLeft, justifyCenter and justifyRight.

In Firefox, the way to fix this is by adding: document.execCommand("styleWithCSS", 0, true);

Before the execCommand itself in your library. But unfortunately, Internet Explorer and Edge doesn’t support this. So now I need to find a way to actually re-create the same effect by hand, why I tried is iterating through the nodes with context.code(), search if the node has align attribute, then add it as an inline style and then remove the attribute. The problem comes next, when I re-set the string HTML back in, in Edge it bugs very very bad and sometimes it removes entire nodes!

Can anyone help me here? I’m very lost by now, this is what my little method looks like:

    /**
     * styleWithCSS IE
     * This fixes IE/Edge align attribute issue due to lack of styleWithCSS support.
     */
    var styleWithCSSIE = this.styleWithCSSIE = function() {
      // Only for IE && Edge
      if (/MSIE 10/i.test(navigator.userAgent) || /Edge\/\d./i.test(navigator.userAgent)) {
        var code = $(context.code());
        
        if(!code) {
          return;
        }
        
        // context.invoke('editor.saveRange');
        var newCode = '';
        $.each(code, function(index, element) {
          var align = $(element).attr('align');
          
          if (!align) {
            return true;
          }

          $(element).css('text-align', align);
          $(element).removeAttr('align');

          // For some reason, in IE/Edge adds a br inside the element. 
          $(element).find('br').remove();

          newCode += element.outerHTML;
        });

        context.code(newCode);
        // context.invoke('editor.restoreRange');
        context.invoke('focus');
      }
    };

I also got an issue with the caret position of course, since i override the previous HTML with the updated one, the caret is being placed really offset on beginning top, adding an extra invisible “top-margin” in Edge that gets removed whenever either exec a command again or you do a click in the editor container. Really weird bug.

Now of course this works fine if you are not using custom CSS in your page by the time. But if you have some CSS applied, looks like the align attribute has less priority than the CSS itself lol.

Any help will be very appreciated.

[ghost]

All good, glad it helped, I had to work out what jQuery functions to use, glad it saved you some time.

There is an open PR that addresses the classes instead of styles issue. The SN Devs must be busy lately, as there’s a lot of PR’s that fix quite a few things, and add some nice stuff.

[ghost]

Essentially:

var items=$(".note-editable *");
var errorText='';
var i=1;
$.each(items,function(index,item){
    if($(this).is('a')){
        var error='';
        if($(this).attr('charset'))error+='<div class="alert alert-danger" data-attrernum="'+i+'"><div class="col-xs-8">The <code>charset</code> attribute is Deprecated.</div><div class="col-xs-4 text-right"><button class="btn btn-default add" onclick="$(\'[data-attrnum='+i+']\').removeAttr(\'charset\');$(this).closest(\'.alert\').fadeOut();">Fix</button></div><div class="clearfix"></div></div>';
    }
    if(error){
        $(this).addClass('accessibility-error error');
        $(this).attr("data-attrnum",i);
        errorText=errorText+error;
        i++;
    }
}

That’s just an excerpt for looking for a deprecated attribute, but should give you an idea. The errorText ends up going into the content area of a popover. The accessibility-error class is a custom class, and the follow error just changed the colour for the severity of the error, much like how bootstraps alert’s work.