demos: Add setup for plain js demos (#2288)

* add basic js demo

* improve js demos

* change demo button

* fix js demos on build

* add tailwind experiment

* docs: replace tailwind demo

Co-authored-by: Philipp Kühn <philippkuehn@MacBook-Pro-von-Philipp.local>
This commit is contained in:
Philipp Kühn
2021-12-17 13:49:45 +01:00
committed by GitHub
parent c980bb2f5f
commit 318592ba22
5 changed files with 159 additions and 16 deletions

View File

@@ -77,13 +77,7 @@ new Editor({
### With Tailwind CSS
The editor works fine with Tailwind CSS, too. Find an example thats styled with the `@tailwindcss/typography` plugin below.
<iframe
src="https://codesandbox.io/embed/tiptap-demo-tailwind-iqjz0?fontsize=14&hidenavigation=1&module=%2Fsrc%2Findex.js&theme=dark&view=preview"
style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;"
title="tiptap-demo-tailwind"
allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
></iframe>
https://embed.tiptap.dev/preview/Experiments/Tailwind
## Option 3: Customize the HTML
Or you can customize the markup for extensions. The following example will make a custom bold extension that doesnt render a `<strong>` tag, but a `<b>` tag:
@@ -108,4 +102,3 @@ new Editor({
```
You should put your custom extensions in separate files, but I think you got the idea.