I need to build a visual designer image or card designer that lets you add text boxes of text (multiple fonts), or images, drag them around, and resize them.
This seems rather simple but I would yet think common - but so far I haven't found anything I could use as a basis for this.
What I'm looking for is something like Keynote but super basic.
I've looked at:
remark.js: presentation only
reveal.js: Pretty close, but only the presentation engine is open source. The visual editor is a closed source service.
mxgraph / jgraph: designed for directed graphs or flowchart
gojs: designed for directed graphs or flowchart
contentbuilder: its a layout engine for a page with stacked layout modules, I need something that authors a card
Of course also staple javasript editors like ACE, CK and TinyMCE but they solve the font editing / font selection problem, but not the drag & drop boxes & layout issue.
What I'm trying to build is something you might use on tinyprints.com or minted when you design your card, or canva.com.
But my needs are really basic - so I'm thinking that possibly the reason there isn't a library for this is that its pretty easy to build it? Anyway, would love some input.
It's less of a layout editor/designer but Fabric JS has a lot of the features you are looking for (multiple fonts, dragging images around and resizing). It's Canvas-based but can export to JSON if you need to transfer to a non-raster format. Might be adaptable if this is still a need.
Related
I am building a page builder tool using Vuejs 2.6.11 and Vuetify 2.3.10.
One of the concepts of this tool is that the elements can be dragged and dropped anywhere and can overlap each other.
Now, I want to give an extra feature to this drag-and-drop concept when elements are being dragged, alignments lines (basically an alignment ruler) should be displayed so the user can know the alignment between elements like this-
draw.io is an example to see this kind of feature in behavior.
I found many good libraries of drag-and-drop in vuejs but no one is providing the alignment lines or ruler when dragging the elements.
Libraries I looked into it-
https://www.dunebook.com/18-best-vue-drag-and-drop-libraries/
If anyone can suggest a suitable solution either a library or a custom way to implement this, would be a great help.
I am reconstructing a massive collection of medical modules that were created in Flash. All of the modules are being redesigned for cross platform enjoyment (js and HTML5). I have been searching for a library or plugin that will add arrows(with rollover capabilities) and text above an image when the user clicks a button. I have had little luck.
The closest package I have found is Zoomify, but it's still not what I am looking for. They are asking for too much money for maximum development capabilities. I was really hoping to find a JQuery plugin or javascript library that would allow me to fully customize the interface. Here is a screenshot of an OLD FLASH module:
The red arrow corresponds to the link selected on the left. The new design is much more appealing but the underlying idea is the same, click buttons point to the objects.
If there is no such library or plugin should I create a simple javascript image viewer and store overlay coordinates in a database? Or is that overkill? I have hunderds of these things to do... maybe thousands :( Any help/direction would be greatly appreciated.
What you are asking for is provided by CSS, which enables one to place text directly on top of an image or other rendered HTML. The key CSS properties to investigate are:
position set to 'absolute'
values for at least two of top, right, bottom or left
use z-index to specifying layering/order
Lightbox is a good option "Lightbox is a simple, unobtrusive script used to overlay images on top of the current page. It's a snap to setup and works on all modern browsers."
Sencha Touch seems like an amazing way to develop mobile apps. I've seen posts by people incorporating Jquery, D3.
At the same time the posts describing customizing controls seems to be fairly narrow.
Adding the picture of a kitten next to the slider and labeling the slider seems kinda tame compared to what ios can do in terms of custom controls, at least in terms of examples available. Most blog posts imply you can extend the control objects in Sencha or the CSS file.
These posts are not quite what I'm looking for - that's my problem. I can't see any examples of anyone changing default controls in Sencha touch, but they make it sound as if it might be possible to do anything.
This is my question:
Is Sencha Touch able to build an iOS or Android App incorporating any javascript library or HTML5? Are there any limitations here?
To give an example I trying to implement a custom slider, where a touch along a continuous line or a circle like this color selector will enter new values. Further if you incorporate a library like protovis or D3 (or Raphael charts) can Sencha display anything the graph canvas element will otherwise display? Will it take touch input and interact with the graph libraries the way that the HTML5 graph does?
The post you mentioned is not about customizing controls, it's about displaying a list from bound store, instead of of using just Ext.XTemplate (the system with Ext.view.View) to generate HTML, it uses ComponentView to generate Ext.Components instead.
It's hard to tell what you're asking, what in particular are you trying to do?
To address some of the questions you added:
Charts in Sencha are implemented using Raphael, which uses SVG, therefore all the elements in the chart can be interacted with using HTML events.
Everything that Sencha generates is valid HTML, you can listen to HTML events, but components usually abstract the lower level events into something that is easier to consume, (for example a data view abstracts the click so that it passes the record being clicked along with the event).
Therefore, the answer to the question is, YES, Sencha can co-exist with regular HTML. If you want the full benefit of the framework, you should always create an Ext.Component so that your components can be easily used within the framework's layout containers.
It's very easy to misuse Ext when trying to write regular HTML and still place that within the layout rendering pipeline. Ext.Component has a built in way of creating HTML out of templates, see http://docs.sencha.com/touch/2-0/#!/api/Ext.Component-cfg-data and http://docs.sencha.com/touch/2-0/#!/api/Ext.Component-cfg-tpl
I'm looking for a js WYSIWYG editor that lets me insert readymade content that should be non-editable via the editor's interface, but via a link on it and some custom user interface. Users should be able to add objects to the content that are too complex to be handled by the editor by default and that are finally rendered when the page is displayed.
Looking around I found some TinyMCE plugins, non-editable content and atomic sections, which both point in the right direction but don't look too promising to me. For that I'd like to know if anybody out there has experiences with implementing some functionality like this or can point me to an editor that is probably more suitable for that than TinyMCE?
I implemented something similar using YUI Rich Text Editor. Considering my requirements, dealing with non-editable elements inside an iFrame was a hassle. What I ended up doing is this: whenever the user inserts a custom item using the toolbar (in my case it was a custom gallery with embeddable videos, etc.), I'd "split" the content of the editor at the cursor and insert a gallery "between" the editors. You end up with 2 actual editors and a gallery:
It required a bit of work to manage and render all of the objects and it had its downsides. But with proper CSS and some JS it could be made to look like and work like it's part of the editor.
I think you should stick with Tinymce. Actually all real time editors for browsers use an iframe in which the text gets put due to styling issues i guess. So using another editor won't solve the iframe problem MK_Dev described.
I'm trying to create a web-based WYSIWYG editor that consists of a canvas and a tool bar with widgets such as text object, shape object, line object, image object, video object and photo gallery object. A person can click and drag objects from the tool bar and place them into the canvas area. Once placed in canvas, they can change the properties of the objects. Properties they can change are width, height, color, z-index etc....
Does anyone know if there's an off the shelf solution I can start from and customize? If not, then what libraries and technologies should I be aware of to build this from scratch?
I'm primarily a backend developer, so I'm not up to speed with all the new things that come with HTML5 and CSS3, so not sure if they are relevant to what I need to do.
we (#work) have started a research project with University of Padua (italy - course of Software Engineering) aimed to obtain a web page generator. It's a WYSIWYG and you can Drag and drop widgets from toolbar into canvas :) unfortunately, the UI is in Italian but the code is very good.
It's an open source project and you can take a look # the source.
The technologies that have been used are:
HTML5 (<canvas> to easily represent shapes and easily zoom-in/out)
javascript/jQuery
Php (backend script to save/load templates)
references: http://sketchyoursite.sourceforge.net/ (http://sourceforge.net/projects/sketchyoursite/)
Edit: another tool that could be helpful is https://gomockingbird.com/mockingbird/
About starting from scratch, I suggest you to use the following architecture/technologies:
HTML+css obv for the basic layout (widget toolbar, canvas area...)
Tons of JS to represent each different object. I.e. you could map a particular widget with a pure JS object that could have some properties. These props are rendered when you click the object inside the canvas area. When you want to drag an object inside the area, resize it etc you should use a js lib (personally, I prefer mootools, also coz it simplifies OO through the Class system).
Server side scripts (Php, ruby, java...) to save (XML, Json..DB?) and load.
check http://fabric.js
I am developing a diagram tool using this similar to dia , awesome support for drap-drop-scale
I recently stumbled across Hotglue, it works like that but unfortunately without canvas. I guess they (and me) would be very happy to transform it from div positioning to canvas, it is in their todo list for a far away release at least.