I have a tinyMCE plugin (for the post/page editor) that I am loading from my Wordpress plugin that needs to have several external javascript files loaded in order for my tinyMCE plugin to work.
In Wordpress 3.3.1 I can just register and enqueue the scripts from the mce_external_plugins filter but any Wordpress version below that doesn't load the scripts.
Anybody have experience in this?
The method that I found to work with my problem is by hooking to after_wp_tiny_mce and then in the callback, calling wp_print_scripts directly. It still handles all the dependencies of the scripts.
Also, because wp_localize_script won't work with this method due to the scripts not being enqueued, I am echoing my objects directly above my calls to wp_print_scripts like this:
<script type="text/javascript">
/* <![CDATA[ */
var MyLocalizedData = {"foo": "barito"};
/* ]]> */
</script>
EDIT :
This fix will only work in Wordpress >= 3.2
Related
I downloaded conversejs 9.1.1 and I am trying to learn the plugin architecture by making my own custom plugin. I looked at the http-auth plugin here to see how to add a plugin.
https://github.com/conversejs/community-plugins/tree/master/packages/http-auth
To install the plugin it directs me to the instructions here:
https://m.conversejs.org/docs/html/plugin_development.html
I understand I have to modify my webpage to whitelist the plugin, but for some reason I can't grok a few things. Here is my awesome plugin which resides in a file called Hello-World.js
import { converse } from "#converse/headless/core";
const plugin = {
initialize() {
console.error("Hello World!")
}
}
if (typeof converse === "undefined") {
window.addEventListener(
'converse-loaded',
() => converse.plugins.add("Hello-World", plugin)
);
} else {
converse.plugins.add("Hello-World", plugin);
}
The htpp-auth.js has no imports, but WebStorm was complaining that converse was unknown so I had to add the import. Why does the http-auth plugin not have to do that?
I am not sure where the plugin code is supposed to live. I added Hello-World under src/plugins/Hello-World. Is this correct?
Maybe related to above, but to get the plugin to actually run in addition to whitelisting it in my webpage I had to modify converse.js and add import "./plugins/Hello-World/Hello-World.js" which makes me think I am missing something obvious as I would think adding a plugin shouldn't require you to change the base code.
If it matters I am testing my plugin by running make serve in the conversejs directory and directing my web-browser (Chrome) to localhost:8000/fullscreen.html
Thanks, Wray
The htpp-auth.js has no imports, but WebStorm was complaining that converse was unknown so I had to add the import. Why does the http-auth plugin not have to do that?
converse is available as a global once converse.js has been loaded via the <script> tag.
That's why there's the if (typeof converse === "undefined") { check at the end of the plugin. It waits for converse.js to be loaded if converse isn't yet defined.
I am not sure where the plugin code is supposed to live. I added Hello-World under src/plugins/Hello-World. Is this correct?
Most community plugins are developed in such a way that they're loaded separately via <script> tags. If you do it like that, it doesn't matter where they live.
Maybe related to above, but to get the plugin to actually run in addition to whitelisting it in my webpage I had to modify converse.js and add import "./plugins/Hello-World/Hello-World.js" which makes me think I am missing something obvious as I would think adding a plugin shouldn't require you to change the base code.
You can do it like that if you want to include your plugin inside a custom build of Converse, then you can also import stuff from converse.
The alternative is to load your plugin separately via a <script> tag, but then you can't import stuff and have to use the converse global and the closured _converse object that is passed to your plugin's initialize function.
Recently sharethis plugin is updated. i have successfully installed and it was working fine. but i am unable to load the buttons on ajax calls.
I have added this script
<script type="text/javascript" src="//platform-api.sharethis.com/js/sharethis.js#property=propertystring&product=inline-share-buttons"></script>
Old code using the following
stButtons.locateElements();
is not working any more.
Please note i am using custom share button.
I actually found the solution for this, at least it worked for me. Run this after the template has loaded:
__sharethis__.initialize()
New at Chrome Apps. Using cca and CADT for mobile development.
In the following code, why is jQuery not immediately available? Is there some async magic being auto-applied?
I don't have this behavior in a vanilla cordova project.
<script type="text/javascript" src="js/jquery-2.1.1.min.js"></script>
<script type="text/javascript">
setTimeout(function()
{
console.log($); // $ is jQuery
}, 1000);
console.log($); // $ is undefined
</script>
Our current bootstrap code will not load the html of your chrome app windows in a way you typically expect from a browser. The reasons are long, but the short story is that we have to bootstrap to set up the environment, then inject the content around the bootstrap.
One of the consequences is that scripts do not block dom content loading. I guess another consequence is that inline script execution is not delayed until preceding scripts have loaded.
We may be able to fix this bug, I'll take a look. I've filed: https://github.com/MobileChromeApps/mobile-chrome-apps/issues/482
Thanks for reporting the issue!
On my gwt project. i have a script that call the dictionary:
<script type="text/javascript" src=conf/iw_dictionary.js></script>
instead of writing this script element in the html file. i want to inject it into the html from the entry point, on the module load.
how can i do it?
Use com.google.gwt.core.client.ScriptInjector, since it was created specifically for stuff like this
ScriptInjector.fromUrl("conf/iw_dictionary.js").setCallback(
new Callback<Void, Exception>() {
public void onFailure(Exception reason) {
Window.alert("Script load failed.");
}
public void onSuccess(Void result) {
Window.alert("Script load success.");
}
}).inject();
Basically you inject the script element in your onModuleLoad():
Element head = Document.get().getElementsByTagName("head").getItem(0);
ScriptElement sce = Document.get().createScriptElement();
sce.setType("text/javascript");
sce.setSrc("conf/iw_dictionary.js");
head.appendChild(sce);
The browser will automatically load it as soon as it's injected.
You could simply add a <script> element in your *.gwt.xml file.
<script src='conf/iw_dictionary.js' />
onModuleLoad will only be called once the script is loaded (as if you had it in your html page).
The answers form jusio, Dom and Thomas Broyer are all valid here. In my particular case, I was looking to inject a series of polyfill scripts into GWT for some IE8 support we needed when running native JS code. The polyfill scripts needed to be available to the GWT iframe's window context - NOT the host page. To do that, using ScriptInjector was the correct approach as it attaches the script at that level. You can make ScriptInjector install the scripts to a host window by using setWindow(TOP_WINDOW). Adding scripts with the <script> tag in my *.gwt.xml file seemed to be attaching to the host window as did using #Dom's approach.
How to use Jquery libraries or how to use fancy box using JQuery.
Generally speaking...
Most jQuery plugins are used merely by referencing the plugin source file after the jQuery source, and then calling the plugin method on a selector:
$("a.something").plugin();
This will vary from plugin to plugin, so be sure to consult the relevant documentation. Some plugins will accept arguments in JSON form:
$("a.something").plugin({ 'foo':'bar', 'fizz':'buzz' });
Again, consult the relevant documentation.
Fancybox, specifically...
You can find the fancybox documentation online at http://fancybox.net/howto where they give great details about how to implement it in your project. They finish off their how-to with the following example:
$(document).ready(function() {
/* This is basic - uses default settings */
$("a#single_image").fancybox();
/* Using custom settings */
$("a#inline").fancybox({ 'hideOnContentClick':true });
$("a.group").fancybox({ 'speedIn':600, 'speedOut':200, 'overlayShow':false });
});
Note the similarities between this, and the aforementioned general rules.