Click on the image to see the Image Position icon on the toolbar.
<!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/imageposition.js"></script>
<!-- call -->
<script>
ArticleEditor('#entry', {
plugins: ['imageposition'],
css: '/your-article-dist-path/'
});
</script>
</body>
</html>
By default, the editor sets these CSS classes for image position:
left: 'float-left',
center: 'align-center',
right: 'float-right'
This means that in the output code the image will have a class and will look like this:
<figure class="float-left">
<img src="...">
</figure>
You can change it to your classes by specifying them in the settings when you start the editor.
ArticleEditor('#entry', {
plugins: ['imageposition'],
css: '/your-article-dist-path/'
imageposition: {
items: {
left: 'my-float-left',
center: 'my-align-center',
right: 'my-float-right'
}
}
});
Now the class will be set into a block tag as specified in the settings.
<figure class="my-float-left">
<img src="...">
</figure>
You can specify your own styles for image positioning in a separate CSS file using the custom.css
setting, for example, as follows:
ArticleEditor('#entry', {
plugins: ['imageposition'],
css: '/your-article-dist-path/',
custom: {
css: ['/your-article-dist-path/your-image-styles.css']
},
imageposition: {
items: {
left: 'my-float-left',
center: 'my-align-center',
right: 'my-float-right'
}
}
});
As a result, your file your-image-styles.css
can look like this:
.my-align-center {
text-align: center;
}
.my-align-center img {
margin-left: auto;
margin-right: auto;
max-width: 500px;
}
.my-align-center figcaption {
text-align: center;
}
.my-float-left {
float: left;
margin-right: 1.5em;
margin-bottom: 1.5em;
max-width: 300px;
}
.my-float-right {
float: right;
margin-left: 1.5em;
margin-bottom: 1.5em;
max-width: 300px;
}
Using the settings, you can disable unnecessary image position items.
ArticleEditor('#entry', {
plugins: ['imageposition'],
css: '/your-article-dist-path/',
imageposition: {
items: {
center: false
}
}
});