Editor 富文本编辑器

富文本编辑器。

1.基础用法

HTML 输出:

<div class="i-typography-alert i-typography-alert--info"><p>Alert</p></div><div data-uuid="uuid" data-file-uuid="file-uuid" data-type="pdf" data-name="Attachment" data-size="12.8 KB" class="i-typography-attachment"></div><audio data-uuid="uuid" data-name="Audio" data-artist="artist" src="/audios/1.m4a" class="i-typography-audio" controls="controls"></audio><blockquote><p>blockquote</p></blockquote><p><strong>bold</strong></p><ul><li><p>bullet list1</p></li><li><p>bullet list2</p></li></ul><p><code>code</code></p><pre><code class="language-php">&lt;?php</code></pre><div class="i-typography-free"><div class="i-typography-free__content"><p>Free</p></div></div><p>before br<br>after br</p><h1 id="heading1" data-custom-id="heading1">Heading</h1><div class="i-typography-hide"><div class="i-typography-hide__content"><p>Hide</p></div></div><p><mark>highlight</mark></p><hr><img data-uuid="uuid" src="/images/avatar-admin.png" width="100" height="100"><p><i>italic</i></p><p><kbd>kbd</kbd></p><p><a target="_blank" rel="noopener noreferrer nofollow" href="https://ui.test">link</a></p><p><a data-id="ilaoniu" data-label="mention" class="i-typography-mention">@mention</a></p><ol><li><p>list item1</p></li><li><p>list item2</p></li></ol><div data-url="https://ui.text/xxx" data-password="1234" class="i-typography-storage-link"></div><p><s>strike</s></p><div class="i-typography-table-responsive"><table><tbody><tr><th colspan="1" rowspan="1"><p>aaa</p></th><th colspan="1" rowspan="1"><p>bbb</p></th></tr><tr><td colspan="1" rowspan="1"><p>111</p></td><td colspan="1" rowspan="1"><p>222</p></td></tr></tbody></table></div><div class="i-typography-task-list"><div data-checked="false" class="i-typography-task-item"><div class="i-typography-task-item__box"><span class="i-icon"><svg viewbox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="m6 10 3 3 6-6"></path></svg></span><div class="i-typography-task-item__box-border"></div></div><div class="i-typography-task-item__content"><p>task item1</p></div></div><div data-checked="true" class="i-typography-task-item"><div class="i-typography-task-item__box i-typography-task-item__box--checked"><span class="i-icon"><svg viewbox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="m6 10 3 3 6-6"></path></svg></span><div class="i-typography-task-item__box-border"></div></div><div class="i-typography-task-item__content"><p>task item2</p></div></div></div><p><u>underline</u></p>

2.Markdown

Markdown 输出:

:::alert {type="info"}

Alert

:::

:::attachment {uuid="uuid" fileUuid="file-uuid" type="pdf" name="Attachment" size="12.8 KB"} :::

:::audio {uuid="uuid" name="Audio" artist="artist" src="/audios/1.m4a"} :::

> blockquote

**bold**

- bullet list1
- bullet list2

`code`

```php
<?php
```

:::free

Free

:::

before br  
after br

# Heading{id="heading1" customId="heading1"}

:::hide

Hide

:::

==highlight==

---

![](/images/avatar-admin.png){uuid="uuid" width="100" height="100"}

*italic*

[kbd]kbd[/kbd]

[link](https://ui.test){rel="noopener noreferrer nofollow" target="_blank"}

[@ id="ilaoniu" label="mention"]

1. list item1
2. list item2

:::storageLink {url="https://ui.text/xxx" password="1234"} :::

~~strike~~


| aaa | bbb |
| --- | --- |
| 111 | 222 |


- [ ] task item1
- [x] task item2

++underline++