Provides a complete and very simple API to create your own svg online editor. UI is your concern.
http://yannickbochatay.github.io/JSYG.FullEditor
npm install jsyg-fulleditorHTML
<svg width="500" height="500" id="editor"></svg>
Shape :
<select name="shape">
<option>circle</option>
<option>rect</option>
<option>line</option>
<option>polyline</option>
</select>
<button id="importImage">Import image</button>
<button id="download">Download</button>Javascript
var svgEditor = new JSYG.FullEditor("#editor");
svgEditor.enable();
svgEditor.newDocument(600,600);
$("[name=shape]").on("change",function() {
svgEditor.shapeDrawerModel = '<'+this.value+'>';
}).trigger("change");
svgEditor.enableShapeDrawer();
$("#importImage").on("click",function() {
svgEditor.chooseFile().then(svgEditor.insertImageFile);
});
$("#download").on("click",function() {
svgEditor.download("svg");
});https://github.com/YannickBochatay/JSYG.FullEditor/blob/master/script.js
- registerKeyShortCut
- unregisterKeyShortCut
- selectAll
- deselectAll
- enableKeyShortCuts
- disableKeyShortCuts
- getLayers
- addLayer
- removeLayer
- getDocument
- hideEditors
- enableSelection
- disableSelection
- disableInsertion
- disableEdition
- duplicate
- dim
- rotate
- css
- triggerChange
- cursorDrawing
- drawShape
- align
- load
- loadString
- readFile
- loadFile
- loadURL
- loadXML
- newDocument
- toCanvas
- toSVGString
- toSVGDataURL
- toPNGDataURL
- toDataURL
- downloadPNG
- downloadSVG
- download
- remove
- group
- ungroup
- center
- centerVertically
- centerHorizontally
- registerPlugin
- defineProperty
- defineProperty
- defineProperty
- defineProperty
- defineProperty
- defineProperty
- defineProperty
- defineProperty
- defineProperty
- defineProperty
- defineProperty
- defineProperty
- defineProperty
You can also pass an object with several key shortcuts as keys/values
keystring jquery hotkeys syntax (example : "ctrl+i")fctfunction callback called when key or combination keys are pressed
Returns JSYG.FullEditor
Unregister a key shortcut
keystring jquery hotkeys syntax (example : "ctrl+i")
Returns JSYG.FullEditor
Select all editable elements in document
Returns JSYG.FullEditor
Deselect all editable elements
Returns JSYG.FullEditor
- See: JSYG.prototype.registerKeyShortCut
Enable all key shorcuts registered by registerKeyShortCut method
Returns JSYG.FullEditor
- See: JSYG.prototype.registerKeyShortCut
Disable all key shorcuts registered by registerKeyShortCut method
Returns JSYG.FullEditor
Get all layers defined
Returns JSYG
Add and use a new layer
Returns JSYG.FullEditor
Remove a layer
Returns JSYG.FullEditor
Get document as a DOM node
Returns Element
Hide shape and text editors
Returns JSYG.FullEditor
Enable mouse pointer selection
Returns JSYG.FullEditor
Disable mouse pointer selection
Returns JSYG.FullEditor
Disable mouse pointer insertion
Returns JSYG.FullEditor
Enable edition functionalities
Returns JSYG.FullEditor
Duplicate selected element
Returns JSYG.FullEditor
You can also pass an object
Rotate selected element
valuenumber angle in degrees
Returns JSYG.FullEditor
Get or set css property
propstring name of css propertyvalue
Trigger change event
Returns JSYG.FullEditor
cursorDrawingstring name of css cursor when drawing is active
Draw one shape
modeletype
Returns Promise
Aligne les éléments sélectionnés
typeString (top,middle,bottom,left,center,right)
Returns undefined
Load a document from a file, an url, a xml string or a xml node
arg
Returns Promise
Load a document from a svg string
strstring
Returns JSYG.FullEditor
Read a File instance
fileFilereadAsstring optional, "DataURL" or "Text" ("Text" by default)
Returns Promise
Load a document from a File instance
fileFile
Returns Promise
Load a document from an url
urlstring
Returns Promise
Load a document from a xml node
svgDOMElement
Returns JSYG.FullEditor
Create a new document
Returns JSYG.FullEditor
Convert document to a canvas element
Returns Promise
Convert document to a SVG string (keep links)
optobject options (for the moment only "standalone" as boolean, to converts links to dataURLs)
fullEditor.toSVGString({standalone:true})Returns Promise
Convert document to a SVG data url
Returns Promise
Convert document to a PNG data url
format
Returns Promise
Convert document to data URL
formatstring "svg" or "png"
Returns Promise
Print document
Returns Promise
Download document as PNG
Returns Promise
Download document as SVG
Returns Promise
Download document
formatstring "png" or "svg"
Returns JSYG.FullEditor
Remove selection
Returns JSYG.FullEditor
Group selected elements
Returns JSYG.FullEditor
Ungroup selection
Returns JSYG.FullEditor
Center selected elements
orientationstring "vertical" or "horizontal"
Returns JSYG.FullEditor
Center selected elements vertically
Returns JSYG.FullEditor
Center selected elements horizontally
Returns JSYG.FullEditor
Register a plugin
pluginobject
Returns JSYG.FullEditor
editTextboolean set if text elements can be edited or not
editPositionboolean set if elements position can be edited or not
editSizeboolean set if elements size can be edited or not
editRotationboolean set if elements rotation can be edited or not
editPathMainPointsboolean set if main points of paths can be edited or not
editPathCtrlPointsboolean set if control points of paths can be edited or not
canvasResizableboolean set if the editor can be resized or not
keepShapesRatioboolean set if ratio must be kept when resizing
drawingPathMethodstring "freehand" or "point2point". Set method of drawing paths
autoSmoothPathsboolean set if paths must be smoothed automatically when drawing
useTransformAttrboolean set if transform attribute must be affected when editing size and position, instead of position and size attributes
currentLayernumber set current layer of edition
shapeDrawerModelobject dom node to clone when starting drawing