Browse Source

docs: rich text

Signed-off-by: Raju Udava <86527202+dstala@users.noreply.github.com>
pull/7294/head
Raju Udava 7 months ago
parent
commit
af33363a8a
  1. 2
      packages/noco-docs/docs/065.table-details/_category_.json
  2. 137
      packages/noco-docs/docs/070.fields/040.field-types/010.text-based/025.rich-text.md
  3. BIN
      packages/noco-docs/static/img/v2-unannotated/fields/types/richtext.png
  4. BIN
      packages/noco-docs/static/img/v2/fields/types/richtext-heading.png
  5. BIN
      packages/noco-docs/static/img/v2/fields/types/richtext-links.png
  6. BIN
      packages/noco-docs/static/img/v2/fields/types/richtext.png

2
packages/noco-docs/docs/065.table-details/_category_.json

@ -1,5 +1,5 @@
{
"label": "Table Details",
"label": "Table details",
"collapsible": true,
"collapsed": true
}

137
packages/noco-docs/docs/070.fields/040.field-types/010.text-based/025.rich-text.md

@ -0,0 +1,137 @@
---
title: 'Rich text'
description: 'This article explains how to create & work with a Rich text field.'
tags: ['Fields', 'Field types', 'Text based types', 'Rich text']
keywords: ['Fields', 'Field types', 'Text based types', 'Rich text', 'Create rich text field']
---
`Rich Text` field is text based field & is extension of `Long text` that allows you to add formatting to the text. You can add text formatting like bold, italic, underline, strikethrough, horizontal rule, ordered list, unordered list, code, quote, etc.
## Create a `Rich Text` field
1. Click on `+` icon to the right of `Fields header`
2. On the dropdown modal, enter the field name (Optional).
3. Select the field type as `Long text` from the dropdown.
4. Enable `Rich Text` toggle field.
5. Set default value for the field (Optional).
6. Click on `Save Field` button.
![image](/img/v2/fields/types/richtext.png)
:::note
- Specify default value without quotes.
- Use `Enter` key to add new line.
:::
### Cell display
`Rich Text` field is displayed as a single line text field in the table view. Click on the expand icon in the cell to view the full text.
![image](/img/v2/fields/long-text-expand.png)
![image](/img/v2/fields/long-text-expand-2.png)
## Formatting options
NocoDB supports markdown syntax for formatting the text. Following are the supported formatting options.
### Heading
To create a heading, prefix `#` symbol preceding your heading text. The number of # symbols employed will dictate the heading's hierarchy level and typeface size. Three levels of headings are supported.
```
# Heading 1
## Heading 2
### Heading 3
```
![image](/img/v2/fields/types/richtext-heading.png)
### Text formatting
You can emphasise text with bold, italic, strikethrough or underline formatting options. Table below shows syntax, keyboard shortcut, example & output for each formatting option.
| Style | Syntax | Keyboard shortcut | Example | Output |
| --- | --- | --- | --- | --- |
| Bold | `**bold text**` | `Ctrl/Cmd + B` | `**This is bold text**` | **This is bold text** |
| Italic | `*italicized text*` | `Ctrl/Cmd + I` | `*This is italicized text*` | *This is italicized text* |
| Strikethrough | `~~strikethrough text~~` | `Ctrl/Cmd + Shift + X` | `~~This is strikethrough text~~` | ~~This is strikethrough text~~ |
| Underline | | `Ctrl/Cmd + U` | `This is underlined text` | <u>This is underlined text</u> |
### Quote block
You can quote text with a `>`
```
normal text
> quoted text
```
normal text
> quoted text
### Code block
Code block can be created by using (3 backticks) before & after the code.
````
```
This is a code block
```
````
```
This is a code block
```
### Link
You can create an inline link by using `Link` menu option in the rich text toolbar
![image](/img/v2/fields/types/richtext-links.png)
### Bullet List
You can create unordered list by using `Bulleted list` menu option in the rich text toolbar or by preceding the text with `-` `+` or `*` symbol.
```
- Item 1
- Item 2
+ Item 1
+ Item 2
* Item 1
* Item 2
```
- Item 1
- Item 2
+ Item 1
+ Item 2
* Item 1
* Item 2
:::note
You can create nested lists by using `tab` key & `shift + tab` key to indent & outdent the list items.
:::
### Numbered List
You can create ordered list by using `Numbered list` menu option in the rich text toolbar or by preceding the text with `1.` symbol.
```
1. Item 1
2. Item 2
```
1. Item 1
2. Item 2
### Task list
You can create task lists by using `Task list` menu option in the rich text toolbar or by preceding the text with `[ ]` symbol. You can mark the task as completed by using `[x]` symbol.
```
[ ] Item 1
[x] Item 2
```
- [ ] Item 1
- [x] Item 2
## Similar text based fields
Following are the other text based fields available in NocoDB, custom-built for specific use cases.
- [Single line text](010.single-line-text.md)
- [URL](050.url.md)
- [Email](030.email.md)
- [Phone](040.phonenumber.md)

BIN
packages/noco-docs/static/img/v2-unannotated/fields/types/richtext.png vendored

Binary file not shown.

After

Width:  |  Height:  |  Size: 192 KiB

BIN
packages/noco-docs/static/img/v2/fields/types/richtext-heading.png vendored

Binary file not shown.

After

Width:  |  Height:  |  Size: 36 KiB

BIN
packages/noco-docs/static/img/v2/fields/types/richtext-links.png vendored

Binary file not shown.

After

Width:  |  Height:  |  Size: 115 KiB

BIN
packages/noco-docs/static/img/v2/fields/types/richtext.png vendored

Binary file not shown.

After

Width:  |  Height:  |  Size: 161 KiB

Loading…
Cancel
Save