tiptap/docs/src/docPages/guide/styling.md

110 lines
3.1 KiB
Markdown
Raw Normal View History

2021-04-07 05:36:07 +08:00
# Styling
2020-09-16 23:01:47 +08:00
## toc
2020-09-27 16:29:01 +08:00
## Introduction
2020-11-13 18:04:31 +08:00
tiptap is headless, that means there is no styling provided. That also means, you are in full control of how your editor looks. The following methods allow you to apply custom styles to the editor.
2020-09-22 22:03:31 +08:00
## Option 1: Style the plain HTML
The whole editor is rendered inside of a container with the class `.ProseMirror`. You can use that to scope your styling to the editor content:
2020-09-16 23:01:47 +08:00
```css
2020-09-22 22:03:31 +08:00
/* Scoped to the editor */
2020-10-03 03:11:01 +08:00
.ProseMirror p {
2020-09-22 22:03:31 +08:00
margin: 1em 0;
}
```
If youre rendering the stored content somewhere, there wont be a `.ProseMirror` container, so you can just globally add styling to the used HTML tags:
```css
/* Global styling */
2020-10-03 03:11:01 +08:00
p {
2020-09-16 23:01:47 +08:00
margin: 1em 0;
}
```
2020-09-22 22:03:31 +08:00
## Option 2: Add custom classes
2021-02-07 23:12:27 +08:00
You can control the whole rendering, including adding classes to everything.
2020-09-16 23:01:47 +08:00
2020-12-01 22:42:36 +08:00
### Extensions
Most extensions allow you to add attributes to the rendered HTML through the `HTMLAttributes` option. You can use that to add a custom class (or any other attribute). Thats also very helpful, when you work with [Tailwind CSS](https://tailwindcss.com/).
2020-10-28 23:32:06 +08:00
2020-09-16 23:01:47 +08:00
```js
new Editor({
extensions: [
2020-11-16 17:03:12 +08:00
Document,
2020-11-16 18:07:06 +08:00
Paragraph.configure({
2020-11-16 17:03:12 +08:00
HTMLAttributes: {
2020-10-28 23:32:06 +08:00
class: 'my-custom-paragraph',
},
2020-09-16 23:01:47 +08:00
}),
2020-11-16 18:07:06 +08:00
Heading.configure({
2020-11-16 17:03:12 +08:00
HTMLAttributes: {
2020-10-28 23:32:06 +08:00
class: 'my-custom-heading',
},
2020-09-16 23:01:47 +08:00
}),
2020-11-16 17:03:12 +08:00
Text,
2021-04-21 17:46:45 +08:00
],
2020-09-16 23:01:47 +08:00
})
```
2020-09-22 22:03:31 +08:00
The rendered HTML will look like that:
2020-09-16 23:01:47 +08:00
```html
<h1 class="my-custom-heading">Example Text</p>
<p class="my-custom-paragraph">Wow, thats really custom.</p>
```
2020-10-28 23:32:06 +08:00
If there are already classes defined by the extensions, your classes will be added.
2020-12-01 22:42:36 +08:00
### Editor
You can even pass classes to the element which contains the editor like that:
```js
new Editor({
editorProps: {
attributes: {
class: 'prose prose-sm sm:prose lg:prose-lg xl:prose-2xl mx-auto focus:outline-none',
2021-04-21 17:46:45 +08:00
},
2020-12-01 22:42:36 +08:00
},
})
```
2020-12-03 22:58:04 +08:00
### With Tailwind CSS
2021-02-07 23:12:27 +08:00
The editor works fine with Tailwind CSS, too. Find an example thats styled with the `@tailwindcss/typography` plugin below.
2020-12-03 22:58:04 +08:00
<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>
2020-09-22 22:03:31 +08:00
## Option 3: Customize the HTML
2021-02-07 23:12:27 +08:00
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:
2020-09-16 23:01:47 +08:00
```js
import Bold from '@tiptap/extension-bold'
2020-10-28 23:32:06 +08:00
const CustomBold = Bold.extend({
2020-11-16 17:03:12 +08:00
renderHTML({ HTMLAttributes }) {
2020-10-28 23:32:06 +08:00
// Original:
2020-11-16 17:03:12 +08:00
// return ['strong', HTMLAttributes, 0]
return ['b', HTMLAttributes, 0]
2020-10-28 23:32:06 +08:00
},
})
2020-09-16 23:01:47 +08:00
new Editor({
extensions: [
2021-02-04 17:39:46 +08:00
// …
CustomBold(),
],
2020-09-16 23:01:47 +08:00
})
```
2021-02-07 23:12:27 +08:00
You should put your custom extensions in separate files, but I think you got the idea.