Code
<!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 -->
<div style="display: flex">
<div style="flex: auto;">
<textarea id="entry">...</textarea>
</div>
<div style="width: 200px;">
<ul>
<li><img src="card-1.png" data-arx-drop-id="card-01"></li>
<li><img src="card-2.png" data-arx-drop-id="card-02"></li>
<li><img src="card-3.png" data-arx-drop-id="card-03"></li>
</ul>
</div>
</div>
<div data-arx-drop-item="card-01" style="display: none">...html code of card 01...</div>
<div data-arx-drop-item="card-02" style="display: none">...html code of card 02...</div>
<div data-arx-drop-item="card-03" style="display: none">...html code of card 03...</div>
<!-- js -->
<script src="/your-article-dist-path/article-editor.min.js"></script>
<!-- call -->
<script>
ArticleEditor('#entry', {
css: '/your-article-dist-path/'
});
</script>
</body>
</html>Usage
In the example code you can see that when dragging an image with data-arx-drop-id Article takes html code of the block from div layer
with the corresponding data-arx-drop-item attribute.
Html for the block can also be specified through settings, for example:
ArticleEditor('#entry', {
css: '/your-article-dist-path/',
draggable: {
'card-01': '...html...',
'card-02': '...html...',
'card-03': '...html...'
}
});