Moves all code in between {% editorjsblock %}
and {% endeditorjsblock %}
to a place in html where Edicy object is fully initialized. This gives access to Edicy javascript object in editmode, for buiding custom editing components. Also additional javascript tools available in editmode in this block.
Mind you, subcollections like Edicy.articles
and Edicy.elements
are loaded separately after the DOM has fully rendered and initialized, so we advise wrapping your custom code into a DOMContentLoaded
callback or into Edicy.jQuery(function($) { ... })
when using jQuery.
Only one {% editorjsblock %}
can be rendered per layout.
Example of using jQuery supplied by Edicy.
{% editorjsblock %}
<script>
Edicy.jQuery(function($) {
var docHeight = Edicy.jQuery(document).height();
});
</script>
{% endeditorjsblock %}
{% editorjsblock %}
<script src='{{ site.static_asset_host }}/libs/edicy-tools/latest/edicy-tools.js'></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
// Your code here ...
}
</script>
{% endeditorjsblock %}