This example shows how to float images to the left and right using the Style plugin.
<!DOCTYPE html>
<html>
<head>
<title>Article Editor</title>
<meta charset="utf-8">
<!-- css -->
<link rel="stylesheet" href="/your-article-dist-path/article-editor.min.css" />
</head>
<body>
<!-- element -->
<textarea id="entry">
<p>Content</p>
</textarea>
<!-- js -->
<script src="/your-article-dist-path/article-editor.min.js"></script>
<!-- call -->
<script>
ArticleEditor('#entry', {
plugins: ['style'],
css: '/your-article-dist-path/',
custom: {
css: ['/your-article-dist-path/float.css']
},
styles: {
image: {
'float-left': {
title: 'Float left',
classname: 'float-left'
},
'float-right': {
title: 'Float right',
classname: 'float-right'
}
}
}
});
</script>
</body>
</html>In this example we include additional styles for float in the file float.css, its contents can be this way:
.float-left {
float: left;
max-width: 200px;
margin-right: 0.75rem;
}
.float-right {
float: right;
max-width: 200px;
margin-left: 0.75rem;
}