Custom Block Widget Example

This example is a custom Quilljs block in a single HTML page that is served by a node app and hosted on Heroku.

https://quill-block.herokuapp.com/

1var BlockSDK = require("blocksdk");
2if (window.self === window.top) {
3  document.body.innerText =
4    "This application is for use in the Marketing Cloud Engagement Content Builder editor only.";
5} else {
6  var sdk = new BlockSDK();
7  sdk.getContent(function (content) {
8    var quill = new Quill("#editor-container", {
9      theme: "snow",
10    });
11    quill.root.innerHTML = content;
12    function saveText() {
13      var html = quill.root.innerHTML;
14      sdk.setContent(html);
15      sdk.setSuperContent("This is super content: " + html);
16
17      sdk.getData(function (data) {
18        var numberOfEdits = data.numberOfEdits || 0;
19        sdk.setData({
20          numberOfEdits: numberOfEdits + 1,
21        });
22      });
23    }
24    quill.on("text-change", saveText);
25  });
26}