Titpap 编辑器由于是 headless 所以它没有提供任何样式,这意味我们可以完全控制 Titap 的样式,我们可以通过作用域内或全局 CSS 来控制样式也可以自定义 class 来定制样式。
/* Scoped to the editor */
.ProseMirror p {
margin: 1em 0;
color:red
}
/* Global styling */
p {
margin: 1em 0;
color:red
}
//自定义段落样式
new Editor({
extensions: [
Document,
Paragraph.configure({
HTMLAttributes: {
class: 'my-custom-paragraph',
},
}),
Heading.configure({
HTMLAttributes: {
class: 'my-custom-heading',
},
}),
Text,
],
})
上面的设置将会渲染成以下代码
<h1 class="my-custom-heading">Example Text</p>
<p class="my-custom-paragraph">Wow, that’s really custom.</p>
//编辑器容器将会加上以下样式
new Editor({
editorProps: {
attributes: {
class: 'prose prose-sm sm:prose lg:prose-lg xl:prose-2xl mx-auto focus:outline-none',
},
},
})
//将加粗渲染成b标签或者strong标签
import Bold from '@tiptap/extension-bold'
const CustomBold = Bold.extend({
renderHTML({ HTMLAttributes }) {
// Original:
// return ['strong', HTMLAttributes, 0]
return ['b', HTMLAttributes, 0]
},
})
new Editor({
extensions: [
// …
CustomBold,
],
})
<!-- 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 dark:prose-invert 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>
本教程Demo的源码点击这里下载,Tiptap Demo,下载完成后运行npm i初始化依赖包。