I want to know how to create a ckeditor(v4.x) plugin with two or more commands inside it.
I'm able to create and execute a ckeditor with one command, as the code can be saw below:
CKEDITOR.plugins.add ('family',
{
init: function (editor)
{
editor.setKeystroke (CKEDITOR.CTRL + 65, 'parent'); // CTRL+A
editor.addCommand ('parent',
{
exec : function(editor)
{
var selection = editor.getSelection ().getSelectedText ();
editor.insertHtml ('<span data-role="parent">' + selection + '</span>' );
}
});
}
} );
What I want to achieve:
CKEDITOR.plugins.add ('family',
{
init: function (editor)
{
editor.setKeystroke (CKEDITOR.CTRL + 65, 'parent'); // CTRL+A
editor.addCommand ('parent',
{
exec : function(editor)
{
var selection = editor.getSelection ().getSelectedText ();
editor.insertHtml ('<span data-role="parent">' + selection + '</span>' );
}
});
editor.setKeystroke (CKEDITOR.CTRL + 69, 'child'); // CTRL+E
editor.addCommand ('child',
{
exec : function (editor)
{
var selection = editor.getSelection ().getSelectedText ();
editor.insertHtml ('<span data-role="child">' + selection + '</span>' );
}
});
}
} );
Suggestions?
I made a mistake in my tests to verify if the plugin was or not working. The mistake made it looks like it wasn't when it was.
This way of inserting two commands to one plugin does really work.
Related
I'm trying to print barcode on paper using datecs printer. But Iam not getting correct barcode on paper. I also want to print some kannada letters with barcode.
I tried with different plugins like BTPrinter and datecs from last 1 week. nothing is working
window.DatecsPrinter.listBluetoothDevices(
function (devices) {
window.DatecsPrinter.connect(devices[0].address,
function () {
console.log(devices[0].address),
window.DatecsPrinter.printText(finalReceipt, 'UTF-8',
function () {
window.DatecsPrinter.setBarcode(3, true, 2, 3, 100);
window.DatecsPrinter.printBarcode(
75,
barcodeData,
function () {
alert('success!');
},
function (error) {
alert(JSON.stringify(error));
}
)
}, function (error) {
alert(JSON.stringify(error));
}
);
},
function (error) {
alert(JSON.stringify(error));
}
);
},
function (error) {
alert(JSON.stringify(error));
}
);
What do you mean by not working? For me DatecsPrinter works fine for both printing text, barcode and images.
I have used the jQuery UI Autocomplete demo source code for the Categories example (http://jqueryui.com/autocomplete/#categories) and have it working (querying a database which returns a JSON array).
I'm building a search function for an art gallery and my categories are Artists and Exhibitions. I want to show results from one or both categories. My problem is that results are only showing when the search term covers a result in both categories.
My suggestions script uses the search term to query two different database tables. I format and append the results into a single JSON array with rows for ["id"], ["value"], ["label"] and ["category"].
So for the search term CORN, the results that come back might be:
{ label: "Christopher Corner", category: "Artists" },
{ label: "New Pictures From Cornwall", category: "Exhibitions" },
{ label: "Cornie Collins", category: "Artists" },
At the moment when I type a search term, the possible results are only shown as long as a result is possible in ALL my categories, rather than what I want, which is one or more. So when I type CORN, I can see an Artist named Corner, and an Exhibition about Cornwall, but the minute I type the E of CORNE, all the options disappear, including the Artist whose name is Corner (which I would expect to remain).
I'm new to jQuery and jQuery UI and struggling to understand where the logic would be to select a list item from any category rather than all of them.
I have edited to add my code. This is the backend suggestions file - search_suggestions.php:
<?php
# if the 'term' variable is not sent with the request, exit
if (!isset($_REQUEST['term'])) {
exit;
}
# retrieve the search term that autocomplete sends
$term = trim(strip_tags($_GET['term']));
$a_json = array();
$a_json_row = array();
# connect to database, send relevant query and retrieve recordset
include 'includes/db_access.php';
$compoundFind = $fm->newCompoundFindCommand('web_Artists');
$request1 = $fm->newFindRequest('web_Artists');
$request2 = $fm->newFindRequest('web_Artists');
$request1->addFindCriterion('Last name', '*'.$term.'*');
$request2->addFindCriterion('First name', '*'.$term.'*');
$compoundFind->add(1, $request1);
$compoundFind->add(2, $request2);
$compoundFind->addSortRule('Last name', 1, FILEMAKER_SORT_ASCEND);
$result = $compoundFind->execute();
if (FileMaker::isError($result)) {
die();
}
$records = $result->getRecords();
# loop through records compiling JSON array
foreach ($records as $record) {
$artistID = htmlentities(stripslashes($record->getRecordID())) ;
$artistName = htmlentities(stripslashes($record->getField('Full name'))) ;
$a_json_row["id"] = $artistID;
$a_json_row["value"] = $artistName;
$a_json_row["label"] = $artistName;
$a_json_row["category"] = "Artists";
array_push($a_json, $a_json_row);
}
$findCommand = $fm->newFindCommand('web_Exhibitions');
$findCommand->addFindCriterion('Title', '*'.$term.'*');
$result = $findCommand->execute();
if (FileMaker::isError($result)) {
die();
}
$records = $result->getRecords();
foreach ($records as $record) {
$exhibitionID = htmlentities(stripslashes($record->getField('Exhibition ID'))) ;
$exhibitionTitle = htmlentities(stripslashes($record->getField('Title'))) ;
$a_json_row["id"] = $exhibitionID;
$a_json_row["value"] = $exhibitionTitle;
$a_json_row["label"] = $exhibitionTitle;
$a_json_row["category"] = "Exhibitions";
array_push($a_json, $a_json_row);
}
echo json_encode($a_json);
flush();
?>
And here is the JS in my section which sets things up:
<style>
.ui-autocomplete-category {
font-weight: bold;
padding: .2em .4em;
margin: .8em 0 .2em;
line-height: 1.5;
}
</style>
<script>
$.widget( "custom.catcomplete", $.ui.autocomplete, {
_create: function() {
this._super();
this.widget().menu( "option", "items", "> :not(.ui-autocomplete-category)" );
},
_renderMenu: function( ul, items ) {
var that = this,
currentCategory = "";
$.each( items, function( index, item) {
var li;
if ( item.category != currentCategory ) {
ul.append( "<li class='ui-autocomplete-category'>" + item.category + "</li>" );
currentCategory = item.category;
}
li = that._renderItemData( ul, item );
if ( item.category ) {
li.attr( "aria-label", item.category + " : " + item.label );
}
});
}
});
</script>
<script>
$(function() {
$( "#searchInput" ).catcomplete({
minLength: 2,
source:'search_suggestions.php'
});
});
</script>
Finally this is the actual input field on the page:
<input class="u-full-width" placeholder="Search" id="searchInput" />
Sorry if this is too much code!
I have been trying to set up an app through PhoneGap (Cordova) to take images and upload them to our server. I have gone through so many of the responses on here and tried the code in them. I can get the camera up and taking a photo, I can access the phone gallery even. But I can not get it to send the image to the server. I've tried sending the image, and even sending the base64 image stream. I can't get it to the server.
Here is the javascript on the client side:
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
}
function ImageUpload() {
this.useExistingPhoto = function(e) {
this.capture(Camera.PictureSourceType.SAVEDPHOTOALBUM);
}
this.takePhoto = function(e) {
this.capture(Camera.PictureSourceType.CAMERA);
}
this.capture = function(sourceType) {
navigator.camera.getPicture(this.onCaptureSuccess, this.onCaptureFaile, {
destinationType: Camera.DestinationType.FILE_URI,
soureType: sourceType,
correctOrientation: true
});
}
this.onCaptureSuccess = function(imageURI) {
var fail, ft, options, params, win;
success = function(response) {
alert("Your photo has been uploaded!");
};
fail = function(error) {
alert("An error has occurred: Code = " + error.code + "\nMessage = "+error.message);
};
options = new FailUploadOptions();
options.fileKey = "file";
options.fileName = imageURI.substr(imageURI.lastIndexOf('/') + 1);
options.mimeType = "text/plain";
params = {
val1: "some value",
val2: "some other value"
};
options.params = params;
ft= new FileTransfer();
ft.upload(imageURI, 'http://style.appdev01.com/app/client-profile.php', success, faile, options);
}
this.OnCaptureFail = function(message) {
alert("Failed because: "+message);
}
};
var imageuploader = new ImageUpload();
Two buttons call imageuploader.takePhoto and .useExistingPhoto on click.
On the server side I have this php:
if(isset($_FILES['file'])) {
$target_path = "/home/style/public_html/images/client_images/app_image.jpg";
move_uploaded_file($_FILES['file']['tmp_name'], $target_path);
$insert = "INSERT INTO
`fut`
SET
`request` = '".serialize($_POST)."',
`file` = '".serialize($_FILES)."'";
$mysql->query($insert);
}
This is just to store the POST and FILE arrays to the db to make sure they came through and create the image.
But again, nothing is getting to the server. Any help would be GREATLY appreciated. I've tried so many versions of this code from so many questions here and all over the web.
define ('SITE_ROOT', realpath(dirname(__FILE__))); /* echo SITE_ROOT; to dir
move_uploaded_file($_FILES["file"]["tmp_name"],SITE_ROOT."/uploads/".$_FILES["file"]["name"]); // will move file, make sure uplaods has write permission!
That works for me on Android Simulator, not on Tablet, but let me know if you have it working, busy on the same thing.
$myarray = array( $_REQUEST);
foreach ($myarray as $key => $value) {
echo "<p>".$key."</p>";
echo "<p>".$value."</p>";
echo "<hr />";
}
That you can use to check POST / GET!
Try this is my code. It has worked for me.
Encode your URL by encodeURI method
fileKey with "file" as in your server side script $_FILES['file']
uploadFile: function(refNo){
var uri = fileUpload.fileUri;
var file = uri.substr(uri.lastIndexOf('/') + 1);
var options = new FileUploadOptions();
options.fileKey = "file";
options.fileName = file;
options.mimeType="image/jpeg";
alert("name === "+uri);
options.chunkedMode = false;
var ft = new FileTransfer();
Common.ajaxLoading('show');
ft.upload(uri,encodeURI("http://172.16.1.147:80/upload/home.php") , fileUpload.uploadSuccess, fileUpload.uploadFail, options, true);
},
Is there any fix to make Jquery-ui sortable work on touch devices based on Android or IOS?
I suggest jQuery UI Touch Punch. I've tested it on iOS 5 and Android 2.3 and it works great on both.
The other answer is great but unfortunately it will only work on iOS devices.
Also there was is a breakage caused by later versions of jquery.ui that meant that _touchEnd events were not correctly resetting an internal flag (mouseHandled) in mouse.ui and this was causing exceptions.
Both of these problems should now be fixed with this code.
/*
* Content-Type:text/javascript
*
* A bridge between iPad and iPhone touch events and jquery draggable,
* sortable etc. mouse interactions.
* #author Oleg Slobodskoi
*
* modified by John Hardy to use with any touch device
* fixed breakage caused by jquery.ui so that mouseHandled internal flag is reset
* before each touchStart event
*
*/
(function( $ ) {
$.support.touch = typeof Touch === 'object';
if (!$.support.touch) {
return;
}
var proto = $.ui.mouse.prototype,
_mouseInit = proto._mouseInit;
$.extend( proto, {
_mouseInit: function() {
this.element
.bind( "touchstart." + this.widgetName, $.proxy( this, "_touchStart" ) );
_mouseInit.apply( this, arguments );
},
_touchStart: function( event ) {
if ( event.originalEvent.targetTouches.length != 1 ) {
return false;
}
this.element
.bind( "touchmove." + this.widgetName, $.proxy( this, "_touchMove" ) )
.bind( "touchend." + this.widgetName, $.proxy( this, "_touchEnd" ) );
this._modifyEvent( event );
$( document ).trigger($.Event("mouseup")); //reset mouseHandled flag in ui.mouse
this._mouseDown( event );
return false;
},
_touchMove: function( event ) {
this._modifyEvent( event );
this._mouseMove( event );
},
_touchEnd: function( event ) {
this.element
.unbind( "touchmove." + this.widgetName )
.unbind( "touchend." + this.widgetName );
this._mouseUp( event );
},
_modifyEvent: function( event ) {
event.which = 1;
var target = event.originalEvent.targetTouches[0];
event.pageX = target.clientX;
event.pageY = target.clientY;
}
});
})( jQuery );
is this meant to replace the mouse.ui js code or to be called after that javascript is loaded? I am unable to get it to work for me on an Android tablet.
EDIT for anyone finding this in the future - got this to work for a Samsung Galaxy Android tablet with the following code:
/iPad|iPhone|Android/.test( navigator.userAgent ) && (function( $ ) {
var proto = $.ui.mouse.prototype,
_mouseInit = proto._mouseInit;
$.extend( proto, {
_mouseInit: function() {
this.element
.bind( "touchstart." + this.widgetName, $.proxy( this, "_touchStart" ) );
_mouseInit.apply( this, arguments );
},
_touchStart: function( event ) {
/* if ( event.originalEvent.targetTouches.length != 1 ) {
return false;
} */
this.element
.bind( "touchmove." + this.widgetName, $.proxy( this, "_touchMove" ) )
.bind( "touchend." + this.widgetName, $.proxy( this, "_touchEnd" ) );
this._modifyEvent( event );
$( document ).trigger($.Event("mouseup")); //reset mouseHandled flag in ui.mouse
this._mouseDown( event );
//return false;
},
_touchMove: function( event ) {
this._modifyEvent( event );
this._mouseMove( event );
},
_touchEnd: function( event ) {
this.element
.unbind( "touchmove." + this.widgetName )
.unbind( "touchend." + this.widgetName );
this._mouseUp( event );
},
_modifyEvent: function( event ) {
event.which = 1;
var target = event.originalEvent.targetTouches[0];
event.pageX = target.clientX;
event.pageY = target.clientY;
}
});
})( jQuery );
I finally found a solution that works with drag handles.
Go to this page.
In Downloads, grab the "altfix" version, which only applies touch handling to the elements you specify.
Add a script tag for the downloaded JS file.
Add touch handling for your drag handles in your document ready handler; e.g. $('.handle').addTouch()
I'm using this snippet below in conjunction with jquery-sortable which does allow the drag sort to happen on my iPhone. I am having a problem after I finish the first sort however as any scrolling on the list at all is detected as a drag.
EDIT - see here as well http://bugs.jqueryui.com/ticket/4143
EDIT 2 - I was able to get this working if I use the entire row as the handle. It also fixed a problem I was having where the offset was incorrect after scrolling.
/*
* A bridge between iPad and iPhone touch events and jquery draggable, sortable etc. mouse interactions.
* #author Oleg Slobodskoi
*/
/iPad|iPhone/.test( navigator.userAgent ) && (function( $ ) {
var proto = $.ui.mouse.prototype,
_mouseInit = proto._mouseInit;
$.extend( proto, {
_mouseInit: function() {
this.element
.bind( "touchstart." + this.widgetName, $.proxy( this, "_touchStart" ) );
_mouseInit.apply( this, arguments );
},
_touchStart: function( event ) {
if ( event.originalEvent.targetTouches.length != 1 ) {
return false;
}
this.element
.bind( "touchmove." + this.widgetName, $.proxy( this, "_touchMove" ) )
.bind( "touchend." + this.widgetName, $.proxy( this, "_touchEnd" ) );
this._modifyEvent( event );
this._mouseDown( event );
return false;
},
_touchMove: function( event ) {
this._modifyEvent( event );
this._mouseMove( event );
},
_touchEnd: function( event ) {
this.element
.unbind( "touchmove." + this.widgetName )
.unbind( "touchend." + this.widgetName );
this._mouseUp( event );
},
_modifyEvent: function( event ) {
event.which = 1;
var target = event.originalEvent.targetTouches[0];
event.pageX = target.clientX;
event.pageY = target.clientY;
}
});
})( jQuery );
This worked a lot better for me than the selected answer, so I hope this helps other people:
http://code.google.com/p/rsslounge/source/browse/trunk/public/javascript/addtouch.js?r=115.
The other code behaves weird, when you drag an element the potential dropping position is very far from were it should be.
Using Touch Punch is as easy as 1, 2…
Just follow these simple steps to enable touch events in your jQuery UI app:
Include jQuery and jQuery UI on your page.
Include Touch Punch after jQuery UI and before its first use.
Please note that if you are using jQuery UI's components, Touch Punch must be included after jquery.ui.mouse.js, as Touch Punch modifies its behavior.
There is no 3. Just use jQuery UI as expected and watch it work at the touch of a finger.
$('#widget').draggable();
Tested on iPad, iPhone, Android and other touch-enabled mobile devices.
I seem to have a problem with uploadify. It always get stuck at 100% on the first file, no matter what the file is. I am using Zend on my Wamp and it works fine there but as soon as I upload it on my linux server it gets stuck. The file is uploaded and renamed but it never fires the onComplete event and stays at 100% on the first file.
Here is my javascript:
$('#fileInput').uploadify({
'uploader' : 'http://test.thevenuelist.co.uk/js/uploadify/uploadify.swf',
'script' : 'http://test.thevenuelist.co.uk/ajax/uploadify',
'cancelImg' : 'http://test.thevenuelist.co.uk/js/uploadify/cancel.png',
'folder' : '/userdata/images/',
'auto' : true,
'multi' : true,
'fileDesc' : 'Image Files (*.jpg;*.jpeg;*.gif;*.png)',
'fileExt' : '*.jpg;*.jpeg;*.gif;*.png',
'buttonText' : 'Upload Images',
'removeCompleted' : true,
'onComplete' : function (event, queueID, fileObj, response, data) {
var answer = eval('(' + response + ')');
if(answer.result == "success")
{
$("#hdnImages").val($("#hdnImages").val() + answer.fileName + ",");
var toAdd = "<li><img src='/images/delete.png' id='removeItem' rel='"+answer.fileName+"' style='cursor:pointer;' title='Remove' alt='Remove'/> Image "+answer.realName+" uploaded</li>";
$("#completedItemsList").append(toAdd);
}
},
'onError': function (event, queueID ,fileObj, errorObj) {
alert(errorObj.info);
}
});
And here is my Zend code behind:
$tempFile = $_FILES['Filedata']['tmp_name'];
$targetPath = $_SERVER['DOCUMENT_ROOT']. '/' . $_REQUEST['folder'] . '/';
$fileNameArray = explode('.',$_FILES['Filedata']['name']);
$hash = substr(md5(microtime()),0,5);
$finalFileName = $fileNameArray[0].$hash.'.'.$fileNameArray[1];
$targetFile = str_replace('//','/',$targetPath) . $finalFileName;
if(move_uploaded_file($tempFile,$targetFile))
{
$data = array("result"=>"success","fileName"=>$finalFileName,"realName"=>$_FILES['Filedata']['name']);
}
else
{
$data = array("result"=>"failed");
}
echo Zend_Json::encode($data);
Any help would be greatly appreciated. I have spent way too much time trying to figure it out. I need my onComplete event to work so I can finish my forms.
I found with uploadify I had to return either a 1 or a 0 for success or failure to get it to work.