Click on the image to see the resizer on the right side.
<!DOCTYPE html>
<html>
<head>
<title>Article Editor</title>
<meta charset="utf-8">
<!-- css -->
<link rel="stylesheet" href="/your-article-dist-path/article-editor.css" />
</head>
<body>
<!-- element -->
<textarea id="entry">...</textarea>
<!-- js -->
<script src="/your-article-dist-path/article-editor.js"></script>
<script src="/your-article-dist-path/plugins/imageresize.js"></script>
<!-- call -->
<script>
ArticleEditor('#entry', {
plugins: ['imageresize'],
css: '/your-article-dist-path/'
});
</script>
</body>
</html>
The image resize plugin has three events:
Occurs whenever the resizing starts.
ArticleEditor('#entry', {
plugins: ['imageresize'],
css: '/your-article-dist-path/',
subscribe: {
'image.resize.start': function(event) {
var e = event.get('e');
var $image = event.get('image');
var $block = event.get('block');
}
}
});
Occurs during the resizing of the image.
ArticleEditor('#entry', {
plugins: ['imageresize'],
css: '/your-article-dist-path/',
subscribe: {
'image.resize.move': function(event) {
var e = event.get('e');
var $image = event.get('image');
var $block = event.get('block');
}
}
});
Occurs whenever the resizing ends.
ArticleEditor('#entry', {
plugins: ['imageresize'],
css: '/your-article-dist-path/',
subscribe: {
'image.resize.stop': function(event) {
var e = event.get('e');
var $image = event.get('image');
var $block = event.get('block');
}
}
});