Editorjsblock

Moves all code 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 %}

Javascript template building tools

To get acces to additional tools, link to edicy-tools.js must be provided

{% 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 %}

• Custom data binder - Allows binding user defined additional data to site, page or article object. Data is later available in template on bound object.
  
• Image drop area - makes an element listen and interact to image dropped from files panel (drag-drop image replacement).
  
• Image/background and color picker - Allows adding a button that opens a modal for changing an image and/or color.