Skip to content

Latest commit

 

History

History
266 lines (262 loc) · 5.85 KB

api.zh-CN.md

File metadata and controls

266 lines (262 loc) · 5.85 KB

API

English documention see here

插件

编写插件

见plugin.md

Editor.use

注册插件

/**
  * 注册插件
  * @param comp 插件
  * @param config 其他配置
  */
static use(comp: any, config?: any): void;

多语言

Editor.addLocale / useLocale / getLocale，分别为添加语言包、设置当前语言、获取当前语言

/**
  * 设置所使用的语言文案
  */
static addLocale: (langName: string, lang: {
    [x: string]: string;
}) => void;
static useLocale: (langName: string) => void;
static getLocale: () => string;

例如，添加繁体中文并使用：

Editor.addLocale('zh-TW', {
  btnHeader: '標頭',
  btnClear: '清除',
  btnBold: '粗體',
});
Editor.useLocale('zh-TW');

const MyEditor = () => {
  return (
    <Editor renderHtml={/* ... */} />
  )
}

操作选中区域

数据结构

interface Selection {
  start: number; // 开始位置，从0开始
  end: number; // 结束位置
  text: string; // 选中的文字
}

clearSelection

清除已选择区域，注意此函数会把光标移动到开头，如果只是想清除选择，而不移动光标位置，请使用setSelection

/**
  * 清除已选择区域
  */
clearSelection(): void;

getSelection

获取已选择区域

/**
  * 获取已选择区域
  * @return {Selection}
  */
getSelection(): Selection;

setSelection

设置已选择区域，当to.start与to.end相等时，光标位置将会被移动到to.start处。

另外，本函数中，Selection的text无实际意义

/**
  * 设置已选择区域
  * @param {Selection} to
  */
setSelection(to: Selection): void;

内容

insertMarkdown

插入Markdown语法，支持常见Markdown语法。完整示例见下方。

/**
  * 插入Markdown语法
  * @param type
  * @param option
  */
insertMarkdown(type: string, option?: any): void;

insertPlaceholder

插入占位符，并在Promise结束后自动覆盖，例如上传图片时，可以先插入一个占位符，在上传完成后自动将占位符替换为真实图片。

/**
  * 插入占位符，并在Promise结束后自动覆盖
  * @param placeholder
  * @param wait
  */
insertPlaceholder(placeholder: string, wait: Promise<string>): void;

insertText

插入文本

/**
  * 插入文本
  * @param {string} value 要插入的文本
  * @param {boolean} replaceSelected 是否替换掉当前选择的文本
  * @param {Selection} newSelection 新的选择区域
  */
insertText(value?: string, replaceSelected?: boolean, newSelection?: {
    start: number;
    end: number;
}): void;

setText

设置文本，同时触发onChange。注意避免在onChange里面调用此方法，以免造成死循环

/**
  * 设置文本，同时触发onChange
  * @param {string} value
  * @param {any} event
  */
setText(value?: string, event?: React.ChangeEvent<HTMLTextAreaElement>, newSelection?: Selection): void;

getMdValue

获取文本值

/**
  * 获取文本值
  * @return {string}
  */
getMdValue(): string;

getHtmlValue

获取渲染后的HTML

/**
  * 获取渲染后的HTML
  * @returns {string}
  */
getHtmlValue(): string;

事件

on / off

监听常规事件和取消监听事件。支持事件：

  • change：编辑器内容变化
  • fullscreen：全屏状态改变
  • viewchange：视图区域改变（例如预览区域、菜单栏被隐藏/显示）
  • keydown：按下键盘按键
on(event: EditorEvent, cb: any): void;
off(event: EditorEvent, cb: any): void;

onKeyboard / offKeyboard

监听键盘事件或取消监听

interface KeyboardEventListener {
  key?: string; // 按键名称，优先使用此属性，例如“z”
  keyCode: number; // 按键代码，如果没有key的时候则使用此属性，例如90
  withKey?: ('ctrlKey' | 'shiftKey' | 'altKey' | 'metaKey')[]; // 是否同时按下其他按键，包括ctrl、shift、alt、meta（即Mac上的Command按键）
  callback: (e: React.KeyboardEvent<HTMLDivElement>) => void; // 回调
}
onKeyboard(data: KeyboardEventListener): void;
offKeyboard(data: KeyboardEventListener): void;

界面相关

setView

/**
  * 设置视图属性
  * 可显示或隐藏：编辑器，预览区域，菜单栏
  * @param enable
  */
setView(to: {
    md?: boolean;
    menu?: boolean;
    html?: boolean;
}): void;

getView

获取视图属性

getView(): {
    menu: boolean;
    md: boolean;
    html: boolean;
};

fullScreen

进入或退出全屏模式

/**
  * 进入或退出全屏模式
  * @param {boolean} enable 是否开启全屏模式
  */
fullScreen(enable: boolean): void;

isFullScreen

是否处于全屏状态

isFullScreen(): boolean;

元素

可以通过以下API获取编辑器实际元素。请注意：你必须明白自己在做什么，否则不要轻易操作编辑器实际元素。

getMdElement

获取编辑区域元素

getMdElement(): HTMLTextAreaElement | null;

getHtmlElement

获取预览区域元素

getHtmlElement(): HTMLDivElement | null;

insertMarkdown 示例

insertMarkdown('bold'); // **text**
insertMarkdown('italic'); // *text*
insertMarkdown('underline'); // ++text++
insertMarkdown('strikethrough'); // ~~text~~
insertMarkdown('quote'); // > text
insertMarkdown('inlinecode'); // `text`
insertMarkdown('hr'); // ---

/*
\```
text
\```
*/
insertMarkdown('code');
/*
* text
* text
* text
*/
insertMarkdown('unordered');
/*
1. text
2. text
3. text
*/
insertMarkdown('order');
/*
| Head | Head | Head | Head |
| --- | --- | --- | --- |
| Data | Data | Data | Data |
| Data | Data | Data | Data |
*/
insertMarkdown('table', {
  row: 2,
  col: 4
});
/*
![text](http://example.com/image.jpg)
*/
insertMarkdown('image', {
  imageUrl: "http://example.com/image.jpg"
});
/*
[text](http://example.com/)
*/
insertMarkdown('link', {
  linkUrl: "http://example.com/"
});