I have integrated various WYSIWYG HTML editors over the past few years, but I think I have hit a brick wall on this one.
We need a way for people to edit text that turns into VML/SVG when rendered, but remains editable, with minimal styling such as bold, italic, font face and size, and if possible, ability to create a text region anywhere on the canvas. Google Docs has what appears to be one in their presentation editor. Something like that would work ~ its very close to what we are looking for.
Does anyone know of a commercial or free editor that does this (must be browser based), and if not, has anyone approached doing this, and if so, what were your results. Any other info, links, suggestions etc are welcome - I seem to have hit a brick wall on this one.
Thanks.
You might try http://svg-edit.googlecode.com/ though we do not translate to VML (we require IE users to install the Google Chrome Frame plugin).
One important question first: Why specifically should the output of the WYSIWYG editor be in VML/SVG?
===
I am not aware of any existing editor that fits your description. You may have to write one yourself. If you are going to roll your own, I have two suggestions; one of which I am less confident about in terms of capability and one where I am not entirely sure about the performance ramifications because of the sheer amount of libraries involved. Either way, these are the two best bets in my opinion:
1) If you're intent upon VML/SVG, one library I know that can bring the two together is RaphaelJS, which has some degree of text support, but I'm really not sure how sophisticated the degree of manipulation of the text is:
Raphael JS lib: http://raphaeljs.com/index.html
2) Can you instead use VML/Canvas? I would recommend using VML/Canvas via the exCanvas library (which allows you to write code using the HTML5 canvas element, which is automagically translated to VML in IE/Trident browsers), in addition to the new canvas-text library.
Generic canvas information (generic drawing api):
https://developer.mozilla.org/en/Canvas_tutorial
exCanvas (IE compatability layer for canvas element)
http://excanvas.sourceforge.net/
canvas-text (text-specific extension to browsers with poor canvas text support):
http://ajaxian.com/archives/canvas-text-add-text-functions-to-subpar-canvas-implementations
Related
It has been a long time since I have had to do Image Mapping! Probably like 4-5 years.
The last time I achieved this using the tag and creating tags for polygonal shapes. This of course works, and is still supported html, even in HTML5. Question is though, is this still a good way to go for image mapping? Or should i scrap this direction and aim to use Canvas or SVG techniques instead?
There are a couple of factors in regards to the decision:
The client uses IE7, so the solution has to work with IE7 and IE8, hence me thinking not to use SVG or Canvas, it would be easier I guess to use the old school map tag, at least it will easily work across all platforms.
The Map has quite custom styles (strokes around the areas with a margin gap too)
Each area has a rollover state, with a popup with content unique for each region. This will have to be achieved with JS. Are there any issues using JS to interact with the DOM structure of the map using map tag?
It's not essential, but I would to make the map somewhat responsive to the viewport.
Using the tag frankly feels really old school, dated and dirty. But, to be honest for my case, it seems like the most suited solution. What does everyone think?
Any feedback welcome,
Thanks,
Craig
For your requirements I think best suite is SVG. By some work around you can make use of all time favorite jQuery with SVG and build cool stuff so quickly. I was able to develope a ticket booking tool on theaters with SVG maps within two weeks.
Also now every one needs every thing on mobile and it works on mobile with just no efforts.
Try to convince client to upgrade IE, that will be best for you. All the best.
I want to create not complex interactive web application. It has some pinboard and user can create many simple objects on this pinboard (e.g. many small circles). After this user can:
move these objects
delete some of them or create new ones
make multiple selection and move/rotate elements of selected group
place members of the selected group in some special order (grid, line, circle, etc)
Zoom in/out pinboard
I think that I can use Flash/Flex or JavaScript/SVG/VML for this purpose. Disadvantage of Flash is that user must have plugin. Minus of JS/SVG/VML is that there aren't such powerfull developing tools as in Flash case, but if we use some library (like http://raphaeljs.com/) application won't require flash plug-in.
I'm finding right tool for this aim. So give me some recommendations, please. Thanks in advance.
I believe that you can achieve your goals without Flash using HTML(5), JavaScript and not the least the Canvas element present in HTML5.
Bottomline is, unless you today require your application to animate a lot of objects with framerates approaching three digits, the above should suffice fine and will also pair you with a prospective Web development platform. I am often sceptical of the new stuff, but HTML5 and Canvas are fairly standardized, patent-free and are being actively adopted.
The only benefit of going with Flash that I can think of is being backed by a rich API that does 2D as well as 3D, and the fact that you can later port your ActionScript code to say, JavaScript when you finally decide to go with HTML+JavaScript instead. Aside from having to perhaps rewrite part of your drawing stack, your ActionScript code will require minimal (syntactic mostly) changes.
I would still advise you to go with my first suggestion, unless you need live (camera) video publishing, 3D, sound editing and few features not available easily outside Flash Player. Which I don't think you will need.
You might want to have a look at existing similar projects, such as SVG Edit (MIT license).
So here's the scenario: I have an 800kb Adobe Illustrator file -- it's a topdown diagram of of a mall, with each individual shop marked with some text. Metadata showing square footage, availability, a number.
How would I put this on the web in a way that's interactive? I can simply export a PDF to the web, but that's not a great experience. I'd like to be able to zoom in and see detail (it's a big mall) and maybe be able to click to send an email or a message about an individual space to make an inquiry about it.
If it were 4-8 years ago, the natural answer is Macromedia Adobe Flash of course! But we're now in an era where people want to see these things on their phones.
Is it possible to do this in a way that works reasonably well? I tried loading the file using svgweb, but my browser (any browser) grinds to a halt, I think because of the the size of the file.
What are examples of maps that are cross browser, zoomable, and interactive?
What tools or libraries do people have success with in this area? it feels like GIS tools would be worthwhile here but might be overkill.
If you want to go for a tiled approach similar to google maps, check out polymaps.
If your svg is big then it's probably a good idea to split it somehow, either by level-of-detail / layers, or by tiles. Level of detail can be done with CSS media-queries for example, but note that that by itself doesn't make the filesize smaller. It should however have a positive effect on the look & feel.
If you want some simple zoom&pan controls that should work in all svg-capable browsers here's an example of that.
Adobe Illustrator can export to SVG which might be worth exploring.
Also, have you considered rasterizing and cutting the image into tiles? You could make something that's Google Maps-like.
I'm currently working on a WYSIWYG editor for a client (It's not like any other editor, it will also be able to insert drawings using HTML5) And I've been looking at and using several ways to insert content.
Ok, so I have a div with contentEditable set to "true", and I'm stuck on a way make the text a different size/font by inserting tags before and after to cursor, or something similar. I've tried using Design Mode with execcommand, but that didn't work. Can somebody help?
You have some reading to do. If you're taking this on, be aware that it's a tricky and time-consuming task to write a WYSIWYG editor in JavaScript: there are many bugs, quirks and discrepancies between browsers and the fact that you're here asking such a general question on Stack Overflow at this stage doesn't bode well. Most of the browser makers have easily-found documentation on their implementations of designMode and contenteditable (see MDC, for example), so you could start there. To do things like inserting an element at the cursor, you'll also need to learn how to deal with Selections, DOM Level 2 Ranges and TextRanges in IE up to version 8. Finally, looking at the source code of some the popular editors such as TinyMCE and CKEditor may help; simpler, smaller editors (there's loads around) might be even more helpful.
I'm trying out some dynamic web page background generation using lines and text.
Take a look at my demo at http://74er.net/labs/lines.html (just focus on the yellow line).
It's a lame and inefficient method by literally creating a <span> element with 1 X 1 size and a yellow background with the X,Y position based on an ellispe formula.
My requirements is for the line creation are fairly simple (or rather straightforward):
must be created at client-side and not a dynamic image generated by server scripts
can be created based on a simple formula (circle, ellispe or just a straight line)
can be contained in a DOM element (e.g. DIV so that I can layer it as a background)
No HTML5 canvas technique (simply because it should be rendered on non-HTML5 compliant browsers)
Not too taxing on the browser like my current implementation
There's not need for:
really smooth curves (though that will be welcomed)
dotted/dashed (I'll like that as well if feasible)
Based on the above, I am almost certain SVG (with Raphaël) is the way to go BUT I am put off by lack of native SVG support in some browsers.
I have looked at Walter Zorns library, and it is has some excellent performance tuning algorithms built-in. So it'll be my choice if I can't find a more creative implementation.
Let me know if you need further clarification.
Morning,
i have enjoyed to work with the drawing features from the Dojo Toolkit. You can see it in action here:
Dojo drawing example
To Download Dojo visit:
Dojo Toolkit