So my problem is relatively simple, I've Googled all over to find a solution but I've yet to find one.
The problem is, I've developed a WYSIWYG plugin for Drupal's WYSIWYG module/framework (not sure if this is relevant). The purpose of the plugin is to allow embedding of video files inside the WYSIWYG content. Our client offers a video uploading/editing API which their customers use to embed files on their pages.
To put it simply, my plugin opens up a pop-up where the user selects one of their videos as fetched from their account at the clients site, the plugin then calls the API and is returned with HTML and JavaScript for embedding the video which is then inserted into the WYSIWYG content.
This works like a charm in Firefox, however I have a few problems with it in Chrome. After debugging back and forth I've noticed that the embedded JavaScript inside the WYSIWYG editor gets escaped (IE, quotes turned into " etc).
This does not happen with Firefox so it's most likely Chrome which is causing it, or perhaps even Webkit?
I've already checked the HTML and JavaScript that gets returned through the Ajax call and it is fine, it's when it gets embedded inside the WYSIWYG it gets escaped.
The WYSIWYG editor I've tested in is TinyMCE by the way.
Adding as an answer for #tobbr to help other SO users:
i solved this by adding the script to a db table instead and then
loading it using drupal_add_js with hook_nodeapi. works better and
solves another IE related problem
Related
I feel like this should be really easy to find if it exists, but I've been googling for 10 minutes. I don't see it mentioned in the official documentation.
I'm trying to troubleshoot a solution to a problem. The solution requires rearranging the order the head child elements.
It's trivial to make that change with Firefox devtools, but I don't know how to view the page with those changes; if I reload (ctrl+r), the HTML goes back to the server version. Does this feature exist?
FWIW, I can find ways of doing this for CSS and JS changes.
There is currently (as of Firefox 92) no such feature of re-applying HTML changes.
What I found is a feature request in Mozilla's bug tracker.
At the moment, the only workaround for this is to directly transfer the changes on the server side script creating the HTML output once you've done them in the Inspector.
Note: It requires some heuristics to re-apply changes to HTML in the browser because the resources served over the network could change in the meantime.
For CSS, the simple DevTools solution is to replace a file entirely by the saved one. For JavaScript, they have some heuristics to recognize where a line moved when code has changed between two reloads. Though those solutions cannot be transferred to HTML easily, as it is generated dynamically most of the time.
I have created two CKEditor plugins. Each of them uses an "Iframe Dialog Field", meaning that a dialog box is launched and the contents of that dialog box is a webpage (you can think of the entire dialog box as being like one big iframe).
Each plugin works perfectly on its own. However if I use both plugins in the same CKEditor app, they both end up displaying the same page, rather than two different pages, despite the fact that they point to two different pages. I see no reason why this should be happening. Does anyone know how to prevent this?
To make sure there is no confusion, an "IFrame Dialog Field" is a dialog box whose contents are another webpage.
Documenentation - http://ckeditor.com/addon/iframedialog
[ This is different from using an "IFrame dialog", which I believe is a plugin that lets the user add an iframe to the page.
Documentation - IFrame Dialog: http://ckeditor.com/addon/iframe ]
In terms of usage, when using an IFrame Dialog Field, you specify the url of the page to load in the addIframe() command. Here is an example of using a CKEditor Iframe dialog
https://gist.github.com/garryyao/1170303
Back to my issue - if I use just one of the plugins in my CKEditor, it works perfectly. Each plugin points at a different url, and opens that url as the contents of the dialog box. But, if I use both plugins in my CKEditor, although I see a different icon for each, both end up launching a dialog box which points to the same url. Depending which one I launch first, that is the url both end up opening. It is as if you are only allowed to use one IFrame Dialog Field in CKEditor, and the first one used overwrites all others.
This same question was asked a couple of years ago, with no response on the CKEditor forum. The person who asked the question posted his solution, or rather his workaround, which was to NOT use the IFrame Dialog Field altogether, but to instead use a regular dialog and then put an iframe element within it.
http://ckeditor.com/forums/CKEditor-3.x/multiple-iframedialog-plugins-display-same-dialog
That seems like an OK workaround, but it is a workaround and not a solution. I haven't tried it yet, and don't know what potential issues I will run into if I go down that route. I'd prefer to fix my existing code rather than rewrite the plugins, unless I have no choice.
Any help would be appreciated.
Since I have not found any further information, or received any answers here, I ended up going with the workaround mentioned at the end of my question - I used a regular dialogue box and put a big Iframe within it. This problem doesn't exist with that approach, and It looks pretty much the same as an Iframe dialog box. (Considering the almost total lack of community support with CKEditor customization, I've realized it is better to just adjust your design/concept to do what is more easily accomplished with CKEditor, rather than get CKeditor to do exactly what you want).
I am using a Web view in my application, instead of open a Safari browser instance, so I noticed that Safari extensions doesn't work. Is there a possibility to enable this feature when using a custom web view in a Cocoa Application?
The reason by which I need to use Safari extensions is to inject javascript to whatever web page is loaded at one moment, so if is there another approach to do it without using extensions, welcome any suggestions or samples.
There's no way to use Safari extensions in a web view.
If your script isn't too big, how about formatting it as a "javascript:" bookmarklet and setting the web view's location to it?
[Edit: Stuff below added in response to questioner's request for "a bit more about that technique".]
Say you want to change the background color of the page to yellow and all the text to red. The javascript to do that would be something like:
document.body.style.backgroundColor = "yellow";
document.body.style.color = "red !important";
To turn the script into a bookmarklet, you just:
Wrap it in an anonymous function,
remove all line breaks,
(optionally) remove any unnecessary spaces,
url-encode it,
and prefix the whole thing with "javascript:".
So, the example would become:
javascript:(function(){document.body.style.backgroundColor%3D%22yellow%22%3B%0Adocument.body.style.color%3D%22red%20!important%22%3B%0A}());
Then you can set the webview's window.location to that string to "run" the bookmarklet.
Here is a page with an automatic script to bookmarklet converter that seems to work.
I'm to make a firefox extension which will inject some js code as well as whole jQuery lib.
I want it to happen (the injection) when user pushes the button placed somewhere in the browser. I have read docs form MDC and other tutorials about making the extensions and they seem complicated to me. Technologies such as XPCOM or XUL are completely useles form me (I have no time to learn them in fact). My question is, is it another way of solving my problem then following MDC? I need to find quicker way of doing my task.
I've already written the extension for Google Chrome, and it was a way simplier than doing it for Firefox.
I would take a look at Greasemonkey. It shares some similarity with Chrome plugins in function (Script gets injected on the page, local storage, etc). As for using JQuery with Greasemonkey, look at this question: How can I use jQuery in Greasemonkey?
You can use a bookmarklet to add jQuery to a page and/or inject any other code.
Is it possible through a plugin or setting or something to allow Firefox to recognize the live DOM source code?
Basically, firebug or other similar tools can recognize elements on the page which Firefox does not.
I understand with these extensions I have the ability to see such changes made by javascript, but Firefox does not seem to fully recognize them.
I'll try to clarify.
If I load a page and view source (ctrl-U), I see what the server sent to Firefox, and what Firefox ostensibly recognizes as the source code of the page. If in that source code, there is javascript which alters the DOM, and then I hit (ctrl-U) again, the code is not updated.
I am using a testing tool (iMacros firefox plugin) to automate functionality, but it does not recognize the updated DOM because Firefox does not. Firebug and similar tools can recognize these "live" updates. Does that help?
http://www.chapter31.com/2006/12/04/viewing-ajax-generated-source-code/
You can try using the web-developer extension with a view-generated-source option.
I'm still not sure I understand your question, but I think what you're getting at is the Web Developer extension for FireFox, specifically its "View Generated Source" feature.
That will let you see the altered DOM.
Firebug gives u this ability:
for instance check the HTML tab when running a jquery ticker and see the dynamic changes live in the DOM
Usually, when I have weird issues with either the console or the DOM inspector with firebug, I find restarting the browser and validating your code is the way forward.
That said, I'm not really following your question, the document that firebug shows is the same one in the firefox window...?
It looks like the problem is not that you want firefox to show the current DOM when you hit CTRL+U, but that you want some automated testing tool to be able to test your web pages.
Perhaps you should use a testing tool that is suited to the job of testing rich web applications, Selenium, for example, can do this.