Plupload conflict with moxiemanager (tinymce) - tinymce

I have a problem with the work of plupload namely:
I have tinyMCE embedded on one page with the MoxieMannager plugin and I have Plupload on the same page (for uploading files).
So Plupload works, but if you activate Moxiemanager (on page), then everything stops working right away? How to bypass this restriction?
code sample:
<script type="text/javascript" src="./plupload/plupload.full.min.js"></script>
<script src="tinymce/tinymce.min.js"></script>
<script>tinymce.init({
selector:'<?php print $MCE3; ?>',
toolbar: "<?php print $MCE2; ?>",
language: 'ru',
plugins: '<?php print $MCE; ?>',
relative_urls : true,
document_base_url : "<?php print $url; ?>"
});</script>
<a data-action='uploadFile' class="ipsButton ipsButton_small ipsButton_primary ipsPos_left" id="pickfiles" href="javascript:;">Выбрать файл...1</a>
<a data-action='uploadFile' class="ipsButton ipsButton_small ipsButton_primary ipsPos_left" id="uploadfiles" href="javascript:;">Загрузить на сервер</a>
<ul id="filelist"></ul>
<pre id="console"></pre>
<script type="text/javascript">
// Custom example logic
var uploader3 = new plupload.Uploader({
runtimes : 'html5,flash,silverlight,html4',
browse_button : 'pickfiles', // you can pass in id...
container: document.getElementById('container'),
url : "./plupload/examples/q1.php?pgid=<?php print $pgid; ?>",
filters : {
pgid: <?php print $pgid; ?>,
max_file_size : '10mb',
mime_types: [
{title : "Image files", extensions : "jpg,gif,png"},
{title : "Zip files", extensions : "zip"}
]
},
// Flash settings
flash_swf_url : '/plupload/Moxie.swf',
// Silverlight settings
silverlight_xap_url : '/plupload/Moxie.xap',
init: {
PostInit: function() {
document.getElementById('filelist').innerHTML = '';
document.getElementById('uploadfiles').onclick = function() {
uploader3.start();
return false;
};
},
FilesAdded: function(up, files) {
plupload.each(files, function(file) {
document.getElementById('filelist').innerHTML += '<div id="' + file.id + '">' + file.name + ' (' + plupload.formatSize(file.size) + ') <b></b></div>';
});
},
UploadProgress: function(up, file) {
document.getElementById(file.id).getElementsByTagName('b')[0].innerHTML = '<span>' + file.percent + "%</span>";
},
Error: function(up, err) {
document.getElementById('console').innerHTML += "\nError #" + err.code + ": " + err.message;
}
}
});
uploader3.init();
</script>
Please help solve the problem

Related

Do previews using mathjax in TinyMCE's native preview plugin

