Code
<!DOCTYPE html>
<html>
<head>
<title>Redactor X</title>
<meta charset="utf-8">
<!-- css -->
<link rel="stylesheet" href="/your-dist-path/redactorx.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="drop-1.png" data-rx-drop-id="card-01"></li>
<li><img src="drop-2.png" data-rx-drop-id="card-02"></li>
<li><img src="drop-3.png" data-rx-drop-id="card-03"></li>
</ul>
</div>
</div>
<div data-rx-drop-item="drop-01" style="display: none">...html code...</div>
<div data-rx-drop-item="drop-02" style="display: none">...html code...</div>
<div data-rx-drop-item="drop-03" style="display: none">...html code...</div>
<!-- js -->
<script src="/your-dist-path/redactorx.min.js"></script>
<!-- call -->
<script>
RedactorX('#entry');
</script>
</body>
</html>Usage
In the example code you can see that when dragging an image with data-rx-drop-id Redactor X takes html code of the block from div layer
with the corresponding data-rx-drop-item attribute.
Html for the block can also be specified through settings, for example:
RedactorX('#entry', {
draggable: {
'drop-01': '...html...',
'drop-02': '...html...',
'drop-03': '...html...'
}
});