I use pluploadQueue to upload files which all the function could work well except the showing, I think maybe it's due to style confict. I want to know, does anyone have meet this issue before that?
using MVC + bootstrap modal + bootstrap dialog + plupload Queue
I can't upload picture, how to get reputaton?
var uploader1 = $("#uploader1").pluploadQueue({
// General settings
runtimes: 'html5,silverlight,flash,html4',
url: '#Url.Action("PLUpload", "Document")' + '?hasModification=true',
chunk_size: '2mb',
//Allow multiple files
max_file_count: 10,
// Specify what files to browse for
filters: {
// Maximum file size
max_file_size: '20mb',
// Specify what files to browse for
mime_types: [
{ title: "Allowed files", extensions: "#Model.PLUploadAllowedExtensions" }
]
},
// Rename files by clicking on their titles
rename: true,
// Sort files
sortable: true,
// Enable ability to drag'n'drop files onto the widget (currently only HTML5 supports that)
dragdrop: true,
//// Views to activate
views: {
list: true,
thumbs: false, // Show thumbs
active: 'list'
},
init: {
PostInit: function () {
// Called after initialization is finished and internal event handlers bound. http://www.plupload.com/examples/events
// The uploader must in html4 only mode be initialized fully before it's hidden: http://stackoverflow.com/questions/11898082/plupload-html4-add-files-dialog-not-triggering-in-ie
// Prepare uploader
if ('#Model.HasUploadFiles' == 'True') {
$("#hasChanged").attr('value', true);
$("#uploader1").show();
} else {
$("#uploader1").hide();
}
//// Force resize function is not working. this is the fix for window size
//$('#formID').css("overflow", "hidden");
},
},
// Flash settings
flash_swf_url: '#Url.Content("~/Scripts/plupload/Moxie.swf")',
// Silverlight settings
silverlight_xap_url: '#Url.Content("~/Scripts/plupload/Moxie.xap")'
});
Related
I am launching a wordpress based website which has a custom wordpress open_media window. When I am adding media from iPhone (in Chrome or Safari), I am able to upload pictures from my photo library but they do not show up immediately for use. I get no errors. To find the photo I have to exit out of the media window and refresh my browser then reenter the open media window and the picture will be there.
Has anyone experienced this problem?
function open_media_window() {
var upload = "";
$post_div = $(this).closest('.bizimg-select');
if (this.window === undefined) {
if($(this).hasClass('bizimg-select')){
upload = "bizimg";
}
if($(this).hasClass('vcard-file')){
upload = "vcard";
}
if(upload=='bizimg'||upload==""){
this.window = wp.media({
title: 'Upload my Bizcard Bizimg',
library: {type: 'image/*'},
multiple: false,
button: {text: 'Insert'}
});
}
if((upload=='vcard')){
this.window = wp.media({
title: 'Upload my Bizcard vCard',
library: {type: 'text/x-vcard'},
multiple: false,
button: {text: 'Insert'}
});
}
var self = this;
this.window.on('select', function() {
var files = self.window.state().get('selection').toArray();
var first = files[0].toJSON();
if(upload=='bizimg'){
//do some stuff here
}
if(upload=='vcard'){
//do a bunch of stuff here
}
});
}
this.window.open();
return false;
}
I was mistaken that this issue was restricted to mobile connections only. After much digging and trying to learn more about js backbone and wordpress wp.media (which remains relatively undocumented, by the way), I did figure it out. Using 'image' instead of 'image/*' in the library options allowed the upload to load into the media library screen. 'image/*' was the problem. See below the options that worked for me.
wp.media({
title: 'Upload my Bizcard Bizimg',
library: {type: 'image'},
multiple: false,
button: {text: 'Insert'}
});
I want to use dropbox to upload files on my cordova app based on meteor i.e., user will be given option if he wants to upload file using dropbox if user click on the button then inappbrowser should open from where user will be authenticated and can upload file.
I am using below script
<script type="text/javascript" src="https://www.dropbox.com/static/api/2/dropins.js" id="id_dropbox" data-app-key="xxxxxxxxxxx"></script>
This is the code
e.preventDefault();
Dropbox.choose({
linkType: "direct",
multiselect: false,
extensions: ['.doc'],
success: function(files) {
console.log("files ", files[0]);
if(files[0]['bytes']<1000000){
GetBlobDataDropbox(files) //function to upload file
}else{
alert('Size should be less than 1 mb')
}
},
error:function(error){console.log(error)},
cancel: function() {}
});
This is giving me below error.
maximum call stack size exceded.
Please tell how to resolve it.
This is the template code around my code. I am not using helper on this template.
Template.AttachResume.events({
'click #dropbox' : function(e){
console.log('dropbox123 ',Dropbox)
e.preventDefault();
Dropbox.choose({
linkType: "direct",
multiselect: false,
extensions: ['.doc', '.docx', '.pdf', '.rtf', '.txt', '.odt'],
success: function(files) {
console.log("files ", files[0]);
if(files[0]['bytes']<1000000){
GetBlobDataDropbox(files)
}else{
alert('Size should be less than 1 mb')
}
},
error:function(error){console.log(error)},
cancel: function() {}
});
},
})
I am new to the tinymce. I have been trying to figure out all of the attributes I need to use to create decent looking dialog that the user fills out and create shortcode output. In the code example below the label and the textbox are butted against each other with no margin or padding and any trailing spaces in the label text are trimmed, this is just one change that I would like to make. I have looked at the documentation to tinymce and all I find are simple brief code examples.
My Question 1: Where can I find the formal full documentation of this windowManager.open method and all of the possible attributes and methods associated with it?
My Question 2&3: Are these attribute actually native javascript? If so where can I find the formal full documentation to it?
Thanks for any help you can give me to retrieve the documentation or possibly formatting with a css sytle sheet (w/.mce-widget or .mce-textbox) and where and how to register this style sheet in Wordpress.
(function() {
tinymce.create("tinymce.plugins.youtube_plugin", {
//url argument holds the absolute url of our plugin directory
init : function(ed, url) {
alert('in youtube');
//add new button
ed.addButton("youtube_button", {
title : "Youtube Video Responsive Embed",
cmd : "youtube_command",
image : "https://cdn0.iconfinder.com/data/icons/social-flat-rounded-rects/512/youtube_v2-32.png"
});
//button functionality.
ed.addCommand("youtube_command", function() {
//alert('hello youtube');
ed.windowManager.open({
title: "YouTube Video Settings", // The title of the dialog window.
//file : url + '/../html/youtube.html',
width : 800,
height : 300,
inline : 1,
body: [{
type: 'container',
//label : 'flow',
//layout: 'flow',
items: [
{type: 'label', text: 'Youtube ServerPath:'},
{type: 'textbox', size: '80', name: 'title', value: 'http://www.youtube.com/embed/'},
//{type: 'label', text: 'and two labels'}
]
}],
buttons: [{
text: 'Submit',
onclick: 'submit'
}, {
text: 'Cancel',
onclick: 'close'
}],
onsubmit: function(e) {
//form = $('#youtube_plugin_id iframe').contents().find('form');
alert('hello');
ed.insertContent('Title: ' + e.data.title);
}
});
//var selected_text = ed.selection.getContent();
// var return_text = "<span style='color: green'>" + selected_text + "</span>";
//ed.execCommand("mceInsertContent", 0, return_text);
});
} // end init
}); // end tinymce.create
tinymce.PluginManager.add("youtube_button_plugin", tinymce.plugins.youtube_plugin);
})();
Although I didn't find any formal documentation to create a nice looking mce dialog box specifically, I did figure out how to format the dialog title and then embed an external html file that you can add a link tag to a css style sheet and the sky is the limit.
Here is the JavaScript code for the mce, it's up to you to create the external html and css files.
(function($) {
/**
This tinymce plugin provides the editor button and the modal dialog used to embed.
*/
// Extract data stored in the global namespace in tinymce-dev-starter.php.
var passed_data = lgrriw_data;
var php_version = passed_data.php_version;
var valid_domains = passed_data.valid_domains;
var dialogTitle = 'My Dialog Title';
// Define the TinyMCE plugin and setup the button.
// The last property in the first tinymce.create paramenter below must be the same
// as the plugin you defined in tinymce-dev-starter.php. In this case, it is
// lgrriw_plugin. If we called it my_cool_plugin, the first parameter would change
// to 'tinymce.plugins.my_cool_plugin'.
tinymce.create('tinymce.plugins.lgrriw_plugin', {
init: function(editor, url) {
/**
* The editor parameter contains the TinyMCE editor instance. The url
* parameter contains the absolute url to the directory containing the
* TinyMCE plugin file (this file's directory).
*
* We will be using editor to talk to the TinyMCE instance. And we
* will be using url to tell TinyMCE where files are (e.g. button
* images).
*/
// Specify button properties and commands.
// The first parameter of editor.addButton must be the button ID
// given in tinymce-dev-starter.php. In this case, it is lgrriw_button.
editor.addButton('lgrriw_button', {
title: dialogTitle, // Tooltip when hovering over button.
image: url + '/../../assets/tinymce-button_32.png', // The image for the button.
cmd: 'lgrriw_command' // The editor command to execute on button click.
});
// Define the "command" executed on button click.
editor.addCommand('lgrriw_command', function() {
editor.windowManager.open(
{
title: dialogTitle, // The title of the dialog window.
file: url + '/../html/tinymce_dialog.html', // The HTML file with the dialog contents links to css style sheet(s).
width: 810, // The width of the dialog
height: 505, // The height of the dialog
inline: 1 // Whether to use modal dialog instead of separate browser window.
},
// Parameters and arguments we want available to the window.
{
editor: editor,
jquery: $,
valid_domains: valid_domains
}
);
$('.mce-title').each(function(index,item){
// Iterate through the mce titles until you find
// the dialog for this dialog before formatting, otherwise
// the formatting will change the Wordpress
// Theme globally. Be Careful!
if($(item).text() == dialogTitle){
// Format the dialog title using css
$(item).css('text-align', 'center');
$(item).css('color', '#336999');
$(item).css('background-color', '#add9ff');
}
});
});
}
});
// Add the plugin to TinyMCE
// Documentation: http://www.tinymce.com/wiki.php/api4:method.tinymce.AddOnManager.add
tinymce.PluginManager.add('lgrriw_plugin', tinymce.plugins.lgrriw_plugin);
})(jQuery);
I'm building a tinymce button plugin for the Wordpress (4) editor. The popup window that my button opens displays a form with several fields. One of them is for selecting an image inside the WP media library. I can't figure how to achieve this.
If that's not possible, what would be the best way to allow the user to select an image stored in the WP media library from a tinymce plugin popup window ?
FYI, the tinymce plugin inserts a shortcode with an image src as an attribute.
thanks !
I had the same problem just now and found the solution so I'm sharing it here. I hope it's not too late.
First to be able to use WP Add Media button you would have to enqueue the needed script. This is easy, just call the wp_enqueue_media() function like so:
add_action('admin_enqueue_scripts', 'enqueue_scripts_styles_admin');
function enqueue_scripts_styles_admin(){
wp_enqueue_media();
}
This call ensures you have the needed libraries to use the WP Media button.
Of course you should also have the HTML elements to hold the uploaded/selected media file URL, something like this:
<input type="text" class="selected_image" />
<input type="button" class="upload_image_button" value="Upload Image">
The first text field will hold the URL of the media file while the second is a button to open the media popup window itself.
Then in your jscript, you'd have something like this:
var custom_uploader;
$('.upload_image_button').click(function(e) {
e.preventDefault();
var $upload_button = $(this);
//Extend the wp.media object
custom_uploader = wp.media.frames.file_frame = wp.media({
title: 'Choose Image',
button: {
text: 'Choose Image'
},
multiple: false
});
//When a file is selected, grab the URL and set it as the text field's value
custom_uploader.on('select', function() {
var attachment = custom_uploader.state().get('selection').first().toJSON();
$upload_button.siblings('input[type="text"]').val(attachment.url);
});
//Open the uploader dialog
custom_uploader.open();
});
Now I'm not going to explain every line because it's not that hard to understand. The most important part is the one that uses the wp object to make all these to work.
The tricky part is making all these work on a TinyMCE popup(which is the problem I faced). I've searched hi and lo for the solution and here's what worked for me. But before that, I'll talk about what problem I encountered first. When I first tried to implement this, I encountered the "WP is undefined" problem on the popup itself. To solve this, you just have to pass the WP object to the script like so:
(function() {
tinymce.create('tinymce.plugins.someplugin', {
init : function(ed, url) {
// Register commands
ed.addCommand('mcebutton', function() {
ed.windowManager.open(
{
file : url + '/editor_button.php', // file that contains HTML for our modal window
width : 800 + parseInt(ed.getLang('button.delta_width', 0)), // size of our window
height : 600 + parseInt(ed.getLang('button.delta_height', 0)), // size of our window
inline : 1
},
{
plugin_url : url,
wp: wp
}
);
});
// Register buttons
ed.addButton('someplugin_button', {title : 'Insert Seomthing', cmd : 'mcebutton', image: url + '/images/some_button.gif' });
}
});
// Register plugin
// first parameter is the button ID and must match ID elsewhere
// second parameter must match the first parameter of the tinymce.create() function above
tinymce.PluginManager.add('someplugin_button', tinymce.plugins.someplugin);
})();
What we're interested in is this line => "wp: wp" . This line ensures that we are passing the wp object to the popup window (an iframe really...) that is to be opened when we click the tinymce button. You can actually pass anything to the popup window via this object (the 2nd parameter of the ed.windowManager.open method)!
Last but not the least you'd have to reference that passed wp object on your javascript like so:
var args = top.tinymce.activeEditor.windowManager.getParams();
var wp = args.wp;
Make sure you do that before calling/using the WP object.
That's all you have to do to make this work. It worked for me, I hope it works for you :)
I took the code of Paolo and simplified it in order not to have many files to manage. Also, I didn't manage to make it work like this.
So this solution has less code and uses only one single file.
Just put this in your tinyMCE plugins js file:
(function(){
tinymce.PluginManager.add('myCustomButtons', function(editor, url){
editor.addButton('btnMedia', {
icon: 'image',
tooltip: 'Add an image',
onclick: function() {
editor.windowManager.open({
title: 'Add an image',
body: [{
type: 'textbox',
subtype: 'hidden',
name: 'id',
id: 'hiddenID'
},
{
type: 'textbox',
name: 'text',
label: 'Text',
id: 'imageText'
},
{
type: 'button',
text: 'Choose an image',
onclick: function(e){
e.preventDefault();
var hidden = jQuery('#hiddenID');
var texte = jQuery('#imageText');
var custom_uploader = wp.media.frames.file_frame = wp.media({
title: 'Choose an image',
button: {text: 'Add an image'},
multiple: false
});
custom_uploader.on('select', function() {
var attachment = custom_uploader.state().get('selection').first().toJSON();
hidden.val(attachment.id);
if(!texte.val()){
if(attachment.alt)
texte.val(attachment.alt);
else if(attachment.title)
texte.val(attachment.title);
else
texte.val('See the image');
}
});
custom_uploader.open();
}
}],
onsubmit: function(e){
var image = '<button data-id="'+e.data.id+'">'+e.data.text+'</button>';
editor.insertContent(image);
}
});
}
});
});
})();
The result in the frontend html is a button which has the ID of the image in a data-id attribute, and a text to display (the alt of the image, by default, or its title or a text the user can write).
Then, with my frontend js, I will get the corresponding image with its ID and show it in an ajax popup.
With this solution, you have all of your js functions in one single file, and you don't need to enqueue any script nor to create a php file.
I know it's old but in case anyone else facing the same situation, The Paolo's solution above is working fine but no need to enqueue wp_enqueue_media(); this will load a bunch of scripts, you can load only 2 scripts:
wp_enqueue_script( 'jquery' );
wp_enqueue_script( 'media-lib-uploader-js' );
I'm developing a SPA (Single Page Application) and use grunt-browsers-sync.
All browser-sync features seem to work: CSS injection, scrolling and form synchronization.
It's a SPA so no navigation to other pages in done. Navigation is done via routes in the document fragment (I use the SammyJs library for this)
mysite.com/#/home
mysite.com/#/contact
mysite.com/#/...
It seems BrowserSync doesn't synchronizes document fragments.
I think it's because document fragments are handled by the browser and not requested at the BrowserSync server/proxy.
Is there some way to make the scenario work?
PS: I have a javascript callback when navigating, which I can use to send the new url to BrowserSync at development (if BrowserSync supports something like that)
I also tried using browser-sync for a single-page backbone application.
Routes changes are basically triggered on clicking anchors. Unfortunately, browser-sync doesn't play well with events having stopPropagation & hence, the click wasn't triggered in other browsers and routes were synced.
Since then I've forked and fixed this plus other issues namely event syncing for mouseup, mousedown, keyup, keydown and contenteditable div.
The pull-request is still pending though, so meanwhile you can use browser-sync-client from https://github.com/nitinsurana/browser-sync-client
You'll need to have configuration as follows for the fixes to take effect . Notice the capture, contenteditable, mouseup and other config options not present in browser-sync
var bs = require("browser-sync").create();
var client = require("./");
client["plugin:name"] = "client:script";
bs.use(client);
bs.init({
//server: {
// baseDir: ["test/fixtures"]
//},
proxy: 'http://localhost:8080',
open: false,
minify: false,
snippetOptions: {
rule: {
//match: /SHNAE/,
match: /<\/head>/i,
fn: function (snippet) {
return snippet + "\n</head>";
}
}
},
clientEvents: [
"scroll",
"input:text",
"input:toggles",
"input:keydown",
"input:keypress",
"form:submit",
"form:reset",
"click",
"contenteditable:input",
"mouseup",
"mousedown",
"select:change"
],
ghostMode: {
clicks: true,
scroll: true,
forms: {
submit: true,
inputs: true,
toggles: true,
keypress: true,
keydown: true,
contenteditable: true,
change: true
},
mouseup: true,
mousedown: true
},
capture:true
});