-
|
Hi there! Quill provides an instruction: <!-- Include Quill stylesheet -->
<link
href="https://cdn.jsdelivr.net/npm/quill@2/dist/quill.snow.css"
rel="stylesheet"
/>
<!-- Create the toolbar container -->
<div id="toolbar">
<button class="ql-bold">Bold</button>
<button class="ql-italic">Italic</button>
</div>
<!-- Create the editor container -->
<div id="editor">
<p>Hello World!</p>
<p>Some initial <strong>bold</strong> text</p>
<p><br /></p>
</div>
<!-- Include the Quill library -->
<script src="https://cdn.jsdelivr.net/npm/quill@2/dist/quill.js"></script>
<!-- Initialize Quill editor -->
<script>
const quill = new Quill("#editor", {
theme: "snow",
});
</script>I tried to modify my playground <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Leptos Playground</title>
<link data-trunk rel="rust" data-wasm-opt="0" data-keep-debug=true />
<link rel="stylesheet" href="https://unpkg.com/open-props"/>
<!-- optional imports that use the props -->
<link rel="stylesheet" href="https://unpkg.com/open-props/normalize.min.css"/>
<link rel="stylesheet" href="https://unpkg.com/open-props/buttons.min.css"/>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/quill@2/dist/quill.snow.css"/>
<style>
h1, h2, h3, h4, h5, h6 {
text-align: center;
}
p {
margin: var(--size-2);
}
body > picture, button, p, progress {
display: block;
margin-left: auto;
margin-right: auto;
text-align: center;
}
img {
height: 100px;
width: auto;
margin: auto;
}
.red {
color: red;
}
</style>
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/quill@2/dist/quill.js"></script>
<script>
const quill = new Quill("#editor", {
theme: "snow",
});
</script>
<div id="editor">
<p>Hello World!</p>
<p>Some initial <strong>bold</strong> text</p>
<p><br /></p>
</div>
<picture>
<source srcset="https://raw.githubusercontent.com/leptos-rs/leptos/main/docs/logos/Leptos_logo_pref_dark_RGB.svg" media="(prefers-color-scheme: dark)">
<img src="https://raw.githubusercontent.com/leptos-rs/leptos/main/docs/logos/Leptos_logo_RGB.svg" alt="Leptos Logo">
</picture>
</body>
</html>it shows nothing: I read the guide, but haven't found anything about using third party components. Many thanks in advance! |
Beta Was this translation helpful? Give feedback.
Answered by
mahdi739
Mar 26, 2025
Replies: 1 comment
-
|
I think it’s because the script using <script>
const quill = new Quill("#editor", {
theme: "snow",
});
</script> |
Beta Was this translation helpful? Give feedback.
0 replies
Answer selected by
ivanovdns
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
I think it’s because the script using
#editorruns before the referenced element is parsed. You should probably place this script after that<div>: