<!DOCTYPEhtml><html><head><metacharset="UTF-8"><style>.tiptap{margin-top: 0.75em;}ul,
ol{padding: 0 1rem;}h1,
h2,
h3,
h4,
h5,
h6{line-height: 1.1;}code{background-color:rgba(#616161, 0.1);color: #616161;}pre{background: #0D0D0D;color: #FFF;font-family:'JetBrainsMono', monospace;padding: 0.75rem 1rem;border-radius: 0.5rem;code{color: inherit;padding: 0;background: none;font-size: 0.8rem;}}img{max-width: 100%;height: auto;}blockquote{padding-left: 1rem;border-left: 2px solid rgba(#0D0D0D, 0.1);}hr{border: none;border-top: 2px solid rgba(#0D0D0D, 0.1);margin: 2rem 0;}</style></head><body><divid="app"class="editor"></div><divid="app"class="editor2"></div><divclass="toolbar"><inputtype="button"value="加粗"class="btn"onclick="setBold()"><inputtype="button"value="设置颜色"class="btn"onclick="setColor('#FBBC88')"></div></body><!-- import JavaScript --><scriptsrc="dist/index.js"></script><script>let myEditor = window.tipTapEditor.createEditor(".editor",'<h2> Hi there, </h2> <p> this is a <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>');let myEditor2 = window.tipTapEditor.createEditor(".editor2","<p>Hello World</p>");functionsetBold(){
myEditor.chain().focus().toggleBold().run();}functionsetColor(colorValue){
myEditor.commands.setColor(colorValue);}functioninsertContent(){// myEditor.chain().focus().toggleBold().run();
myEditor2.chain().focus().command(({ tr })=>{// manipulate the transaction
tr.insertText('hey1, that’s cool!')returntrue}).run();};</script></html>