has anyone stumbled upon image editor done either in pure JS, or jQuery - that kind like CKEditor has?
I'm looking for piece of code, that adds handles to image, so you can resize it, or even drag image around, as you wish.
Thank you.
Edit: rephrased.
Here is wonderful image crop/resize JQuery plugin http://www.cropzoom.com.ar/
Yes there are numerous online. Find here. jCrop is exceptional and awesome.
The way editors such as tinyMCE and CKEditor do it is like this
<div contenteditable="true" id="div1">
<img src="tache17.jpg" />
</div>
gimme html
It's a browser thing not a JS thing.
Of course placing the image in the div and making the div contentEditable is done with JS but the resizing handles you are talking about are generated by the browser.
Note
I haven't tested this in anything other than firefox
if you are looking for croopzoom and the website don't work?
look at github -> https://github.com/cropzoom/cropzoom
Related
I know that there are a number of points regarding this question, but I just can't find what I'm looking for so I hope someone can answer me. So, what I'm trying to do is:
imagine you have a div that is 400 X 400 px. The user uploads an image and enters text via input[type="text"] and all of it is shown inside that div. I want to export all of the content of that div in a PDF, possibliy by JavaScript (jQuery) od PHP. What would be the best way to do it?
If anyone could show a small example (code), I would appreciate it!
You can use these jquery plugins
https://github.com/mozilla/pdf.js
https://github.com/MrRio/jsPDF
Maybe you could combine the PHP-Printer functions-api (http://www.php.net/manual/en/book.printer.php) with a software like, for example, PDF-Creator (http://sourceforge.net/projects/pdfcreator/).
But this would imply that PDF-Creator is installed on the system of the user.
It's just a general idea ...
You can generate a PDF since a HTML page, with the WeasyPrint package. It's very easy to use and its most speed that javascript.
I've written a plugin which inserts photos/video from a popup lightbox into TinyMCE. This worked fine and formatted very well when aligned/wrapped. When it is inserted in HTML like below:
<img src="blah.png" />
But since then I added a feature to allow captioning, which uses a wrapper div such as:
<div class="ImageWrapper" width="x" height="x">
<img src="blah.png" />
Caption here
</div>
There are now a couple of problems I can't fix.
First: How do I allow TinyMCE to format/align the div as it did with img?
Secondly: How do I prevent the user from selecting any of the contents of the div? Instead clicking should highlight the whole div so formatting and deleting works much more smoothly.
The problem is using a <div> as a wrapper, which is apparently not naturally supported by TinyMCE. You have to go further than fidgeting with some css. TinyMCE being a popular editor, people have already tried and come up with a proper solution. Here's someone who's written a plugin: http://www.tinymce.com/forum/viewtopic.php?id=20319
And there's lots of more info to be found if you google for 'tinymce div plugin': http://www.google.com/#q=tinymce+div+plugin
I don't know what would work best in your situation, so I guess you have to try some of the solutions (plpugins) offered.
I am searching for the smallest WYSIWG editor i can find.
I have tried TinyMCE, CKEditor etc. but i can not find a small one, all has hundreds of kb js files to load.
I dont need image upload etc, even if i like the one Stackoverflow using so think i need some that more shows like Word but really basic features.
I am using jQuery in the project and i it is a ASP.NET MVC 3.0 project but i really like jQuery and normal html instead of ASP.NET components.
But i am open for ideas about everything that are really basic and tiny size.
Someone has any idea?
Here you go:
<p contenteditable="true">Editable text!</p>
Admittedly it's not the most fully-featured editor out there, but it's certainly basic and tiny.
The smallest one I've found is CLEditor: http://premiumsoftware.net/cleditor/
Have you tried http://www.aloha-editor.org/index.php ?
try this
http://www.wyzz.info/downloads_page.html
Check out TinyMCE. http://tinymce.moxiecode.com/
I was reading an article, and it had an image, and when I clicked on it it had a really interesting way to display the full size. I was wondering if anyone know which javascript library. Here is the link:
http://www.rogueamoeba.com/utm/2009/11/13/airfoil-speakers-touch-1-0-1-finally-ships/
Click the image in the middle of the article.
Cheer!
Shawn
It's using the FancyZoom plugin, pretty sure cabel.name was the originator of that entire script... http://www.cabel.name/draft1/2008/02/fancyzoom-10.html
As o.k.w pointed out if you are using the jQuery library you can use the jQuery port of it # http://plugins.jquery.com/project/jquery_fancy_zoom
I am trying to insert PowerPoint slides into HTML preserving links in the PowerPoint slide. I was just wondering if any of you knew a good method to maybe exporting a PowerPoint slide to an HTML and then displaying it in a div on your page, with a link to say do a JavaScript function on that same page.
I've never used it, but PPT2HTML might help. There's also this blog that describes how to save your presentation for the web then modify it.
This isn't exactly what you're after, but there are some html-based presentation tools like S5, DOMSlides you might want to consider as they wouldn't suffer from being translated.
You can use the jQuery plugin called PPTXjs.
This plugin convert pptx to html using javascript only (no server side code needed).
It is based on PPTX2HTML but support a lot more shapes, media (audio, video) and more.
Using:
$("#result").pptxToHtml({
pptxFileUrl: "path/to/slide.pptx"
});
For more details : https://github.com/meshesha/PPTXjs.
1)u can convert it to flash swf
2)convert all slides to an image file and then add 2 buttons(Back,Next) with calling the next and previous images based on an integer variable and this buttons will show u the previous and next slides :)
sorry but u cant embed it without copying all the Powerpoint-exported HTML code in your div tag
Though not quite what you asked, Google Docs or Slideshare both let you embed Powerpoint as flash - perhaps that would be a more elegant way to do this. That is, if embedding is the aim!
I remember there was a function in PowerPoint to export it to an HTML, I would do that and then have it in the page using an <iframe> and then put that inside a <div>