Graphic Tools Integration

How to Include

JS files for these components aren't included in the lib package and should be taken:

<script src="https://cdn.webix.com/components/edge/ckeditor/ckeditor.js"></script>

Webix library supports integration of popular graphic tools in the application with the help of its own components. For now, the following graphic tools can be included:

To embed any of the tools into your web page, you should link not only to Webix, but also to a special JavaScript file from the components folder. This file will connect you to the chosen editor as well load extra required files for it.

Note that in documentation samples files are linked in another way, but in your apps you should follow the patterns described below.

Setting Path to the Component

You can set path to sources of the necessary graphic tool on CDN. Actually, there are three ways to do that:

  • via the cdn property in the view configuration. This way allows setting path to the particular version of the necessary library or to the local CDN;
  • not setting any paths at all. In this case either the official CDN of the component or the global cdnjs (if the source of the component is available there) will be used;
  • by directly including all the source files of the component on a page. In this case you should set the cdn property to false to avoid possible collisions with the component version included by default.

Konva JS

You can download JS file for the Konva JS tool from github.

Konva is an HTML5 Canvas JavaScript framework that extends the 2D context by enabling canvas interactivity for desktop and mobile applications.

Learn more about Konva.js library

Related sample:  Konva JS graphic tool

Component Initialization

Link to the library

<script type="text/javascript" src="./konva.js"></script>

JS code

webix.ui({
    view:"konva", 
    ready:function(){...};
});
  • ready - function that is executed when the component is fully loaded. It contains the necessary shapes and layers configuration (available on their site).

Paper JS

You can download JS file for the Paper JS tool from github.

Paper.js is an open source vector graphics scripting framework that runs on top of the HTML5 Canvas.

Learn more about Paper.js library

Related sample:  Paper JS graphic tool

Component Initialization

Besides the library itself, you need to link a js file with necessary PaperScript and associate it with a related canvas specified by the canvas property.

PaperScript code is loaded using the < script > tag and the type being set to "text/paperscript". The code can either be an external file (src="URL"), or inlined. Read the details in the Paper.js documentation.

Link to the library

<!-- Load the Paper.js library -->
<script type="text/javascript" src="./paper.js"></script>
<!-- Load external PaperScript and associate it with canvasB -->
<script type="text/paperscript" src="./paperballs.js" canvas="canvasB"></script>

JS code

webix.ui({
    view:"paper", 
    canvas:"canvasB"
});
  • Full list of a Paper object properties can be found on their site.
Back to top