拓展 extensions

拓展

Markdown 配置

可通过配置 engine 对象来配置 markdown 的解析规则，比如 table 是否可使用 chart（pro 版本可用）

engine: {
    // 自定义语法
    customSyntax: {
        // 'SyntaxClass': SyntaxClass   
        // 名字冲突时强制覆盖内置语法解析器
        // 'SyntaxClass': {             
        //    syntax: SyntaxClass,      
        //    force: true,              
        //    before: 'HOOK_NAME',      
        //    after: 'HOOK_NAME'        
        // }
    }
}

• Key: customSyntax
• Description: 自定义语法配置
• Type: { [HOOK_NAME: string]: { [option: string]: any } | boolean }
• Default: {}
• Options:
  • SyntaxClass <[String]> hook 名字
    • syntax <[SyntaxBase]> hook 构造函数
    • force <[Boolean]> 是否强制覆盖同名 hook
    • before <[String]> hookName，在这个 hook 之前执行
    • after <[String]> hookName，在这个 hook 之后执行

自定义语法

Markdown.createSyntaxHook( HOOK_NAME, HOOK_TYPE, OPTIONS )

创建自定义的语法 Hook

参数	类型	描述
HOOK_NAME	string	语法 Hook 标识名，唯一
HOOK_TYPE	Markdown.constants.HOOKS_TYPE_LIST	语法 Hook 类型，仅可选 SEN（行内语法）、PAR（段落语法）
OPTIONS	{ Function }	可选操作

options 配置

参数	类型	描述
beforeMakeHtml ( str: string ): string	Function	生命周期，返回替换后的字符串
makeHtml ( str: string, sentenceMakeFunc: Function ): string	Function	生命周期，返回替换后的字符串
afterMakeHtml ( str: string ): string	Function	生命周期，返回替换后的字符串
rule ( ): { reg: RegExp }	Function	语法 Hook 匹配规则，返回含有类型为 RegExp 的 reg 成员的对象
test ( str: string ): boolean	Function	语法匹配操作方法，可自定义匹配方式

基础使用

const CustomHook = Markdown.createSyntaxHook(
    'customHook',
    Markdown.constants.HOOKS_TYPE_LIST.PAR,
    {
        makeHtml(str) {
            console.log('hello custom hook');
            return str;
        },
        rule() {
            return { reg: new RegExp() };
        }
    }
);

new Markdown({
    engine: {
        customSyntax: {
            CustomHook: CustomHook
        }
    }
});

插入到指定Hook前或后面，只有一个参数会生效，before优先

new Markdown({
    engine: {
        customSyntax: {
            CustomHook: {
                syntax: CustomHook,
                before: 'codeBlock',
                // after: 'codeBlock'
            }
        }
    }
});

强制覆盖内置的语法Hook

new Markdown({
    engine: {
        customSyntax: {
            CustomHook: {
                syntax: CustomHook,
                force: true
            }
        }
    }
});

自定义工具栏

创建自定义的菜单 Hook

参数	类型	描述
HOOK_NAME	string	语法 Hook 标识名，唯一
OPTIONS	{ Object }	自定义菜单配置

options 配置

参数	类型	描述
iconName	String	图标类名
onClick ( selection: Function )	Function	点击时的回调函数
shortcutKeys	Array	快捷键集合, 用于注册键盘函数，当匹配的快捷键组合命中时，也会调用click函数
subMenuConfig ( name: String iconName： String noIcon: Boolean onclick: Function )	Array	子菜单集合

---

Extensions

Markdown Config

You can configure the markdown parsing rules by configuring the engine object, such as whether the chart available in table(available in the pro version)

engine: {
    // Custom syntax
    customSyntax: {
        // 'SyntaxClass': SyntaxClass   
        // Force overwrite the built-in syntax parser in case of name conflict
        // 'SyntaxClass': {             
        //    syntax: SyntaxClass,      
        //    force: true,              
        //    before: 'HOOK_NAME',      
        //    after: 'HOOK_NAME'        
        // }
    }
}

• Key: customSyntax
• Description: Custom syntax configuration
• Type: { [HOOK_NAME: string]: { [option: string]: any } | boolean }
• Default: {}
• Options:
  • SyntaxClass <[String]> hook name
    • syntax <[SyntaxBase]> hook constructor
    • force <[Boolean]> whether overwrite hook with the same name
    • before <[String]> hookName，execute before this hook
    • after <[String]> hookName，execute after this hook

Custom Syntax

Markdown.createSyntaxHook( HOOK_NAME, HOOK_TYPE, OPTIONS )

Create a custom syntax hook

parameter	type	description
HOOK_NAME	string	Syntax hook ID, unique
HOOK_TYPE	Markdown.constants.HOOKS_TYPE_LIST	Syntax Hook type, only SEN (inline grammar) and PAR (paragraph grammar) can be selectedhook type, only Sen (inline syntax) and PAR (paragraph syntax) can be selected
OPTIONS	{ Function }	Optional operation

options configuration

parameter	type	description
beforeMakeHtml ( str: string ): string	Function	Lifecycle, returns the replaced string
makeHtml ( str: string, sentenceMakeFunc: Function ): string	Function	Lifecycle, returns the replaced string
afterMakeHtml ( str: string ): string	Function	Lifecycle, returns the replaced string
rule ( ): { reg: RegExp }	Function	Syntax hook matching rule, return an reg member object containing regexp type
test ( str: string ): boolean	Function	Syntax matching operation method. You can customize the matching method

Basic Example

const CustomHook = Markdown.createSyntaxHook(
    'customHook',
    Markdown.constants.HOOKS_TYPE_LIST.PAR,
    {
        makeHtml(str) {
            console.log('hello custom hook');
            return str;
        },
        rule() {
            return { reg: new RegExp() };
        }
    }
);

new Markdown({
    engine: {
        customSyntax: {
            CustomHook: CustomHook
        }
    }
});

Insert before or after the specified hook, only one parameter will take effect, and before takes precedence

new Markdown({
    engine: {
        customSyntax: {
            CustomHook: {
                syntax: CustomHook,
                before: 'codeBlock',
                // after: 'codeBlock'
            }
        }
    }
});

Force overwrite of built-in syntax hook

new Markdown({
    engine: {
        customSyntax: {
            CustomHook: {
                syntax: CustomHook,
                force: true
            }
        }
    }
});

Custom Toolbar

Create a custom menu hook

parameter	type	description
HOOK_NAME	string	Syntax hook ID, unique
OPTIONS	{ Object }	Custom menu configuration

options 配置

parameter	type	description
iconName	String	Icon class name
onClick ( selection: Function )	Function	Callback function when clicked
shortcutKeys	Array	Shortcut key collection is used to register keyboard functions. When the matching shortcut key combination hits, the click function will also be called
subMenuConfig ( name: String iconName： String noIcon: Boolean onclick: Function )	Array	Submenu collection