I added 'Enhanced image',image2 plugin to my ckeditor and i have been trying to configure it to when the user chooses one image in file browser to automatically upload to server without the need for the user to click in send to server button. Does anyone know how to achieve that?
Thank you
I finally figure it out, although i`m sure that must exist a better way of doing this.
To upload image without the need of send to server button i had first to override CKEDITOR.ui.dialog.file.prototype.reset
CKEDITOR.ui.dialog.file.prototype.reset = function() {
//code
.$.write(['...',<input onchange="this.form.submit()" .../>, '...'])
//code
}
And then in my config.js dialogDefinition
var dialog = dialogDefinition.dialog;
var uploadButton = uploadTab.get('uploadButton');
if ( dialogName === 'image2') {
var filebrowserSe = dialog.getParentEditor()._.filebrowserSe = uploadButton;
filebrowserSe.getDialog = function() {return dialog};
uploadTab.remove('uploadButton');
//code ...
}
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.
So I'm using a PHP API to interact with, to build a forum using MooTools. I can get comments from my database and add comments, but I want to inject an edit button to coincide with each comment.
I inject the comments using:
function domReady() {
$('newComment').addEvent('submit', addComment);
}
function addComment(e){
e.stop();
var req = new Request({
url:'control.php?action=insertPost',
onSuccess:addajaxSuccess
}).post(this);
}
function addajaxSuccess(idNo) {
new Element('span',{
'text':'Post successful.'
}).inject($(newComment));
$('commentList').empty();
domReady();
}
I want to attach an edit button to each comment injected, and add an event listener on the button to change the comment into a textarea for editting, with an update button.
Any ideas?
If you want to bind a global events to a dynamic content you have better look into Element Delegation In mootools.
Basically it's give you the ability to bind event to some container and "listen" to events of that children container base on selectors. I made you a little example here:
http://jsfiddle.net/xwpmv/
mainContainer.addEvents({
'click:relay(.mt-btn)': function (event, target) {
var btn = target;
if(btn.get('value') == 'Edit'){
btn.set('value','Done Editing');
var content = btn.getPrevious();
content.setStyle('display','none');
var textarea = new Element('textarea').set('text',content.get('text'));
textarea.inject(btn,'before');
}
else{
btn.set('value','Edit');
var textarea = btn.getPrevious();
var new_value = textarea.get('value');
textarea.destroy();
var content = btn.getPrevious();
content.set('text',new_value);
content.setStyle('display','block');
}
}
});
Here you can see the mainContainer listen to the click event of every element who has mt-btn class (the buttons)
You have several errors in your code but maybe it is just an example so I didn't relate to it.
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 need to be able to make the URL input field in the Link Dialog window readonly or disable it. The field gets populated when the user selects a file from the server.
Another user posted this link as a solution, http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.ui.dialog.uiElement.html#disable but there is no example and I can't figure out how to implement it.
In the onLoad handler of the dialog you can disable it this way:
this.getContentElement("info", "url").disable();
this is what I ended up doing. I wrote it in my js file instead of the plugin file, but I dont think that would make a difference. I am using inline ckeditor version 4.0.2
CKEDITOR.on('dialogDefinition', function(event) {
var dialogName = event.data.name;
var dialogDefinition = event.data.definition;
//some code here
if(dialogName == 'flash'){ // flash dialog box name
//some code here
dialogDefinition.onShow = function () {
this.getContentElement("info","width").disable(); // info is the name of the tab and width is the id of the element inside the tab
this.getContentElement("info","height").disable();
}
}
});
You can disable url field by just one line
CKEDITOR.dialog.getCurrent().getContentElement('info','txtUrl').disable()
I got it. I added this.getInputElement().setAttribute( 'readOnly', true ); to the onload funciton in ckeditor\plugins\links\dialogs\link.js. Before I was adding it to ckeditor\_source\plugins\links\dialogs\link.js. I'd still like an example of how to use the CKEDITOR.ui.dialog.uiElement disable feature, if anyone has one.
I'm using this jquery plugin ajaxFileupload in our project. My design is I have a file upload control and set the opacity to 0.01 and then using an anchor link, I trigger the file upload control click event. This works fine until I try to click the anchor link the second time which it doesn't open the file dialog box.
Here is my code.
$(".btnUpload").live("click", function () {
$(".lblUploadError").text("");
$(".fleAttachment").trigger("click");
});
$(".fleAttachment").change(function () {
var reg = /^.*\.(jpg|JPG|gif|GIF|jpeg|JPEG)$/;
var vals = $(this).val(),
val = vals.length ? vals.split("\\").pop() : "";
if (reg.test(vals) == false) {
$(".lblUploadError").text("Invalid Image Type. We only accept .GIF or .JPG");
} else {
ajaxFileUpload();
eval($(".btnRefreshAttachmentList").attr("href"));
}
});
I don't see any error in the console so it makes it difficult to debug it.
Change
$(".fleAttachment").change(function() {
to
$(".fleAttachment").live('change', function() {
$( document ).on( "click", ".fleAttachment", function() {
//--> Logic Here // jQuery 1.7+
});
this.value="";
at the end should work