Integrating CKFinder with InnovaStudio WYSIWYG Editor - javascript

I use InnovaStudio WYSIWYG Editor, and I am trying to replace InnovaStudio's Asset Manager with CKFinder. There's a line in the editor configuration for what URL to use for the asset manager. I have pointed it at CKFinder. The part I can't get to work is getting the field to populate with the double-clicked file's path from CKFinder.
It appears to use the 'func' parameter to specify the callback function. The URL I'm calling is: /common/ckfinder/ckfinder.html?action=js&func=setAssetValue
The InnovaStudio WYSIWYG Editor provides the setAssetValue(v) callback function for setting the field value. The v parameter should hold the URL.
CKFinder pops up as expected when it's invoked, but neither double-clicking the thumbnails nor using the "select" option in the context menu works. The normal/expected behavior is that CKFinder closes and the target field is populated with the URL for the selected asset.
Additional Info: The InnovaStudio WYSIWYG Editor has a "popup" for adding an image or flash file to the content. This pop-up is in an iframe. When it calls CKFinder (or it's own asset manager), that is also in an iframe. It appears that CKFinder is looking in the scope of the main window rather than the image/flash iframe that actually contains the field that needs to be populated.

(Sort of) Solution
I discovered, by digging through the DOM with Firebug, that InnovaStudio creates an ISWindow object where it places references to the windows that it spawns. I modified my callback function to loop over that object and call the setAssetValue() function for the appropriate iframe. This worked, but CKEditor still did not close itself. I assume that's because it didn't "know" how to close the iframe that it was inside. Is there a way to tell CKFinder how to close the window it's inside of? I can envision other cases where using an iframe would be useful.
I would prefer to have CKFinder to use the iframe display, but I finally got things working using the standard CKFinder popup.
Editor config line: oEdit1.cmdAssetManager = "parent.BrowseServerIS();";
Supporting functions:
// InnovaStudio WYSIWYG Editor version
function BrowseServerIS()
{
// You can use the "CKFinder" class to render CKFinder in a page:
var finder = new CKFinder();
// The path for the installation of CKFinder (default = "/ckfinder/").
finder.BasePath = '/common/ckfinder/';
// Name of a function which is called when a file is selected in CKFinder.
finder.SelectFunction = SetFileFieldIS;
// Launch CKFinder
finder.Popup();
}
// InnovaStudio WYSIWYG Editor version
function SetFileFieldIS(fileUrl, data)
{
for (var i in ISWindow.objs) {
if ((null != ISWindow.objs[i].rt.frm.contentWindow)
&& ('function' == typeof ISWindow.objs[i].rt.frm.contentWindow.setAssetValue)) {
ISWindow.objs[i].rt.frm.contentWindow.setAssetValue(fileUrl);
}
}
}

Related

set file attribute filesystemobject javascript

I have created a file as part of a script on a network drive and i am trying to make it hidden so that if the script is run again it should be able to see the file and act on the information contained within it but i am having trouble doing this. what i have so far is:
function doesRegisterExist(oFs, Date, newFolder) {
dbEcho("doesRegisterExist() triggered");
sExpectedRegisterFile = newFolder+"\\Register.txt"
if(oFs.FileExists(sExpectedRegisterFile)==false){
newFile = oFs.OpenTextFile(sExpectedRegisterFile,8,true)
newFile.close()
newReg = oFs.GetFile(sExpectedRegisterFile)
dbEcho(newReg.Attributes)
newReg.Attributes = newReg.Attributes+2
}
}
Windows Script Host does not actually produce an error here and the script runs throgh to competion. the only guides i have found online i have been attempting to translate from VBscript with limited success.
variables passed to this function are roughly declared as such
var oFs = new ActiveXObject("Scripting.FileSystemObject")
var Date = "29-12-2017"
var newFolder = "\\\\File-Server\\path\\to\\folder"
I know ActiveX is a dirty word to a lot of people and i should be shot for even thinking about using it but it really is a perfect fit for what i am trying to do.
Please help.
sExpectedRegisterFolder resolves to \\\\File-Server\\path\\to\\folder\\Register which is a folder and not a file.
I get an Error: file not found when I wrap the code into a try/catch block.
I tested the code on a text file as well, and there it works.
So you're either using the wrong method if you want to set the folder to hidden.
Or you forgot to include the path to the text if you want to change a file to hidden.
( Edit: Or if Register is the name of the file, add the filetype .txt ? )
If you change GetFile to GetFolder as described in https://msdn.microsoft.com/en-us/library/6tkce7xa(v=vs.84).aspx
the folder will get hidden correctly.

mozilla firefox extension: creating a javascript library and using it in a HTML page

I created a library in a firefox extension :
./components/main.js
./skin/icon.png
./install.rdf
./chrome.manifest
my main.js would use define a class calling a mozilla TCPScoket ( https://developer.mozilla.org/en-US/docs/Web/API/TCPSocket)
function MYLib() {}
MYLib.prototype.doWork = function(arg1,arg2) { /* do something with TCPScoket */}
How should I use my library on the client side in the HTML ?
I'm looking for something like (?):
<html><head><script>
var mylib = MozillaApiThing.createNewInstance("chrome://myextension/", "MYLib");
....
</script>(...)
chrome or resource (not in restartless) URLs are available as direct URLs (ie you can enter them into address-bar and they show up). Therefore you can use it as a simple script src
<script src="chrome://myextension/components/jsfile.js"></script>
Alternatively, you can read the JS file (ie with XMLHttpRequest or FileUtils.jsm or osfile.jsm) and then insert the content into the page with createElement('script'), textContent and appendChild()
Alternatively, you can try The message manager
Note: Inserted local script into the page will have the content page scope (no access to browser scope API)

Import image in Acrobat using JavaScript (preferred on document-level)

I am going to implement a dynamic legend using JavaScript in Adobe Acrobat.
The document contains a lot of layers. Every layer has an own legend. The origin idea is to implement the legend so, that it contains the images in a dialog box for the visible layers.
I can only hide/show the layers by setting state to false or true (this.getOCGs()[i].state = false;) on document-level.
Question 1: Can I extract data from layer somehow for legend establishing? I think no, as we only have these function on layers: getIntent(), setIntent() and setAction(). Right? Therefore I decided to arrange it so, that all needed icons for every layer are saved in a folder with corresponding names. JavaScript should import the icons and I build the a dialog window with icons of visible Layers and place a text(description for this icon).
I tried all possibilities of image import described here: http://pubhelper.blogspot.com.au/2012/07/astuces-toolbar-icons-et-javascript.html. I got only one way (Convert the icons as hexadecimal strings). This way isn't good, as it is too much work to create with an other tool a hexadecimal string from a images and place it into a javascript code.
Unfortunately, I cannot import image using other methods:(. Since the security settings in Adobe are changed after version 7 or so, it is not possible to use functions like app.newDoc, app.openDoc, even app.getPath On document-level. I decided to implement the import on a folder level using trusted functions like this:
Variant 1:
var importImg = app.trustedFunction(function() {
app.beginPriv();
var myDoc = app.newDoc({
nWidth: 20,
nHeight: 20
});
var img = myDoc.importIcon("icon", "/icon.png", 0);
app.endPriv();
return img; });
var oIcon = importImg();
The settings in Preferences->JavaScript-> JavaScript Security are disabled (Enable menu item JS execution privileges, enable global object security policy)
NotAllowedError: Security settings prevent access to this property or method.
App.newDoc:109:Folder-Level:User:acrobat.js
Variant 2:
var importImg = app.trustedFunction(function() {
var appPath = var phPath = app.getPath({
cCategory: "user",
cFolder: "javascript"
});
try {
app.beginPriv();
var doc = app.openDoc({
cPath: phPath + "/icon.png",
bHidden: true
});
app.endPriv();
} catch (e) {
console.println("Could not open icon file: " + e);
return;
}
var oIcon = util.iconStreamFromIcon(doc.getIcon("icon"));
return oIcon;});
var oIcon = importImg();
Could not open icon file: NotAllowedError: Security settings prevent access to this property or method.
At least it allows the execution of all these functions like app.newDoc, but in the second variant it says, wrong range of content or so. Maybe is here the pdf from an image created false? I just took the image and printed it into a pdf.
I tried all these possibilities with .jpg, .png, .pdf. with different sizes(big images and 20x20), It doesn't work.
Could somebody help me, as I spent a lot of time with trying different possibilities. It would be actually better to implement the main goal described above on document level, is it possible?
Thank you and kind regards,
Alex
Do you have the Console fully activated in Acrobat? If not, do so and look for error messages you get.
The first variant does not work, because myDoc is not defined (unless you have done that before you call the importImg function).
If you want to import the image into the newly created file, you will have to make a reference to the Document Object you create with newDoc(). Actually, that would make the link to myDoc, as in
var myDoc = app.newDoc(1,1)
(are you sure you want to create a document measuring 1x1 pt?)
The next issue with the first variant is a bug in Acrobat, which discards "floating" Icon Objects when saving the document; you'd have to attach the Icon Object to a field to keep it; this field can be hidden, or even on a hidden Template page in the document.

Choose file window in extension firefox

Iam building an extension and i want to take the path of a file from a window popup like windows does . Is something like that to use in an extension in firefox?
You should check out this page on MDN
Creating a file picker
To begin, you need to create a file picker component and initialize it.
var nsIFilePicker = Components.interfaces.nsIFilePicker;
var fp = Components.classes["#mozilla.org/filepicker;1"].createInstance(nsIFilePicker);
fp.init(window, "Select a File", nsIFilePicker.modeOpen);
First, a new file picker object is created and stored in the variable
'fp'. The 'init' function is used to initialize the file picker. This
function takes three arguments, the window that is opening the dialog,
the title of the dialog and the mode. The mode here is modeOpen which
is used for an Open dialog. You can also use modeGetFolder and
modeSave for the other two modes. These modes are constants of the
nsIFilePicker interface.
Getting the selected file
Finally, you can show the dialog by calling the show() function. It
takes no arguments but returns a status code that indicates what the
user selected. Note that the function does not return until the user
has selected a file. The function returns one of three constants:
returnOK - the user selected a file and pressed OK. The file the user
selected will be stored in the file picker's file property.
returnCancel - the user pressed Cancel.
returnReplace - in the save
mode, this return value identifies that the user selected a file to be
replaced. (returnOK will be returned when the user entered the name of
a new file.) You should check the return value and then get the file
object from the file picker using the file property.
var res = fp.show();
if (res != nsIFilePicker.returnCancel){
var thefile = fp.file;
// --- do something with the file here ---
}

FCKeditor Plugin Issues

I am a complete beginner trying to develop for FCKeditor so please bear with me here. I have been tasked with developing a custom plugin that will allow users to browse a specific set of images that the user uploads. Essentially the user first attaches images, then uses the FCKeditor to insert those images.
So I have my plugin directory:
lang
fckplugin.js
img.png (for the toolbar button)
I am looking for some help on strategy for the custom file browser (lets call it mybrowser.asp).
1) Should mybrowser.asp be in the plugin directory? It is dynamic and only applies to one specific area of the site.
2) How should I pass the querystring to mybrowser.asp?
3) Any other recommendations for developing FCKeditor plugins? Any sample plugins that might be helpful to me?
EDIT: The querystring passed to the plugin page will be the exact same as the one on the host page. (This is a very specific plugin that will only be used in one place)
You don't need the lang directory unless you're planning on supporting multiple languages. But even then, I would get the plugin working in one language first.
I would probably put mybrowser.asp in the plugin directory.
Here's some code for fckplugin.js to get you started.
// Register the related command.
// RegisterCommand takes the following arguments: CommandName, DialogCommand
// FCKDialogCommand takes the following arguments: CommandName,
// Dialog Title, Path to HTML file, Width, Height
FCKCommands.RegisterCommand(
'MyBrowser',
new FCKDialogCommand(
'My Browser',
'Select An Image',
FCKPlugins.Items['MyBrowser'].Path + 'mybrowser.asp',
500,
250)
);
// Create the toolbar button.
// FCKToolbarButton takes the following arguments: CommandName, Button Caption
var button = new FCKToolbarButton( 'MyBrowser', 'Select An Image' ) ;
button.IconPath = FCKPlugins.Items['MyBrowser'].Path + 'img.png' ;
FCKToolbarItems.RegisterItem( 'MyBrowser', button ) ;
Edit: I haven't tested this, but you should be able to append the querystring by doing something along these lines.
'Select An Image',
FCKPlugins.Items['MyBrowser'].Path + 'mybrowser.asp' + window.top.location.search,
500,
You might not need to write your own file browser as this functionality is built in. If you check the fckconfig.js file and search for var _FileBrowserLanguage you can specify your server language and it should hopefully use the equivalent file in the editor -> filemanager -> connectors folder.
If you check the docs hopefully that should hopefully keep you on the right track.

Categories

Resources