embeddable-say-editor

by abeforfiddle

HTML

<!DOCTYPE html>
<html>

  <head>
    <title>I have an editor in my document</title>
  </head>

  <body>
    <div id="my-editor"></div>
  </body>

</html>

JavaScript

import {renderEditor} from "https://unpkg.com/@lblod/embeddable-say-editor@6.0.0?module";
window.addEventListener("load", async () => {


  const editorContainer = document.getElementById('my-editor');

  const editorElement = await renderEditor({
    element: editorContainer,
    width: '1300px', // width attribute of the iframe
    height: '500px', // height attribute of the iframe
    plugins: ["citation"], // array of plugin names (see below)
    options: {
    citation: {
    endpoint: "https://codex.opendata.api.vlaanderen.be:8888/sparql"
    }
    } // configuration object (see below)
  });

  editorElement.setHtmlContent(`<div lang="nl-BE" data-say-document="true"><div typeof="besluit:Besluit ext:BesluitNieuweStijl https://data.vlaanderen.be/id/concept/BesluitType/4d8f678a-6fa4-4d5f-a2a1-80974e43bf34" property="prov:generated" resource="http://data.lblod.info/id/besluiten/5204eaad-a317-45bd-ae48-c8800ba43c43" __rdfaid="bc2ffaed-4895-4002-ac9a-071ac48ceda5"><p data-indentation-level="0">Openbare titel besluit:</p><h4 property="eli:title" datatype="xsd:string" __rdfaid="24a17479-0a3c-4d74-b777-4518ee906aed"><p data-indentation-level="0"><span class="mark-highlight-manual" placeholdertext="Geef titel besluit op" contenteditable="false">Geef titel besluit op</span><br></p></h4><span typeof="skos:Concept" property="eli:language" resource="http://publications.europa.eu/resource/authority/language/NLD" __rdfaid="cf537c9e-c931-4039-bdbf-4904f5aa04ba" style="style=&quot;display:none;&quot;"></span><p data-indentation-level="0"><br><br></p><p data-indentation-level="0">Korte openbare beschrijving:</p><div property="eli:description" datatype="xsd:string" __rdfaid="288be735-4a79-408b-8dbc-0c3881dac7fc"><p data-indentation-level="0"><span class="mark-highlight-manual" placeholdertext="Geef korte beschrijving op" contenteditable="false">Geef korte beschrijving op</span><br></p></div><p data-indentation-level="0"><br><br></p><div...