Browse Source

Add `onPaste` and `onKeydown` options to RTE module.

pull/5694/head
Artur Arseniev 2 years ago
parent
commit
ab280503cb
  1. 28
      src/rich_text_editor/config/config.ts
  2. 17
      src/rich_text_editor/model/RichTextEditor.ts

28
src/rich_text_editor/config/config.ts

@ -1,3 +1,6 @@
import Editor from '../../editor';
import RichTextEditor from '../model/RichTextEditor';
export interface CustomRTE<T = any> {
/**
* If true, the returned HTML content will be parsed into Components, allowing
@ -45,6 +48,31 @@ export interface RichTextEditorConfig {
* @default ['bold', 'italic', 'underline', 'strikethrough', 'link', 'wrap']
*/
actions?: string[];
/**
* Custom on paste logic for the built-in RTE.
* @example
* onPaste: ({ ev, rte }) => {
* ev.preventDefault();
* const { clipboardData } = ev;
* const text = clipboardData.getData('text');
* rte.exec('insertHTML', `<b>[ ${text} ]</b>`);
* }
*/
onPaste?: (data: { ev: ClipboardEvent; editor: Editor; rte: RichTextEditor }) => void;
/**
* Custom on keydown logic for the built-in RTE.
* @example
* onKeydown: ({ ev, rte }) => {
* if (ev.key === 'Enter') {
* ev.preventDefault();
* rte.exec('insertHTML', `<br>-- custom line break --<br>`);
* }
* }
*/
onKeydown?: (data: { ev: KeyboardEvent; editor: Editor; rte: RichTextEditor }) => void;
/**
* Avoid rendering the default RTE UI.
* @default false

17
src/rich_text_editor/model/RichTextEditor.ts

@ -296,6 +296,13 @@ export default class RichTextEditor {
}
__onKeydown(ev: KeyboardEvent) {
const { em } = this;
const { onKeydown } = em.RichTextEditor.getConfig();
if (onKeydown) {
return onKeydown({ ev, rte: this, editor: em.getEditor() });
}
const { doc } = this;
const cmdList = ['insertOrderedList', 'insertUnorderedList'];
@ -306,10 +313,18 @@ export default class RichTextEditor {
}
__onPaste(ev: ClipboardEvent) {
const { em } = this;
const { onPaste } = em.RichTextEditor.getConfig();
if (onPaste) {
return onPaste({ ev, rte: this, editor: em.getEditor() });
}
const clipboardData = ev.clipboardData!;
const text = clipboardData.getData('text');
const textHtml = clipboardData.getData('text/html');
// Replace \n with <br> in case of plain text
// Replace \n with <br> in case of a plain text
if (text && !textHtml) {
ev.preventDefault();
const html = text.replace(/(?:\r\n|\r|\n)/g, '<br/>');

Loading…
Cancel
Save