tl;dr Demo of Issue
I'm attempting to integrate Ace Editor in an iframe via React 16. I am using the react-ace component library, though this issue exists if I implement the editor natively as well.
Although everything mostly works when I wrap the editor in react-frame-component, I cannot select highlight text which makes the editor unusable. I suspect this may have to do with the fact that react-frame-component is implemented with Portals, but I'm not sure exactly what the issue is.
I've replicated the issue here. I don't think this problem exists if I loaded the component with a regular <iframe src /> from another domain.
react-frame-component keeps the code in the parent window, and adds elements into an iframe, which confuses mouse handling code in ace to add event listeners to a wrong document
adding var document = el.ownerDocument before
https://github.com/ajaxorg/ace/blob/v1.4.10/lib/ace/lib/event.js#L111 would help.
Related
Inserting an iframe into TinyMCE with HTML contents rather than a src attribute encodes everything and breaks the contents.
Eg: inserting this via the View Source or Embed plugin:
<iframe><p>hello</p></iframe>
Will result in this when you view the Source again:
<iframe width="300" height="150" data-mce-fragment="1"><P>hello</p></iframe>
Is there any way to stop this or a setting in the init which causes this?
If anyone wonders why I would need this over using a src, it's because I'm trying to format articles for Facebooks's new Instant Article thing which requires embedded posts/tweets etc to be wrapped in a <figure><iframe>[code]</iframe></figure> format.
I figured out why this happened as I was trying to narrow down the problem by testing it out on fiddle.tinymce.com. This encoding issue didn't happen on the fiddle, so I stripped back my own init thinking it was maybe the codemirror plugin, but it turned out to be the fontawesome 2.0.6 plugin (it's now on 2.0.8 but I couldn't get that version to work so am unsure if it has changed the way it works since 2.0.6).
The plugin does a var content = parser.parseFromString(e.content, 'text/html'); on BeforeSetContent and GetContent to do some nonEditable class changes. This caused certain HTML elements to become encoded in the source code.
Long story short, I removed the parser and modified the plugin and my problem is solved!
I am having a big time issue with solving a problem. I have a placeholder called main for the content region of the page. I was building that region in the cms. Everything was going great until I attempted to add an embedded video contained in an iframe. When I save django cms completely removed the iframe and left an empty div. So I attempted to use prettyphoto light box to open the video by clicking on an image. The code I added to the page through the cms is:
<a rel='prettyPhoto[youtube]' href="https://www.youtube.com/embed/mqVZF_yb8C0?autoplay=1&start=1765&iframe=true" data-rel="prettyPhoto">Click Image</a>
When I saved, django cms completely removed the data-rel attribute from the link which is obviously needed for the js. So I went a step further and adapted the code of the data attribute to:
rel="prettyPhoto"
and the cms also removed that attribute! Also anytime I add an html5 tag like article of section it hates that too! What gives here? Am I doing something wrong? Any advice would be appreciated.
Aaron,
Thanks.
Please see the discussion at https://github.com/divio/django-cms/issues/1529. We use html5lib to clean the contents of the text plugin (this cannot be turned off for security reasons).
What you'll want to do is write a custom plugin (possibly one that can be embedded inside text plugins).
Drupal 6 ckeditor 3.6.4
I have page that loads the text area dynamically, so I am using
CKEDITOR.replace('textarea-id');
Which works, but it is bringing in the full toolbar. I would prefer that the simplified toolbar is used, but it would also be acceptable to use the toolbar I have defined if loading the simplified is not possible. Least desirable would be to hard-code the toolbar, but I consider that a last resort. How do I accomplish this?
I have tried
CKEDITOR.replace('textarea-id',
{
toolbar : 'myprofile'
});
Which throws js error: Type x is undefined , I think related to the fact that it cant load the profile. Suggestions?
For better or worse, this is how I did it:
http://joe-riggs.com/blog/2012/11/drupal-ckeditor-load-configuration-settings-on-dynamic-page/
I am looking for a way to dynamically set the window title for a flex application in Internet Explorer. The most best way to do this is to call javascript from actionscript to set the window title via an "ExternalInterface."
ExternalInterface.call("eval(window.document.title = 'New Title')");
ExternalInterface.call("alert", "Hello ExternalInterface");
This works fine in browsers other than IE, and it even works in IE when accessing the flex application's swf file through an html wrapper.
ttp://localhost:8080/ChangeTitle/ChangeTitle.html
However, I need to access the .swf directly from the browser..
ttp://localhost:8080/ChangeTitle/ChangeTitle.swf
This causes the External interface call to change the window title to not work, but the alert still shows.
So the question is... why don't I just use the html wrapper? ... The answer: because the project is set up specifically to avoid using the html wrapper.
This is related to a known IE bug - http://bugs.adobe.com/jira/browse/FP-240
If anyone could suggest a work-around for this issue it would be greatly appreciated.
Thanks
Don't use ExternalInterface for this; use the BrowserManager class. You can first initialize it with a title:
var browser:IBrowserManager = BrowserManager.getInstance();
browser.init("", "my title");
Later you can adjust the title later on:
browser.setTitle("my new title");
I have several applications that use this and work perfectly in IE (though I haven't tested IE6).
More info on this topic: http://help.adobe.com/en_US/flex/using/WS2db454920e96a9e51e63e3d11c0bf64e50-7ff4.html
I am developing a feature where I want to increase the size(width and height) of Facebook Like button which is getting rendere on my page.
I have tried overidding the css but it is not working as my css is loading very late.
Help required.
Are you sure you're using the correct overrides in your CSS? If I'm not mistaken, it doesn't matter when the CSS is loaded, just that it is loaded.
Be sure to check your CSS includes in the header file to make sure you're using the latest version. Also double check the classes or ids you need to override.
Perhaps you could post the code containing the like button you're trying to manipulate. If you're loading it in via Javascript you can use Firebug or other Web Inspectors to find out the actual HTML that gets inserted.
First of all, the css MUST be interpreted by the browser before the html element it refers to is loaded...
Second, the reason you can't select the button through CSS directly, is because it is rendered inside an iFrame that is controlled by the Facebook framework (you can check this out with firebug or any other inspector).
I'm not sure if it's feasible, but you have two possible ways to do it:
use javascript and the DOM to access inside that iFrame, select the button and style it.
create a button yourself, and give it the same href as the one generated originally, thus losing the fan-counter capabilities and whatever else is part of their framework