{"action":"opened","issue":{"url":"https://api.github.com/repos/ajaxorg/ace/issues/2636","labels_url":"https://api.github.com/repos/ajaxorg/ace/issues/2636/labels{/name}","comments_url":"https://api.github.com/repos/ajaxorg/ace/issues/2636/comments","events_url":"https://api.github.com/repos/ajaxorg/ace/issues/2636/events","html_url":"https://github.com/ajaxorg/ace/issues/2636","id":100999866,"number":2636,"title":"CSS iframes injecting, lazy load from ext's","user":{"login":"JaroslavMoravec","id":1384200,"avatar_url":"https://avatars.githubusercontent.com/u/1384200?v=3","gravatar_id":"","url":"https://api.github.com/users/JaroslavMoravec","html_url":"https://github.com/JaroslavMoravec","followers_url":"https://api.github.com/users/JaroslavMoravec/followers","following_url":"https://api.github.com/users/JaroslavMoravec/following{/other_user}","gists_url":"https://api.github.com/users/JaroslavMoravec/gists{/gist_id}","starred_url":"https://api.github.com/users/JaroslavMoravec/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/JaroslavMoravec/subscriptions","organizations_url":"https://api.github.com/users/JaroslavMoravec/orgs","repos_url":"https://api.github.com/users/JaroslavMoravec/repos","events_url":"https://api.github.com/users/JaroslavMoravec/events{/privacy}","received_events_url":"https://api.github.com/users/JaroslavMoravec/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"milestone":null,"comments":0,"created_at":"2015-08-14T12:19:59Z","updated_at":"2015-08-14T12:19:59Z","closed_at":null,"body":"When you have multiframe application and want to load ace only once into top window, you have problem with css, when you want to instantiate editor on element in iframe.\r\n\r\nExample\r\n**topwindow.html**\r\n\r\n```html\r\n<!DOCTYPE html>\r\n<html lang=\"en\">\r\n<head>\r\n\t<meta charset=\"UTF-8\">\r\n\t<script src=\"lib/ace/ace.js\"></script>\r\n\t<script src=\"lib/ace/ext-language_tools.js\"></script>\r\n</head>\r\n<body>\r\n\t<iframe src=\"iframe.html\"></iframe>\r\n</body>\r\n</html>\r\n```\r\n\r\n**iframe.html**\r\n```html\r\n<!DOCTYPE html>\r\n<html lang=\"en\">\r\n<head>\r\n\t<meta charset=\"UTF-8\">\r\n\t<title>Document</title>\r\n</head>\r\n<body>\r\n\t<div id=\"editor\" style=\"width: 800px; height: 300px; border: 1px solid red;\">\r\nvar c = function () {\r\n\talert(\"hello\");\r\n}\r\n        </div>\r\n\t<script>\r\n\t\tvar editor = window.top.ace.edit(document.getElementById('editor'));\r\n\t</script>\r\n\r\n</body>\r\n</html>\r\n```\r\n\r\nMost of styles are not presented in iframe (except *ace-tm* style and style of *theme*). Even if the method `importCssString` is ready for injecting styles to specified document, in ext's is not implemented correctly. Respectively, ext's are loaded only once, and injects styles directly to library's window (topwindow.html) on load. Styles should be injected lazy, in VirtualRenderer, which would collect all stylesheets from ext's etc. and inject them to element's window (iframe.html) (if not already injected), where the editor is instantiated."}}