TipTap examples
TipTap basic example
Header level 1
Header level 2
Header level 3
Header level 4
Header level 5
Header level 6
Normal
Quote
Code Block
Bold
Italic
Strike
Code Inline
Bullet list
Ordered list
Create table
Add row above
Add row below
Add column to the left
Add column to the right
Header cell
Header row
Header column
Merge cells
Remove table
Remove column
Remove row
Horizontal rule
Undo
Redo
Link
Image
Video
Source
<p>Visit <a href="https://github.com/patternslib/pat-tiptap">pat-tiptap on GitHub</a>.</p> <p>Hello, <a class="pat-tooltip" href="https://en.wikipedia.org/wiki/Mary_(name)" data-mention contenteditable="false" data-pat-tooltip="url: ./index-remote-content.html#mary; source: ajax; trigger: click" data-title="Mary">@Mary</a>, have a nice day!</p> <p>Yo, <a class="pat-tooltip" href="https://en.wikipedia.org/wiki/James_(given_name)" data-mention data-pat-tooltip="url: ./index-remote-content.html#james; source: ajax; trigger: click">@James Dean</a>! </p> <p>The following should show an image directly on the top-level</p> <p><img alt="blue image" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAIAAAD/gAIDAAAAkElEQVR42u3QMQ0AAAjAsPk3DRb4 eJpUQavhTIEsWbJkyUKBLFmyZMlCgSxZsmTJQoEsWbJkyUKBLFmyZMlCgSxZsmTJQoEsWbJkyUKB LFmyZMlCgSxZsmTJQoEsWbJkyUKBLFmyZMlCgSxZsmTJQoEsWbJkyUKBLFmyZMlCgSxZsmTJQoEs WbJkyUKBLFnPFse76yukbN6SAAAAAElFTkSuQmCC" title="this is a blue image" /></p> <figure><img alt="green image" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAIAAAD/gAIDAAAAkElEQVR42u3QMQ0AAAjAsPk3DRb4 eJpUQWviSoEsWbJkyUKBLFmyZMlCgSxZsmTJQoEsWbJkyUKBLFmyZMlCgSxZsmTJQoEsWbJkyUKB LFmyZMlCgSxZsmTJQoEsWbJkyUKBLFmyZMlCgSxZsmTJQoEsWbJkyUKBLFmyZMlCgSxZsmTJQoEs WbJkyUKBLFnfFrL06ytLHYipAAAAAElFTkSuQmCC" title="this is a green image" /><figcaption>Above is a image within a figure/img/figcaption structure.</figcaption></figure> <p>Here is an inline-image. This image is allowed by our schema, parsed and displayed, but adding a new image will add it as and image within a figure tag. <img alt="red image" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAIAAAD/gAIDAAAAkElEQVR42u3QMQ0AAAjAsPk3DRb4 eJpUQZviSIEsWbJkyUKBLFmyZMlCgSxZsmTJQoEsWbJkyUKBLFmyZMlCgSxZsmTJQoEsWbJkyUKB LFmyZMlCgSxZsmTJQoEsWbJkyUKBLFmyZMlCgSxZsmTJQoEsWbJkyUKBLFmyZMlCgSxZsmTJQoEs WbJkyUKBLFnvFp4t6yugc3LNAAAAAElFTkSuQmCC" title="this is a red image" /></p> <figure> <iframe allowfullscreen frameborder="0" height="315" src="https://www.youtube.com/embed/GO1mRJkGXTA" width="560" ></iframe> <figcaption>hello</figcaption> </figure> <p>A new paragraph with a table.</p> <table> <tbody> <tr> <th> <p>column 1</p> </th> <th> <p>column 2</p> </th> <th> <p>column 3</p> </th> </tr> <tr> <td> <p>cell 1.1</p> </td> <td> <p>cell 1.2</p> </td> <td> <p>cell 1.3</p> </td> </tr> <tr> <td> <p>cell 2.1</p> </td> <td> <p>next cell is intentionally left blank</p> </td> <td> <p></p> </td> </tr> </tbody> </table>
Add / Edit Link
Link URL:
Link Text:
Open in new window:
submit
remove link
Add Image
Image URL:
Title:
Alternative text:
Caption:
submit
Add Video Embed
Video URL:
Title:
Caption:
submit
Edit Source
Source:
submit
Edit image
Remove image
Edit embed
Remove embed
Visit linked web page
Edit link
Unlink