I have a Ruby on Rails application with normally integrated TinyMCE (JS not the gem used)
Now I want to integrate a filemanager, which one can I use for this? Upload is not required, I only want to browse trough my picture galary.
Written my own File Manager.
To access the Filemanager from TinyMCE you need to set up the button correctly
in TinyMCE options you have to add this:
file_browser_callback: function (field_name, url, type, win) {
tinymce.activeEditor.windowManager.open({
title: "My file browser",
url: "/uploads/filechooser/",
width: 850,
height: 600
}, {
oninsert: function (url) {
win.document.getElementById(field_name).value = url;
}
});
}
in URL you have to specify the path to your own filechooser.
and in filechooser you need this:
$(".filechooser").click(function () {
top.tinymce.activeEditor.windowManager.getParams().oninsert($(this).parent().prev().val());
top.tinymce.activeEditor.windowManager.close();
});
to return the selected image or file back to TinyMCE
Related
Hey I have added jsPdf into my HTML to download the HTML as a PDF, but in IE 9 it doesn't works. It is not downloading any PDF so I searched about this and got the I have to enable the IE shim for this so can you help me out that how I can be able to do that, I have tried to use Downloadify but didn't understand how to pass full HTML file and get the image of that into PDF.
These are the steps, but the support for downloadify is poor.
Add these script tags to the top of your page (changing the path as appropriate to the files in the lib directory of jspdf):
<script src="./js/jspdf/libs/Downloadify/js/downloadify.min.js"></script>
<script src="./js/jspdf/libs/Downloadify/js/swfobject.js"></script>
add a <div id="downloadify"> in your dom. This div should be empty.
Next, add a script tag to the bottom of your page that will run after the DOM has been populated. This script will generate a button in the '#downloadify' div. Put this inside of the script tag:
Downloadify.create('downloadify',{ // this first argument id a dom element id. this is how it knows where to populate the flash button it's creating.
filename: "afilename.pdf",
data: function(){
// generate your pdf here.
var pdf = new jsPDF;
// various other jspdf commands here
return pdf.output();
},
onComplete: function(){
alert('Your File Has Been Saved!');
},
onCancel: function(){
alert('You have cancelled the saving of this file.');
},
onError: function(){
alert('You must put something in the File Contents or there will be nothing to save!');
},
swf: './js/jspdf/libs/Downloadify/media/downloadify.swf', // make sure this links properly to your file as well.
downloadImage: './js/jspdf/libs/Downloadify/images/download.png', // this is the link to the image of the button itself. An ugly default is included. If you want to style the button, you have to create a sprite image of the same kind.
width: 100, // width of the button
height: 30, // 1/4 height of the button image (which has four states present)
transparent: true, // seems to do nothing, set to true or false.
append: false // have not figured out what this does.
});
I'm using Angular-gettext to extract strings from .html and .js files for multi-language translation using Gruntfile.js:
grunt.initConfig({
nggettext_extract: {
pot: {
files: {
'po/template.pot': ['**/*.html', '**/*.cshtml', '**/controller.caseload.js']
}
},
}
But when I try to pull from a .cshtml file, it is not being extracted.
I need to extract from my Header.cshtml file because I am using it as my Layout for my angular app. The layout basically displays a header bar at the top of every page that contains user information (Profile, Preferences, Logout, etc.).
When I try to add a line like <div translate>Preferences<div> to my Header.cshtml file, it doesn't extract into my .pot file. But if I add that same line to my index.html file, it extracts correctly and I am then able to define a translation for it.
Is there a good way to do this with angular-gettext for .cshtml files?
Try to add this code to your option section.
options: {
extensions: {
htm: 'html',
html: 'html',
php: 'html',
phtml: 'html',
tml: 'html',
js: 'js',
cshtml: 'html'
}
Maybe it's trying to parse your template as a Javascript by default.
I am using highcharts and Ruby on Rails to creating chart. I want to save graph as server automatically. Following code download image automatically on download folder with name as chart.png
events: {
load: function () {
var ch = this;
setTimeout(function(){
ch.exportChart();
});
}
}
I want to save grph as /asset/image folder with name today_Report.png
I don't think you can force user to save anything in folder you want to. That's about path, now about name for file, check this, example:
chart.exportChart({ "filename": "today_Report" });
I have a question regarding direct-image-upload from Cloudinary. I could set this up in a rails app using simple-form and <% = f.cl_image_upload (: file)%> but after I select the file, it start uploading. I don't like this approach and I want that upload start just after commit the form. Is it possible? I worry about having file in Cloudinary server which does not have a corresponding id in my database.
The default implementation indeed automatically uploads a file once selected. Most users don't bother with deleting accidentally uploaded images as they don't take a lot of extra storage. However, if you wish not to upload the image automatically on selection, you can set the autoUpload to false in the fileupload call. For example:
$(document).ready(function() {
$('.cloudinary-fileupload').fileupload({
autoUpload: false
});
});
I think you can help me, Actually, I have this script...
<script>
$(document).ready(function() {
// Cloudinary jQuery integration library uses jQuery File Upload widget
// (see http://blueimp.github.io/jQuery-File-Upload/).
// Any file input field with cloudinary-fileupload class is automatically
// wrapped using the File Upload widget and configured for Cloudinary uploads.
// You can further customize the configuration using .fileupload method
// as we do below.
$(".cloudinary-fileupload")
.fileupload({
// Uncomment the following lines to enable client side image resizing and valiation.
// Make sure cloudinary/processing is included the js file
disableImageMetaDataLoad: true,
disableImageResize: false,
imageMaxWidth: 800,
imageMaxHeight: 800,
acceptFileTypes: /(\.|\/)(gif|jpe?g|png|bmp|ico)$/i,
maxFileSize: 20000000, // 20MB
dropZone: "#direct_upload",
start: function (e) {
$(".status").text("Starting upload...");
},
progress: function (e, data) {
$(".status").text("Uploading... " + Math.round((data.loaded * 100.0) / data.total) + "%");
},
fail: function (e, data) {
$(".status").text("Upload failed");
}
})
.off("cloudinarydone").on("cloudinarydone", function (e, data) {
$(".status").text("");
$(".preview").html(
$.cloudinary.image(data.result.public_id, {
format: data.result.format, width: 150, height: 100, crop: "limit"
})
);
});
});
</script>
I'm beginning with javascript. This script above is working fine, but it just show me the preview after upload it. I don't like this approach because, if user change the preview image, I will have one file upload to Cloudinary without relative register in my db. Will be great if is possible show the preview and just upload after the user press submit in the form.
Note: I hope you understand me, I'm from Brazil and I don't write in english very well.
I am using the jquery-ui version of Blueimp upload and I like how I can format a table and display files that were just uploaded. But I'd like to use it as a file manager as well so I want to preload existing files and display than as if they were just uploaded. How can I do that? A sample link to where someone else has addressed this would suffice. BTW, I am uploading several different file types, not just images.
Thanks!
Or without an ajax call:
Prepare array containing details of existing files, e.g:
var files = [
{
"name":"fileName.jpg",
"size":775702,
"type":"image/jpeg",
"url":"http://mydomain.com/files/fileName.jpg",
"deleteUrl":"http://mydomain.com/files/fileName.jpg",
"deleteType":"DELETE"
},
{
"name":"file2.jpg",
"size":68222,
"type":"image/jpeg",
"url":"http://mydomain.com/files/file2.jpg",
"deleteUrl":"http://mydomain.com/files/file2.jpg",
"deleteType":"DELETE"
}
];
Call done callback
var $form = $('#fileupload');
// Init fileuploader if not initialized
// $form.fileupload();
$form.fileupload('option', 'done').call($form, $.Event('done'), {result: {files: files}});
I also had the same problem. It is not magic how it works. I recommend to examine the UploadHandler.php file. Then you will be able to modify this plugin accordind to your needs.
The code above in your second post is just an ajax call to the uploader script (by default index.php in server/php/ folder). The call method is set to "get" by default in $.ajax object.
Open the UploadHandler.php file and go to the class method "initialize(...)". You will see how the call with "get" handled. UploadHandler calls the class method this->get(.:.) to prepare and send the list of existing files. If you use other upload directory, you need pass a parameter to the UploadHänder. Simply chage the url property in the $.ajax object like :
url: $('#fileupload').fileupload('option', 'url')+'?otherDir='+myDir,
then you should initialize the option property of the UploadHandler before you create a new UploadHandler object like this:
$otherDir = trim($_REQUEST['otherDir']);
$otherDir_url = [anyURL] .'/'.$otherDir;//so that the files can be downloaded by clicking on the link
$options = array(
'upload_dir'=> $otherDir,
'upload_url'=> $otherDir_url,
);
$upload_handler = new UploadHandler($options);
Found the code in the main js file... It wasn't obvious how it worked. Got it working just fine.
// Load existing files:
$.ajax({
url: $('#fileupload').fileupload('option', 'url'),
dataType: 'json',
context: $('#fileupload')[0]
}).done(function (result) {
$(this).fileupload('option', 'done').call(this, null, {result: result});
});
If any of you looking at this is doing it in .NET, find this: (for me it is in application.js
For a fairly recent version, there is a function
// Load existing files:
$.getJSON($('#fileupload form').prop('action'), function(files) {
files = somethingelse;
var fu = $('#fileupload').data('fileupload');
fu._adjustMaxNumberOfFiles(-files.length);
fu._renderDownload(files)
.appendTo($('#fileupload .files'))
.fadeIn(function() {
// Fix for IE7 and lower:
$(this).show();
});
});
Inside the application.js
I'm doing it for .NET though, and actually needed this gone.
Then set your somethingelse to either your files or "" depending on what you want to show. If you remove the line files = somethingelse then it will preload all files from the folder.