Hi everyone,
I am trying to add toast-ui editor to the default sapper webpack template.
Update:
Create a github repo with the problem here
This is my index.svelte
from src/routes
and my moddifications so far:
<script>
import { onMount } from "svelte";
import marked from "marked";
let markdown = "# Example Title\n\n- this\n- is\n- a list";
onMount(async () => {
let Editor = await import('@toast-ui/editor');
const editor = new Editor({
target: document.querySelector("#editor"),
height: "500px",
initialEditType: "markdown",
previewStyle: "vertical"
});
editor.getHtml();
});
</script>
<style>
h1,
figure,
p {
text-align: center;
margin: 0 auto;
}
h1 {
font-size: 2.8em;
text-transform: uppercase;
font-weight: 700;
margin: 0 0 0.5em 0;
}
figure {
margin: 0 0 1em 0;
}
img {
width: 100%;
max-width: 400px;
margin: 0 0 1em 0;
}
p {
margin: 1em auto;
}
@media (min-width: 480px) {
h1 {
font-size: 4em;
}
}
</style>
<svelte:head>
<title>Sapper project template</title>
</svelte:head>
<h1>Great success!</h1>
<figure>
<img alt="Success Kid" src="successkid.jpg" />
<figcaption>Have fun with Sapper!</figcaption>
</figure>
<textarea bind:value={markdown} placeholder="Enter markdown here" />
<div class="preview">
{@html marked(markdown)}
</div>
<div id="editor" />
<p>
<strong>
Try editing this file (src/routes/index.svelte) to test live reloading.
</strong>
</p>
My question is how to make this work and get rid of this error:
TypeError: Editor is not a constructor
Thanks in advance
Top comments (1)
Hi,
I come from the svelte discord because I didn't receive more help than where I am now.
So I am also trying to see what I can learn here.
Thanks @mattwaler for the suggestion