as the question states, I wish to embed a tinymce editor in a PyQT webkit component.
As far as I understand, evaluateJavascript allows for js functions to be called.
However, when I try loading tinymce.min.js, the editor does not display anything at all. As suspected, when evaluating a javascript that 'loads' other javascript files, they don't actually get loaded.
At this point, I feel lost. I will try to manually load 'plugins' that will be specified in tinymce's init function and will update this.
Till that time, any help would be really appreciated.
EvaluateJavaScript does make javascript function calls, or embed a whole javascript file. The following details out the attempts to solve the problem:
The approach of first reading the tinyMCE.js file and then using that in an evaluatejavascript method embeds the javascript somewhere, and can't be sniffed out in a webkit console. When loading files using the evaluatejavascript method, any dependencies, such as the ones that tinymce require, are not loaded. I think it's because javascript calls are "attached" to the webkit but not embedded in the frame's DOM itself.
The second approach consists of creating a webkit page and loading an html file. The html file itself embeds the javascript, so the component works like a "browser". In tinymce's configuration, toolbars and unnecessary parts were hidden. TinyMCE version 3 worked well with PyQt4. When the 4th version was embedded in an html page however, textareas were not being converted to tinymce editors. The console itself shows 'undefined' error messages, deduced to the assumption that tinymce 4 uses different javascript syntax and a different compiler.
And so ends my quest to write a stand-alone webkit editor. :)
Related
I'm starting fresh with a new blank Intel project and I haven't even started coding yet. I'm just setting up my file tree and making sure the html and javascript pages are connected via the right anchors and script paths. My first .js file won't work though.
I've included a screen shot of test code and the errors. I know the syntax is correct because it works when I put it in <script> tags in the index.html file.
I'm getting "document not defined" and "alert not defined" errors or the js page though. I don't know what that means.
I've considered that my script tag src path in the index file is incorrect, but all the paths are relative in the commented out template script tags intel provides on the index page right out of the box, so why would I have to use an absolute path?
My path is: js/Test.js and it's the last script tag before the body.
Index.html file
*****UPDATE****
So I've tried a few things and it's still not working but I HAVE managed to get my errors down to just one inexplicable "missing semicolon", which will turn into an "unnecessary semicolon" error if I place it.
Any way as per the first screen shot you'll see that I wasn't placing the document object inside of an explicitly declared variable. Once I did that and accessed it through dot syntax instead of an equal sign then I stopped getting the error. I included this screenshot to show my work before I made the changes.
so the problem I went on to have is that unless every function or dom object was declared with "Var", I'd get an error. This includes the alert() function which I don't think I've ever seen needing to be declared that way, but I gave the code editor what it wanted and this last screenshot is the results. It's not working, BUT I'm not getting the errors I was before, except for the missing/unnecessary semicolon paradox. Removing it or including it throws an error.
JavaScript can be loaded before or after the HTML, however the way it is done is slightly different depending on how you do it.
For example if you wish to include your JavaScript files within the head of the HTML file then you must wrap your JavaScript code with either DOMContentLoaded or jQuery's $(document).ready().
The common misconception of using window.onload will not fix the issue where the elements have not loaded in correctly.
The Mozilla Developer Network states on this page:
The DOMContentLoaded event is fired when the initial HTML document has been completely loaded and parsed, without waiting for stylesheets, images, and subframes to finish loading. A very different event - load - should be used only to detect a fully-loaded page. It is an incredibly popular mistake to use load where DOMContentLoaded would be much more appropriate, so be cautious.
That quote in itself should prove that onload should not be relied on if you want the full DOM to be loaded properly before you start manipulating it. Instead you should do the following:
Vanilla
document.addEventListener("DOMContentLoaded", function (e) {
/** DOM has been fully loaded here, so manipulation can begin. **/
/** Your code here. **/
});
jQuery
$(document).ready(function () {
/** DOM has been fully loaded here, so manipulation can begin. **/
/** Your code here. **/
});
Click this link to see the difference between vanilla and jQuery.
The second way you can load JavaScript is by having all the script tags within the body but after all the HTML, that way it is guaranteed to load after the HTML.
Example
Try this working example I quickly coded up.
HTML
Replace the content within the body tag of your HTML to the following:
<button id="myJsTest">Click Me!</button>
<div id="clickCounter">Click Count: 0</div>
Replace the contents of your JavaScript with the following:
JavaScript
document.addEventListener("DOMContentLoaded", function() {
var clickCount = 0;
document.getElementById("myJsTest").addEventListener("click", function() {
clickCount++;
document.getElementById("clickCounter").innerText = "Click Count: " + clickCount;
});
});
Then use the Emulate tab in Intel XDK to test it.
Additional Information
When I use Intel XDK and I have an error, I quickly load the file in to the browser and check the console. It can be a really helpful and effective way of squashing those pesky little bugs.
Try using window.alert as alert is defined in the window object.
The reason you're seeing all those "error" messages in the editor window is because you've got the various JSLint/Hint tools loaded in the editor. They're trying to keep you honest and save you lots of time in the debugger chasing potential syntax errors.
The editor inside the XDK is Brackets, it is using standard Brackets extensions to provide those JSLint/Hint tools. You can download it and run it standalone on your system and edit directly within it, you don't have to use the editor inside the XDK (or you can use any other editor you like).
Because the Lint/Hint tools only look at one file at a time, and because your app is normally spread over multiple files, they don't know much about about what's defined in your other files. Likewise, those hint/lint tools need to be told that you're using some of the standard global methods and properties that are expected to be found in a browser (but which may not be found in other JavaScript environments, because JavaScript is no longer limited to just a browser environment -- in fact, your XDK app, aka Cordova app, runs inside a "webview" not in a browser, but that's another story...)
So, you should follow some standard practice of setting up your JSHint/Lint directives at the top of your JS files. For example, this is a good starting point:
/*jslint browser:true, devel:true, white:true, vars:true */
/*global $:false, intel:false */
See the JSHint documentation for details... and see the "Blank Cordova Starter App" in the "Start a New Project" section of the Projects tab for a better blank template to start (there is no real difference between a blank template and a demo app, they are structured identically).
For a more complete and even more instructive app, see the "Hello, Cordova" sample app. Both of those apps can also be found on the Intel XDK GitHub repo.
You are adding the js file that is <script src="js/Test.js"></script> inside header tag.
So js will be first loaded and and it will attach all events to it. But when js is loaded button id="jsTest" is not present because DOM is not loaded.
Solutions :-You can follow either of the approach
Add your js files after DOM is ready
<body>
<button id ="js/Test.js">Test JS</button>
// other HTML tags
<script src = "js/Test.js></script>
</body>
Use window.onload
The load event fires at the end of the document loading process.
window.onload = testJsFile(){
//Your code goes here
}
I will prefer to use the first approach since that also address other issues like page loading time
Try to put the line outside your JS function
document.getElementById(......
inside your html page between
<script>HERE</script>
If this is still no working. Try to add onClick attribute to the button like this:
<button id="" onClick="testJsFile()">
Its also good to use google chrome element inspection while devlopping cuse it will give you error msg for all these things.
I have been trying to find a way to alter the final HTML DOM output (i.e., after JS script adjusts the HTML output) before it gets rendered on the browser.
I found a hook in Wordpress called 'template_redirect' which works well if I want to change the HTML output before JS gets executed but not after. So the before JS script execution, all I see is the JS name only from this hook.
Here's the problem that I'm trying to solve. In my wordpress blog, I'm including a JS script from third-party and this JS is inserting extra tags (such as Schema.org tags regarding that their organization - Schema organization tags). It is about 3000 characters long and it is bloating my webpage. I would like to remove any extra tags that gets attached to my final HTML (it is getting added before </html> tag) before shown in the browser.
Note that I don't see these extra tags when I do view source and they show up only when I do inspect element from Chrome or FF.
Any suggestions on how to remove the HTML DOM after JS execution but before it is shown on the browser via Wordpress hooks or any other way?
Thanks, JK
JS is executed in the users browser not on the sever(in almost all cases). You can either remove the tags after they are rendered using more JS(which won't really help any "bloat"), or take a look at the code for the plugin you are using and alter the plugin
I'm developing an enhancement extension for a website. I use CKEditor to add a WYSIWYG editor to the forums.
However, I've noticed that CKEditor only loads after every resource (body onload) has loaded (body onload). Most people in the forums use 5MB+ GIFs, so this really affects the load time.
Since all the javascript files are in the extension, file sizes aren't the problem. I'm not using jQuery either.
Is it possible to alter CKEditor or something so it runs only when the DOM is loaded?
As #Reinmar suggested, I've used CKEDITOR.replace() and now I can load it before body onload.
CKEDITOR.replace("id");
I have a content script running inside the Gmail UI and I am injecting some new HTML at different points. This is all working, but to keep the code clean I wanted to insert pre-defined HTML markup into certain parts of the page in a single function call.
This all seems feasible using chrome.extension.getURL(), but when I was testing this, it looks like chrome.extension is undefined! I was unable to find anywhere in the documentation that says this shouldn't be defined and several places where it says it should.
I am using chrome Version 39.0.2171.95 (64-bit)
Here is what the chrome object looks like in the javascript console:
First off, anyone know why chrome.extension might be undefined? Secondly, is there another (perhaps better) way to do this? I'd rather not just programmatically inject a large amount HTML into the page in code using jQuery, etc. in the content script, but can resort to this if there is no other way.
If you're testing this in the console, you must be aware of the concept of the Isolated World. When you add a content script, it has a separate JavaScript context for itself that is isolated from the page.
At the top of the Console tab of Dev Tools, you'll see <top frame> in a dropdown. This is a dropdown that selects JS context it is executing in. It will list frames inside the document and all extensions that have content scripts injected.
The chrome object you show in the screenshot corresponds to what the webpage normally sees. If you switch context, you'll see a different picture:
In any case, if you are really executing chrome.extension.getURL() in the content script - it will be well defined.
Now, if you injected a <script> tag in the page and tried it in that code - it would fail again, since the code will be in the page context. See this question for this situation.
Finally, most of the Chrome API will not be exposed to content scripts for security reasons. If an API is undefined when it shouldn't be, you may need a background page to do the job for you.
When editing JSPs in Eclipse, the contents of <script> tags - i.e. Javascript code - is properly color coded and formated.
For reasons that go beyond the scope of this question, I have created a custom javascript tag, let's call it <sj:script>. The body of this type is pure javascript as you would have in a regular <script> tag.
However, when I have Javascript code within my custom tag, it is treated as simple text (no color coding, no proper indentation, etc).
My question is, how do I make Eclipse use a specific editor within custom JSP tags?
You can try MyEclipse or Aptana Studio. They offer much better editors for web development.
But a much better approach is to put the JS into a different file and reference that with <script src="...">:
You can use a better editor
The browser can cache the JavaScript (instead of downloading it every time with the rest of the page)
You can write tests for the JavaScript (next to impossible when the JS is held hostage in a JSP file).
[EDIT] Eclipse is open source. Download the code for the WTP project, look for the text editor parts and search for "script". In all places that you find, add "sj:script", too.
Have you included the Tag Library Descriptor file in the jsp where you are using the custom tag?
I have a list of plugins for eclipse which enable eclipse to edit JS files:
http://www.delicious.com/powtac/javascript+eclipse
Just go trough the links and see the different descriptions how to install them.
AFAIK, editors are chosen based on file extension, and there's no mechanism to customize this based on particular content inside the file.
I see 2 options
Creating a custom text editor to take into account your custom script tag (probably not worth the effort)
Put your javascript snippet in an external file, use the include directive inside your custom script tag.
<%# include file="javascript.js" %>
Eclipse has a template feature where in you can add specific tag ,which can be made available for all JSP pages.
Ensure you have installed Eclipse WTP ( Web Tools Platform )
1.Open Preferences window [ Select Window > Preferences ]
2.Expand Web Option from the menu, upon which you can see [ CSS Files,HTML Files etc..
3.Select JSP Files
4.Select Editor
5.Select Templates
6.In the corresponding pane , click New and from there rest can be easily done.