{"action":"created","issue":{"url":"https://api.github.com/repos/summernote/summernote/issues/2221","repository_url":"https://api.github.com/repos/summernote/summernote","labels_url":"https://api.github.com/repos/summernote/summernote/issues/2221/labels{/name}","comments_url":"https://api.github.com/repos/summernote/summernote/issues/2221/comments","events_url":"https://api.github.com/repos/summernote/summernote/issues/2221/events","html_url":"https://github.com/summernote/summernote/issues/2221","id":206893177,"number":2221,"title":"Align problems in IE/Edge due to lack of support for styleWithCSS ","user":{"login":"msqar","id":3858876,"avatar_url":"https://avatars.githubusercontent.com/u/3858876?v=3","gravatar_id":"","url":"https://api.github.com/users/msqar","html_url":"https://github.com/msqar","followers_url":"https://api.github.com/users/msqar/followers","following_url":"https://api.github.com/users/msqar/following{/other_user}","gists_url":"https://api.github.com/users/msqar/gists{/gist_id}","starred_url":"https://api.github.com/users/msqar/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/msqar/subscriptions","organizations_url":"https://api.github.com/users/msqar/orgs","repos_url":"https://api.github.com/users/msqar/repos","events_url":"https://api.github.com/users/msqar/events{/privacy}","received_events_url":"https://api.github.com/users/msqar/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":9,"created_at":"2017-02-10T20:03:09Z","updated_at":"2017-02-13T23:09:09Z","closed_at":null,"body":"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.\r\n\r\nIn Firefox, the way to fix this is by adding:\r\n`document.execCommand(\"styleWithCSS\", 0, true);`\r\n\r\nBefore the execCommand itself in your library. But unfortunately, Internet Explorer and Edge doesn't support this.\r\nSo 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!\r\n\r\nCan anyone help me here? I'm very lost by now, this is what my little method looks like:\r\n\r\n\r\n```\r\n    /**\r\n     * styleWithCSS IE\r\n     * This fixes IE/Edge align attribute issue due to lack of styleWithCSS support.\r\n     */\r\n    var styleWithCSSIE = this.styleWithCSSIE = function() {\r\n      // Only for IE && Edge\r\n      if (/MSIE 10/i.test(navigator.userAgent) || /Edge\\/\\d./i.test(navigator.userAgent)) {\r\n        var code = $(context.code());\r\n        \r\n        if(!code) {\r\n          return;\r\n        }\r\n        \r\n        // context.invoke('editor.saveRange');\r\n        var newCode = '';\r\n        $.each(code, function(index, element) {\r\n          var align = $(element).attr('align');\r\n          \r\n          if (!align) {\r\n            return true;\r\n          }\r\n\r\n          $(element).css('text-align', align);\r\n          $(element).removeAttr('align');\r\n\r\n          // For some reason, in IE/Edge adds a br inside the element. \r\n          $(element).find('br').remove();\r\n\r\n          newCode += element.outerHTML;\r\n        });\r\n\r\n        context.code(newCode);\r\n        // context.invoke('editor.restoreRange');\r\n        context.invoke('focus');\r\n      }\r\n    };\r\n```\r\n\r\n\r\nI 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.\r\n\r\nNow 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.\r\n\r\nAny help will be very appreciated."},"comment":{"url":"https://api.github.com/repos/summernote/summernote/issues/comments/279553752","html_url":"https://github.com/summernote/summernote/issues/2221#issuecomment-279553752","issue_url":"https://api.github.com/repos/summernote/summernote/issues/2221","id":279553752,"user":{"login":"msqar","id":3858876,"avatar_url":"https://avatars.githubusercontent.com/u/3858876?v=3","gravatar_id":"","url":"https://api.github.com/users/msqar","html_url":"https://github.com/msqar","followers_url":"https://api.github.com/users/msqar/followers","following_url":"https://api.github.com/users/msqar/following{/other_user}","gists_url":"https://api.github.com/users/msqar/gists{/gist_id}","starred_url":"https://api.github.com/users/msqar/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/msqar/subscriptions","organizations_url":"https://api.github.com/users/msqar/orgs","repos_url":"https://api.github.com/users/msqar/repos","events_url":"https://api.github.com/users/msqar/events{/privacy}","received_events_url":"https://api.github.com/users/msqar/received_events","type":"User","site_admin":false},"created_at":"2017-02-13T23:09:09Z","updated_at":"2017-02-13T23:09:09Z","body":"Thanks i will take a look on that! :) "}}
{"actor":{"display_login":"msqar"}}