I am trying to upload image for my application through an editor. I am using php. I think default tinymce is not so much flexible at least for a user. So is there any editor by which user can add image which will be from their computer? If so please let me know.
Great one, but paid:
Readctor - http://imperavi.com/redactor/
Easy-looking, easy-writeble functions (and for custom uploading ajax script too)
Related
I've been using ckeditor4 for ages in my custom CMS and I've just integrated ckfinder3 so I can use drag & drop image uploading via ckeditor4. Everything is working properly and I have it resizing images upon upload (set in ckfinder/config.php) - all good.
My issue is I want it to create a thumbnail of the image too, as it did in the past (I've been using an earlier version of ckfinder). They used to be uploaded to userfiles/_thumbs/images/ but now it doesn't seem to do it.
I have a few custom bits set up for my editor such as a custom config file and custom contents.css but they shouldn't have any effect on this. My editor code from within my CMS is below, all pretty straightforward stuff and it all works except for the fact that uploading images using drag & drop doesn't create a thumbnail too.
A point to note that if clicking on the 'image' button on the ckeditor toolbar, then uploading the usual way - browse server/upload etc, the system does create a thumbnail and places it in the folder here: userfiles/.ckfinder/cache/thumbs/images/theUploadedImage/theUploadedImage.jpg
Any pointers would be gratefully received. I hope this makes sense!
Thanks
<textarea name="blog_text"></textarea>
<script>
CKEDITOR.replace( 'blog_text', {
customConfig: 'mycustomfolder/myconfig.js',
contentsCss: CKEDITOR.getUrl( 'mycustomfolder/mycontents.css' ),
filebrowserBrowseUrl: 'ckfinder3.4.5/ckfinder.html',
filebrowserImageBrowseUrl: 'ckfinder3.4.5/ckfinder.html?type=Images',
filebrowserUploadUrl: 'ckfinder3.4.5/core/connector/php/connector.php?command=QuickUpload&type=Files',
filebrowserImageUploadUrl: 'ckfinder3.4.5/core/connector/php/connector.php?command=QuickUpload&type=Images'
} );
</script>
The paths and the methods of creating them were chnaged in CKFinder 3. Assuming that you are using default configuration, all thumbnails are being created inside /userfiles/.ckfinder/cache/thumbs/ folder and are on CKFinder private use only. They actually were for private use in CKF 2.x as well but users liked to abuse that.
Thumbnails get also created if you use, available in Popup and CKEditor integrations, "Choose Scaled" option. In that case scaled image gets created inside /MainFilesFolder/resourceTypeFolder/__thumbs/NameOfImage.extension/NameOfImage__widthxheight.extension e.g. /userfiles/images/__thumbs/Students.jpg/Students__480x320.jpg.
You can somewhat change the location of private directory through https://ckeditor.com/docs/ckfinder/ckfinder3-php/configuration.html#configuration_options_privateDir but please note that end of path resourceTypeName/theUploadedImage/theUploadedImage.jpg will not change.
There is also a simple plugin available online which allows generating thumbs on file upload. Perhaps this is something that might suit you or something that can be used as a jump start to create your own custom plugin: https://gist.github.com/zaak/7bb61025bfd9d3a6633029b0b4b087f9.
In order to upload images to my server I need to post to a specific URL so that I can handle it on the back end. TinyMCE seems to provide support for such functionality, but it's not entirely clear or explicit about it.
I tried using JustBoil.Me to upload the image, but the way it's set up does not play nicely with my Laravel and URL setup.
Have any of you had to do this before?
I found this resource to be very helpful, but the lack of literature on this topic is shocking:
Direct Image Uploads in TinyMCE 4 (it would be amazing to see a PHP/Laravel server side code snippet on how to return something that TinyMCE can process)
I am using a jQuery plugin http://odyniec.net/projects/imgareaselect/ that allows cropping of an image.
I have search high and low for a tutorial that allows me to over write the file on the server with the cropped version...but found nothing of use.
I am using the basic integration of the plugin inside Facebox. This is working fine.
I have a button on the page which says 'Save', when that is clicked I would like to store the new image (cropped) on the server.
Any suggestions or need further information?
Check out this awesome tutorial
I use Jcrop for my projects works great!
http://deepliquid.com/content/Jcrop.html
http://deepliquid.com/projects/Jcrop/demos.php?demo=live_crop <--
Have you taken a look at the links at the very bottom of the plugin page? There are some useful links including this one. It should help you get started with the php side of things
Turned out the that image I was uploading was bigger than the area size of the cropping tool.
Image was 1024x768 however I resized the image to fit within 500x500 overlay.
I will need to resize and save new sized image during the upload.
Thanks for all your suggestions.
I have a form where the admins will be uploading more then 2 pictures at a time, i had been using the basic HTML file input style, however i want to do more with it as i am using a beautiful admin theme from themeforest, (the author haven't included the styled file input element in skin), i want to do it manually. which should meet the following requirement
a) A styled file input element should
be displayed first
b) When the user gives the file input
it should automatically upload the
file using php
c)while uploading the file i want to
see the file upload progress with tool
tip
d)once all the files are uploaded the
user should be able to process the
form with already uploaded file.
I want to admit that i have a very basic understanding of how javascript and Jquery works, however i am quite good at PHP, HTML and CSS.
I want some kinda tutorial regarding how do i style my file input to fill my need.
i am searching something like this.. File Upload
thank you
The only thing that fulfills all your requirements in a way that works with most browsers at the moment is a Flash-based uploader like SWFUpload or Uploadify.
Use SWFUpload. Look its FEATURES DEMO. It has almost everything.
I am trying to build a system that allows a user to select an image from their own computer, and crop it using the jCrop tool from jQuery. My question is can I show the image the user has selected from their system without uploading it to a system, I dont really want to do two uploads, unless I can do the first upload silently? Any help would be great.
Thank you.
You don't have to upload twice. Just upload the image at first time
Use jCrop and send image Thumbnail's coordinates(x,y), width and height.
Resize Image according to them
AFAIK, not using JavaScript and HTML (4) at the moment.
Flash can do image processing before upload - SWFUpload for example can resize images before uploading (doesn't support cropping though), but I don't know an Open Source implementation of a Cropping tool in Flash.
It will probably also be possible using HTML 5.
However, I don't see how you would need two uploads to do this? Isn't it 1. Upload 2. Show with Cropper 3. send Crop info to PHP script that processes the uploaded file?