# @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 //mark插件名称集合 ``` ### 要启用的类型(h1 h2 h3 h4 h5 h6) 可以定义 h1 - h6 所需要的节点类型,如果不定义则支持全部 设置后 markdown 也会失效 ```ts enableTypes?: Array ``` 另外可能还需要配置 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'); ```