I've been playing with this for a couple days now to no avail. I've googled just about every descriptive phrase I can think of and nothing useful has turned up.
I have installed Epiceditor in Codeigniter and I have gotten it to the point that the preview button and full screen buttons 'work' and the css is properly working. The issue is that the preview text(in both the preview button and the full screen side-by-side) does not show the proper formatting (bold, italic, etc.). There are no console errors and I'm out of ideas at this point.
Code:
require(['epiceditor'], function() {
var opts = {
textarea: 'page_text',
basePath: '/css/epiceditor',
autogrow: true
}
var editor = new EpicEditor(opts).load();
});
I had the same issue as you when using EpicEditor with requirejs. It seems that the epiceditor script includes marked at the bottom and it is this that is being injected when require the script. Try this:
require(['epiceditor'], function(marked) {
var opts = {
textarea: 'page_text',
basePath: '/css/epiceditor',
autogrow: true,
parser: marked
}
var editor = new EpicEditor(opts).load();
});
Related
I develop my first firefox extension. My usecase (already sucessfully implemented as a chrome extension):
Inject CSS of a specific page
Default load: contentscript-on.js
On Click icon (icon-on.png / icon-off.png) switch from contentscript-on.js to contentscript-off.js and backward
The contentscript-on.js already works on page load. I´ve searched a lot to find help or an example for my usecase. Any ideas?
Thank you very much!
main.js
var pageMod = require("sdk/page-mod");
var self = require("sdk/self");
pageMod.PageMod({
include: "https://app.example.de/dashboard",
contentScriptFile: [self.data.url("jquery-1.11.0.min.js"), self.data.url("contentscript-on.js")]
});
In my chrome extension, I use a background.js to toggle on / off and switch between the scripts
//toggle = true, because the contenscript-on.js is already loaded on initial loading of the page
var toggle = true;
chrome.browserAction.onClicked.addListener(function(tab) {
toggle = !toggle;
if(toggle){
//change the icon after pushed the icon to On
chrome.browserAction.setIcon({path: "icon-on.png", tabId:tab.id});
//start the content script to hide dashboard
chrome.tabs.executeScript({file:"contentscript-on.js"});
}
else{
//change the icon after pushed the icon to Off
chrome.browserAction.setIcon({path: "icon-off.png", tabId:tab.id});
//start the content script to hide dashboard
chrome.tabs.executeScript({file:"contentscript-off.js"});
}
});
Is there a similar way to this in firefox extensions?
The PageMod constructor has an optional onAttach property which passes a content worker to your function. This worker can be destroyed to remove the scripts from the page
var contentWorker; // Global (or greater scope) variable
// …
onAttach: function(worker) {
contentWorker = worker;
}
Then, in your click listener
var tab = contentWorker.tab;
contentWorker.destroy();
contentWorker = tab.attach( {
contentScriptFile: [self.data.url("jquery-1.11.0.min.js"), self.data.url("contentscript-off.js")]
});
Frankly, it would probably be easier just to attach both and toggle them somehow from within the content script code
As a side note, there's a new toggle button that you can can use that will have an activated/deactivated look that sounds like it would be good for your scenario.
I have done a firefox addon using the Addon Builder. This addon display a panel containing a web page.
The problem I have is that I would like to keep this panel displayed and probably had a close button to hide it. Actually the panel disappear when we click out of the panel.
This is the code I use to make my panel:
var HauteurPopup = 400;
var LargeurPopup = 650;
function getPanel(contentURL){
var popupPanel = require("panel").Panel({
width:LargeurPopup,
height:HauteurPopup,
contentURL: contentURL
});
return popupPanel;
}
var btn = require("toolbarbutton").ToolbarButton({
id: 'propelink-button',
label: 'Propulesez ce lien!',
image: 'https://www.users.prplk.com/img/mini-logo-propel-bar.jpg',
onCommand: function() {
if (typeof(tabs.activeTab._worker) == 'undefined') {
let worker = tabs.activeTab.attach({
contentScript: btnContentScript
});
tabs.activeTab._worker = worker;
}
tabs.activeTab._worker.port.emit("btnContentScript");
var panelPopup = myPanel.getPanel("http://example.com");
panelPopup.show();
}
});
Someone know how to keep this panel displayed and close it adding a button?
Thanks in advance
In xul based extensions there is an option in the creation of the panel to accomplish that (panel.noautohide). In firefox-addon-sdk it seems that it doesn't exist. See 595040 – Add a "isPersistent" attribute for panels
Although it is mentioned that you can do a workaround by editing panel.js, but i never tried to do that, but you may want to give it a try.
I'm using the toolbarbutton library, because the normal widgets would not store their positions if I restart Firefox.
Unfortunately I want to change the icon on runtime. With the widgets I did:
widget.contentURL = "http://127.0.0.1:8082/static/icons/eth_16.png";
With the toolbarbuttons I tried:
Toolbarbutton.image = "http://127.0.0.1:8082/static/icons/eth_16.png";
without any effect. The image seems to be only used when construction the toolbarbutton.
Also tried to destroy and recreate the button with a different icon, but that causes annoying flickering.
Any idea would be appreciated.
I did a quick test and this should work as expected so I'm not sure what issue you're running into here. Here's some example code that works just fine:
var toolbarbutton = require("toolbarbutton");
var timer = require("timer");
var TEST_ICON_M_URL = "http://www.mozilla.org/media/img/favicon.png";
var TEST_ICON_G_URL = "http://www.google.com//images/google_favicon_128.png";
console.log("TEST_ICON_URL", TEST_ICON_M_URL);
var options = {
id: "test-tbb",
label: "TEST BUTTON",
toolbarID: "nav-bar",
image: TEST_ICON_M_URL,
forceMove: true
};
var tbb = toolbarbutton.ToolbarButton(options);
tbb.moveTo(options);
timer.setTimeout(function () {
tbb.image = TEST_ICON_G_URL;
console.log("switched", TEST_ICON_G_URL);
}, 5 * 1000); // 5 seconds
Is there more code you could post? The problem must be somewhere else.
In previous version when inline editing all looking good:
But in new version it is looking like that (i put read border over):
How to fix that?
I am using jQuery 1.6.1, jQueryUI 1.8.13
I also have using the latest jqGrid css file
The reason seems to me the wrong hover effects included in the jqGrid 4.1.0 on the <span> element with the save and cancel icons:
onmouseover=jQuery(this).addClass('ui-state-hover');
onmouseout=jQuery(this).removeClass('ui-state-hover');
see the source code of jquery.fmatter.js.
If I correct understand the problem the adding of 'ui-state-hover' class overwrites the background-position to 50% 50%, so the icons for the disk (ui-icon-disk) or the cancel icon (ui-icon-cancel) will not more displayed. Instead of that the middle of the background image are displayed.
So I suggest just remove the hover effects inside of loadComplete:
loadComplete: function() {
$("div.ui-inline-save > span.ui-icon-disk, div.ui-inline-cancel > span.ui-icon-cancel").each(function() {
this.onmouseover = null;
this.onmouseout = null;
});
}
See the demo.
UPDATED:: I found a better way to fix the problem. First we can defive the functions iconHoverFixed and iconNotHoverFixed as following
var iconHoverFixed = function(e) {
jQuery(this).addClass('ui-state-hover');
jQuery('span',this).removeClass('ui-state-hover');
},
iconNotHoverFixed = function(e) {
jQuery(this).removeClass('ui-state-hover');
};
and then we can fix the hovering problem so:
loadComplete: function() {
$("div.ui-inline-save, div.ui-inline-cancel").each(function() {
this.onmouseover = iconHoverFixed;
this.onmouseout = iconNotHoverFixed;
});
}
See the new demo here or here.
Looks like you need to update the jquerygrid css and the images folder the image is build from an offset inside an image (Sprite) http://www.trirand.com/blog/jqgrid/themes/redmond/images/ui-icons_6da8d5_256x240.png
and in you case it doesn't find the right place
I would like to write a firefox extension. This extension is not a generic extension but work specifically for a domain where I need to highlight specific html components.
How should I do that? I just want the js loaded when the user is browsing a specific domain.
My current overaly.js is basically empty (generated by the Extension Wizard):
var myextension = {
onLoad: function() {
// initialization code
this.initialized = true;
this.strings = document.getElementById("myextension-strings");
},
onMenuItemCommand: function(e) {
var promptService = Components.classes["#mozilla.org/embedcomp/prompt-service;1"]
.getService(Components.interfaces.nsIPromptService);
promptService.alert(window, this.strings.getString("helloMessageTitle"),
this.strings.getString("helloMessage"));
},
onToolbarButtonCommand: function(e) {
// just reuse the function above. you can change this, obviously!
myextension.onMenuItemCommand(e);
}
};
window.addEventListener("load", myextension.onLoad, false);
And my ff-overlay.xul is:
myextension.onFirefoxLoad = function(event) {
document.getElementById("contentAreaContextMenu")
.addEventListener("popupshowing", function (e){ myextension.showFirefoxContextMenu(e); }, false);
};
myextension.showFirefoxContextMenu = function(event) {
// show or hide the menuitem based on what the context menu is on
document.getElementById("context-myextension").hidden = gContextMenu.onImage;
};
window.addEventListener("load", myextension.onFirefoxLoad, false);
I was thinking to go neanderthal and do a check inside myextension.onFirefoxLoad to see if the currentpage is the one I want but that requires the user to click the proper item on the context menu.
I'm not totally following what you have because both of those look like JS files, not XUL files. But what you probably want to do is listen for the load event coming from the web pages that are loaded. Then, in your event loader, just look at each page that loads and see whether it's coming from the specific domain you want.
A great (though not always quite as easy as it sounds) way to find out how to do something in a Firefox addon is to find another addon that does something similar. DOM Inspector and Inspect Context are your friends! The first such addon that comes to mind in this case is WikiTrust so you could try looking at that one to see if it gives you any inspiration.