mirror of
https://github.com/ueberdosis/tiptap.git
synced 2025-06-11 20:23:36 +08:00
54 lines
1.4 KiB
HTML
54 lines
1.4 KiB
HTML
<!-- load tailwind -->
|
||
<script src="https://cdn.tailwindcss.com?plugins=typography"></script>
|
||
|
||
<!-- provide element -->
|
||
<div class="element"></div>
|
||
|
||
<!-- create editor -->
|
||
<script type="module">
|
||
import { Editor } from '@tiptap/core'
|
||
import StarterKit from '@tiptap/starter-kit'
|
||
|
||
const editor = new Editor({
|
||
element: document.querySelector('.element'),
|
||
extensions: [
|
||
StarterKit,
|
||
],
|
||
editorProps: {
|
||
attributes: {
|
||
class: 'prose prose-sm sm:prose-base lg:prose-lg xl:prose-2xl m-5 focus:outline-none',
|
||
},
|
||
},
|
||
content: `
|
||
<h2>
|
||
Hi there,
|
||
</h2>
|
||
<p>
|
||
this is a basic <em>basic</em> example of <strong>Tiptap</strong>. Sure, there are all kind of basic text styles you’d probably expect from a text editor. But wait until you see the lists:
|
||
</p>
|
||
<ul>
|
||
<li>
|
||
That’s a bullet list with one …
|
||
</li>
|
||
<li>
|
||
… or two list items.
|
||
</li>
|
||
</ul>
|
||
<p>
|
||
Isn’t that great? And all of that is editable. But wait, there’s more. Let’s try a code block:
|
||
</p>
|
||
<pre><code class="language-css">body {
|
||
display: none;
|
||
}</code></pre>
|
||
<p>
|
||
I know, I know, this is impressive. It’s only the tip of the iceberg though. Give it a try and click a little bit around. Don’t forget to check the other examples too.
|
||
</p>
|
||
<blockquote>
|
||
Wow, that’s amazing. Good work, boy! 👏
|
||
<br />
|
||
— Mom
|
||
</blockquote>
|
||
`,
|
||
})
|
||
</script>
|