Image Block for the CodeX Editor.

• Uploading file from the device
• Pasting copied content from the web
• Pasting images by drag-n-drop
• Allows to add border, background
• Allows to stretch image to the container's full-width

Note This Tool requires server-side implementation for file uploading. See backend response format for more details.

Get the package

npm i --save-dev codex.editor.image

Include module at your application

const ImageTool = require('codex.editor.image');

1. Upload folder dist from repository
2. Add dist/bundle.js file to your page.

You can load specific version of package from jsDelivr CDN.

https://cdn.jsdelivr.net/npm/codex.editor.image@1.0.0

Then require this script on page with CodeX Editor through the <script src=""></script> tag.

Add a new Tool to the tools property of the CodeX Editor initial config.

var editor = CodexEditor({
 ...
 
 tools: {
 ...
 image: {
 class: ImageTool,
 config: {
 url: 'http://localhost:8008/', // Your backend uploader endpoint 
 }
 }
 }
 
 ...
});

1. Add border

2. Stretch to full-width

3. Add background

This Tool returns data with following format

{
 "type" : "image",
 "data" : {
 "file": {
 "url" : "https://www.tesla.com/tesla_theme/assets/img/_vehicle_redesign/roadster_and_semi/roadster/hero.jpg"
 },
 "caption" : "Roadster // tesla.com",
 "withBorder" : false,
 "withBackground" : false,
 "stretched" : true
 }
}

This Tool works by following scheme:

1. User select file from the device
2. Tool sends it to your backend
3. Your backend should save file and return file data with JSON at specified format.
4. Image tool shows saved image and stores server answer

So, you can implement backend for file saving by your own way. It is a specific and trivial task depending on your environment and stack.

Response of your uploader should cover following format:

{
 "success" : 1,
 "file": {
 "url" : "https://www.tesla.com/tesla_theme/assets/img/_vehicle_redesign/roadster_and_semi/roadster/hero.jpg",
 // ... and any additional fields you want
 }
}

success - uploading status. 1 for successful, 0 for failed

file - uploaded file data. Must contain an url field with full public path to the uploaded image. Also, can contain any additional fields you want to store. For example, width, height, id etc. All additional fields will be saved at the file object of output data.