am-editor11212/plugins/heading/README.md

132 lines
2.6 KiB
Markdown
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

# @aomao/plugin-heading
标题样式插件
## 安装
```bash
$ yarn add @aomao/plugin-heading
```
添加到引擎
```ts
import Engine, { EngineInterface } from '@aomao/engine';
import Heading from '@aomao/plugin-heading';
new Engine(...,{ plugins:[Heading] })
```
## 可选项
### 锚点
开启后在标题左边出现可复制锚点按钮
```ts
showAnchor?: boolean;
```
当点击复制锚点的时候触发,传入当前标题的 id 值,返回的内容将写入到用户的粘贴板上,默认将返回当前 url+id
```ts
anchorCopy?:(id:string) => string
```
### 快捷键
```ts
//快捷键
hotkey?: {
h1?: string;//标题1默认 mod+opt+1
h2?: string;//标题2默认 mod+opt+2
h3?: string;//标题3默认 mod+opt+3
h4?: string;//标题4默认 mod+opt+4
h5?: string;//标题5默认 mod+opt+5
h6?: string;//标题6默认 mod+opt+6
};
//使用配置
new Engine(...,{
config:{
"heading":{
//修改快捷键
hotkey:{
h1:"快捷键"
}
}
}
})
```
### Markdown
默认支持 markdown传入`false`关闭
Heading 插件 markdown 语法为`#` `##` `###` `####` `#####` `######`
```ts
markdown?: boolean;//默认开启false 关闭
//使用配置
new Engine(...,{
config:{
"heading":{
//关闭markdown
markdown:false
}
}
})
```
### 禁用 mark 插件样式效果
可以在标题下禁用 mark 插件效果,默认禁用 ['fontsize', 'bold'] ,在分割、粘贴等情况下过滤掉这些插件样式
```ts
disableMark?: Array<string> //mark插件名称集合
```
### 要启用的类型h1 h2 h3 h4 h5 h6
可以定义 h1 - h6 所需要的节点类型,如果不定义则支持全部
设置后 markdown 也会失效
```ts
enableTypes?: Array<string>
```
另外可能还需要配置 toolbar 中 items 属性的 heading 插件
```ts
{
type: 'dropdown',
name: 'heading',
items: [
{
key: "p",
className: 'heading-item-p',
content: "正文"
},
{
key: "h1",
className: 'heading-item-h1',
content: "标题1"
}
]
}
```
## 命令
传入 `p` 或当前标题样式与当前传入值一致 时将取消标题
```ts
//使用 command 执行插件、并传入所需参数
engine.command.execute(
'heading',
'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p',
);
//使用 command 执行查询当前状态,返回 string | undefined返回 "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "p"
engine.command.queryState('heading');
```