How to make TinyMCE able to use MathJax in its native preview plugin?
TinyMCE editor in the frontend interface is being set in function.php file using a similar code to this
function editor_settings($args = array()){
return array(
'textarea_name' => 'post_content',
'tinymce' => array(
'plugins' => "preview",
'toolbar' => "redo undo bold italic preview",
'setup' => "function(ed){
ed.onChange.add(function(ed, l) {
var content = ed.getContent();
if(ed.isDirty() || content === '' ){
ed.save();
jQuery(ed.getElement()).blur(); // trigger change event for textarea
}
}"
));
}
And I'm using CDN copy of MathJax and my configuration code for MathJax is the following:
<script type="text/x-mathjax-config">
MathJax.Hub.Config({
tex2jax: {
inlineMath: [ ['$','$'],["\\(","\\)"] ],
displayMath: [['$$','$$'], ["\\[","\\]"] ],
processEscapes: true
},
"HTML-CSS": {
matchFontHeight: false,
availableFonts: ["TeX"],
webFont: 'Latin-Modern',
preferredFont: 'Latin-Modern',
scale: 100,
},
CommonHTML: {
matchFontHeight: false
},
SVG: {
matchFontHeight: false
}
});
</script>
I was able to solve the problem. The modification is done in the plugin's file "plugin.min.js" that could be found following this path /wp-includes/js/tinymce/plugins/preview/
You need to look for
e += '<link type="text/css" rel="stylesheet" href="' + f(c.documentBaseURI.toAbsolute(a)) + '">'
and insert these two lines to load and configure MathJax
e += '<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>'
e += '<script type="text/x-mathjax-config"> MathJax.Hub.Config({ "HTML-CSS": { matchFontHeight: false, availableFonts: ["TeX"], webFont: \'Latin-Modern\', preferredFont: \'Latin-Modern\', scale: 100, }, CommonHTML: { matchFontHeight: false }, SVG: { matchFontHeight: false } }); </script>'

Form OnClick ReferenceError: comment is not defined

I'm trying to update my comment system and have run in to a snag. This is the error firebug is showing : ReferenceError: comment is not defined : comment(1000);
I'm at a loss to what the issue is - any ideas?
<div class="comment_heading">Leave a Comment</div>
<div class="post_comment">
<textarea name="txtpostcomment" id="txtpostcomment-1000" class="txtpostcomment"></textarea>
<button class="btnpostcomment" id="btnpostcomment-1000" onclick="comment(1000);" type="button">Send</button>
<input type="hidden" name="token" id="token" value="19vtyWh5iOpeKamXAQl3udqU9mMjnfKv/LnWr70M2jE=">
</div>
<script>
function comment(postid1)
{
var txt = $('#txtpostcomment-'+postid1);
var btn = $('#btnpostcomment-'+postid1);
var comment1 = $(txt).val();
var token = $("#token").val();
$(btn).css('background-image', 'url(/comments/submit-busy.gif)');
$(btn).attr('disabled', true);
var dataString = 'commenting=1&postid=' + postid1 + '&comment=' + comment1 + '&name=' + name + '&token=' + token;
.ajax({
url: "/comments/submit.php",
type: "POST",
data: dataString,
cache: false,
success: function()
{
$('.post_comment .error_msg').remove();
$('.comment-list-'+postid1).prepend(msg.html);
$(txt).val('');
},
error: function()
{
$('.post_comment .error_msg').value = 'Error - Please try again';
}
});
$(btn).css('background-image', 'none');
$(btn).attr('disabled', false);
$(txt).attr('disabled', false);
}
</script>
Solved .. all I needed to change was :
.ajax({
To :
$.ajax({

Can't get the autocomplete search form to work

I'm implementing a search form that displays suggestions as you start typing but can't get it to work..the problem is that when you start typing it doesn't shows any suggestion. Can you help me to get the code right? Many thanks!
This is the code:
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js"></script>
<div><input id="autocomplete" type="text"></div>
<script>
$("input#autocomplete").autocomplete({
source: [
{ id : "Google", value : "Google"},
{ id : "Yahoo", value : "Yahoo"},
],
minLength: 1,
open: function(event, ui) {
$("ul.ui-autocomplete").unbind("click");
var data = $(this).data("autocomplete");
console.log(data);
for(var i=0; i<=data.options.source.length-1;i++)
{
var s = data.options.source[i];
$("li.ui-menu-item a:contains(" + s.value + ")").attr("href", "/" + s.id);
}
}
});
/*
$("input#autocomplete").bind("autocompleteselect", function(event, ui) {
//alert(ui.item.id + ' - ' + ui.item.value);
//document.location.href = ui.item.id + '/' + ui.item.value;
//event.preventDefault;
} );
*/
</script>
Here Is the code:
<div id="search">
<input list="results" id="project" onkeydown="if (event.keyCode == 13) { checkInput(this.value); return false; }" />
</div>
The avaible results...
<datalist id="results">
<option>Demo</option>
<option>Example</option>
<option>pizza</option>
</datalist>
Finally the javascript
function checkInput(searchQuery)
{
if(searchQuery=="Home")
{
window.location = "Home.html";
}
else if(searchQuery == "Contact")
{
window.location = "Contact.html";
}
else if(searchQuery == "Sitemap")
{
window.location = "Sitemap.html";
}
else
{
window.location = "noresult.html";
}
}
So that way when ever someone goes to search they have a limited amount of options in the pre-populated list and which ever one they select leads them to your target page! I can't take all the credit, but I hope that helps!

JS Image Gallery

I am building a portfolio website and would like to use fancy box to create a simple gallery.
I would like all images from one section to reside inside a single folder ('gallery1') and I would like the user to be able to click through all the images in the folder.
This is my html:
<div class="content_image" rel="gallery" href="image01_large.jpg" ><img src="gallery1/image01_small.jpg"/></div>
I am trying to use this jQuery script but it's not working:
<script type="text/javascript">
$("div[rel=gallery]").fancybox({
'transitionIn' : 'none',
'transitionOut' : 'none',
'titlePosition' : 'over',
'titleFormat' : function(title, currentArray, currentIndex, currentOpts) {
return '<span id="fancybox-title-over">Image ' + (currentIndex + 1) + ' / ' + currentArray.length + (title.length ? ' ' + title : '') + '</span>';
}
});
</script>
Any help would be much apreciated!
You can find a list of jQuery gallery plugins here, updated version here.
You want to use a gallery plugin, rather than small bits of script, as they are coded to handle all of the popular browsers as well as work efficiently with finesse. I recommend finding a suitable option there and trying the sample usage for the plugin.
Edit
Also try this:
<script type="text/javascript">
$(function(){$("div[rel=gallery]").fancybox({
'transitionIn' : 'none',
'transitionOut' : 'none',
'titlePosition' : 'over',
'titleFormat' : function(title, currentArray, currentIndex, currentOpts) {
return '<span id="fancybox-title-over">Image ' + (currentIndex + 1) + ' / ' + currentArray.length + (title.length ? ' ' + title : '') + '</span>';
}
})});
</script>

How to find out who has published a post using my OG action

Hoping someone can point me in the right direction.
I have an open graph action that has finally been approved and is active on my app now. Is there any way to track who publishes a post using my OG action from within my app?
Here is the code I'm using for my action:
<script type="text/javascript">
function postEndorse()
{
FB.api(
'/me/namespace:endorse',
'post',
{ photo: '<?php the_permalink(); ?>' },
function(response) {
if (!response || response.error) {
alert('Error Occurred' + response + " " + response.error);
} else {
alert('Thank you!');
}
});
}
</script>
I am requesting the publish_actions permissions when people log in.
Thanks
The response in your JavaScript code above has the id of the action.
{
id: “{action-instance-id}”
}
You need to store your actions via database or otherwise. Once you have that you can make a call against it
/action-instance-id?fields=from.fields(id)
Which will give a response such as
{
"from": {
"id": "{user-id}"
},
"id": "{action-instance-id}"
}
There are many ways to store this data, one way would be AJAX to PHP/MySQL.
I suggest reading up on it. The following hasn't been tested, just gives an idea of how to send the data across. Think of it as pseudocode
Add jQuery to the <head>
<script src="jquery.js"></script>
Send the id of the user, like
<script type="text/javascript">
function postEndorse()
{
FB.api(
'/me/namespace:endorse',
'post',
{ photo: '<?php the_permalink(); ?>' },
function(response) {
if (!response || response.error) {
alert('Error Occurred' + response + " " + response.error);
} else {
FB.api(
response.id + "?fields=from.fields(id)",
function(resp) {
if (!resp || resp.error) {
alert('Error Occurred' + resp + " " + resp.error);
} else {
$.ajax({
type: "POST",
url: "fbdata.php",
data: { id: resp.from.id, actionid: resp.id }
}).done(function( msg ) {
alert( "Data Saved: " + msg );
});
}
});
}
});
}
</script>
Then in fbdata.php something like
<?php
include("database.inc.php");
mysql_connect($server,$username,$password);
#mysql_select_db($database) or die( "Unable to select database");
$id = mysql_real_escape_string($_POST['id']);
$actionid = mysql_real_escape_string($_POST['actionid']);
$database_entry = "INSERT INTO Actions (Id, Action) VALUES ('$id', '$actionid') ;
mysql_query($database_ntry) or die(mysql_error());
mysql_close();
?>
References that you should read
http://api.jquery.com/jQuery.ajax/
http://www.php.net/manual/en/mysql.examples-basic.php
What about if you change
/me/namespace:endorse to /users facebook id/namespace:endorse Then you can store the facebook id of the person and then track them back using that.