Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
We don’t allow questions seeking recommendations for books, tools, software libraries, and more. You can edit the question so it can be answered with facts and citations.
Closed 2 years ago.
Improve this question
There are several (very good) rich text web editors written in Javascript (eg FCKeditor, YUI Texteditor and many many others).
However I couldn't find any tutorial on how to build such a component. Something that would explain both high-level considerations (architecture) and/or more details in low-level "critical" points (ie why do most of the editors out there use iFrame, how do you handle keyboard input like Ctrl-B, Ctrl-C when the text is selected and when it is not etc)
My main motivation is curiosity; if I had to develop such an editor today I wouldn't know where to start from.
Does anyone know of any tutorial that covers the above issues (ideally, something that explains how to build a wysiwyg editor from scratch)?
After more research I found the following. The functionality for building a rich-text-editor is already implemented at the browser. IE was the first to create such an API and Firefox replicated it.
Overview
The main point is that the javascript object "document" has a property called designMode which can be set to "on". This converts all the page to to a textarea-like component. Imagine that the browser opens the page the same way that MS-Word would: the user can see the formatting but he can also type in the page (normally the browser opens a page as readonly).
window.document.designMode = "On";
Because the above affects all the web page, most editors use iFrames so that the editable area is only the iFrame which has it's own document object.
On top of that, there is an API that allows easy javascript access to styling. This is exposed throw the execCommand() method. For example you can call from Javascript
document.execCommand('bold', false, '');
and the selected text will become bold.
Tutorials
I have found the following:
A brief step by step guide.
A mozilla guide. It has the most convenient API reference I have found and also some more links.
A guide by microsoft.
Related
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
We don’t allow questions seeking recommendations for books, tools, software libraries, and more. You can edit the question so it can be answered with facts and citations.
Closed 11 months ago.
Improve this question
I'm designing a web application that allows editing pages. The catch is, its not HTML content, its not even to be shown in a webpage besides the WYSIWYG editor.
Its more specifically presentation slides for non-rectangular LED signage displays (custom hardware) of low resolution:
(above screenshot happens to be rectangular, but displays often have a custom shape)
The page editing should more resemble Powerpoint than TinyMCE, so to say. For example, inline "content elements" such as a time (or image, or counter, or tickertape text) can be altered by the user within the page.
And sometimes reposition is disallowed, turning the page to a template which only allows users to vary text and some appearance settings.
Can you suggest such a "presentation slide page editor" for a web application?
If you are going to suggest TinyMCE or the like, please specify what enables these to do inline (or floating) content elements, and whether it allows pixel-perfect editing as shown in my screenshot.
.. i am guessing there is no such thing, and i'd have to build something from scratch. In that case i'd likely go for a simple template design where the users fills in fields and a bitmap preview is rendered serverside.
Based on your requirements, I feel like you're going to need to write something custom for this. I'm guessing that canvas would probably be best for this. That would involve having to draw everything onto the canvas, but it would give you good pixel perfection. It seems like that would be best if you want to emulate how the marquee display will render it. In terms of text editing, you could use some sort of input for that (WYSIWYG or not) and then just render it within a canvas element. I'm sure it's possible to emulate a cursor and to capture keyboard input to "write" directly to the canvas component, but that might be more work.
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
We don’t allow questions seeking recommendations for books, tools, software libraries, and more. You can edit the question so it can be answered with facts and citations.
Closed 7 years ago.
Improve this question
I'm exploring possibilities for automating browser content tests. WebDriver is something I'm looking at; also, PhantomJS / CasperJS. It appears easy enough to test for the presence of text content, or of a particular element. However, what I need is rather more complex. For instance:
Need to be able to determine whether text in one element overlaps a bounded area on the screen.
Need to be able to test for visibility of an element--not merely that it's not set as "hidden" but also that it's not covered up by another element.
Need to be able to verify correct layout of elements; e.g., that an image is displayed to the right of a block of text, rather than below it.
What it comes down to is the ability to automate the inspection of a Web application to make sure it looks and behaves as it's supposed to. Are the tools I've mentioned the right sort for this, and will they do what I need?
WebDriver handles "covered up", but not the other criteria you're looking for. You might find Fighting Layout Bugs interesting, though, as it tries to deal with exactly those.
I will propose you to use Web Driver with java and Sikuli api with java for visual testing. They can work together. You can make Webdriver to find elements by id and sikuli to find elements and locate their position by image, Also you can use Sikuli OCR to extract text from images and asserting it later, but OCR is not very reliable
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
We don’t allow questions seeking recommendations for books, tools, software libraries, and more. You can edit the question so it can be answered with facts and citations.
Closed 7 years ago.
Improve this question
Is there a good web application for manipulating a PDF files? For example, drag and drop images to it and save for future reference, then remove the dropped images anytime etc. I want to integrate it with my existing web application also.
EDIT:
These links I have came across while searching. Might be useful for someone searching the same.:)
PDFescape
Crocodoc
A.nnotate.com(a.nnotate.com)
GroupDocs Annotation(groupdocs.com/apps/annotation)
Mozilla has pdf.js which renders PDF files using HTML5. This same script is used in the built-in PDF reader of recent Firefox browsers.
It's experimental, but you could hack the code and do whatever you want with it.
If you are looking for just an online tool which will spit the pdf file use - Sejda
there is a lot of other tools available online too
PDF Sharp will allow you to do all sort of manipulation that you require. It is open source, free to use. You can download it from here..
Features include
Creates PDF documents on the fly from any .Net language
Easy to understand object model to compose documents
One source code for drawing on a PDF page as well as in a window or on the printer
Modify, merge, and split existing PDF files
Images with transparency (color mask, monochrome mask, alpha mask)
Newly designed from scratch and written entirely in C#
The graphical classes go well with .Net
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
We don’t allow questions seeking recommendations for books, tools, software libraries, and more. You can edit the question so it can be answered with facts and citations.
Closed 7 years ago.
Improve this question
I've been searching for a long time now for a fairly simple JavaScript based tooltip solution. It needs to be:
Open-Source and freely re-distributable, and allows my application to include it which would be distributable via free or commercial license.
'Sticky' i.e when opened it stays visible until the user clicks a little close button on it or ESC button is pressed.
Style-able via CSS (preferably) or JavaScript.
Compatible with IE6 or IE7 onwards, as well as modern browsers ;)
I did manage to find http://www.nickstakenburg.com/projects/prototip2/ (see the buttons example on that page) which meets all the requirements - except that I wouldn't be able to distribute what I'm creating for free which makes it a no-go :(
It only needs to able to handle basic HTML (div, p, span, img, etc) within the tooltip.
Thanks,
Alex
Use qTip a jQuery based opensource tooltip plugin, you can control the events when to show the tip. for example show: { when: { event: 'click' } } this will show the tooltip on click on the target element. Hope this helps
If you're looking for a tooltip that also works without a library (like jQuery) you can use Opentip which uses adapters for all major frameworks, and provides a native adapter that doesn't need a framework.
It's open source and MIT licensed.
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
We don’t allow questions seeking recommendations for books, tools, software libraries, and more. You can edit the question so it can be answered with facts and citations.
Closed 2 years ago.
Improve this question
Does anyone know about a tutorial that lets you to create something like pageflakes.com for your website? In jquery perhaps?
The creator of PageFlakes, Omar al Zabir, has created an open-source web portal called DropThings. Can't get any more similiar to PageFlakes than that!
You can use the UI library from jQuery where you'll find the draggable elements with grid. Besides that you only need to set and read some cookies that determine the position of each of the boxes.
Let's say your layout has 4 <div>s. Just save each id and position in a cookie (from javascript or by performing an AJAX request to a php/asp page).
Displaying the page is also pretty easy, you have to have 2 possibilities: when the user has a cookie defined, or else (this would be the default). If the user has a cookie defined, read it and position the <div>s like the cookie says, it shouldn't be too hard to do this.
This article on CodeProject has an excellent tutorial on how to build almost exactly what you're after, except that it uses ASP.Net Ajax. You would easily be able to substitute that with jQuery though.
.nettuts has an example all done in jquery and jquery ui. Here's the link:
http://net.tutsplus.com/tutorials/javascript-ajax/inettuts/
Goes through it all in very nice detail too. It won't be a direct copy of pageflakes, that's an exercise left for the reader but it does show exactly how to start.
HTH!
Check out ExtJS's Panels. They're what's used to build this pageflakes look-alike:
http://extjs.com/deploy/dev/examples/portal/portal.html