jodit
Version:
Jodit is awesome and usefully wysiwyg editor with filebrowser
311 lines (272 loc) • 7.87 kB
TypeScript
/*!
* Jodit Editor (https://xdsoft.net/jodit/)
* Licensed under GNU General Public License version 2 or later or a commercial license or MIT;
* For GPL see LICENSE-GPL.txt in the project root for license information.
* For MIT see LICENSE-MIT.txt in the project root for license information.
* For commercial licenses see https://xdsoft.net/jodit/commercial/
* Copyright (c) 2013-2019 Valeriy Chupurnov. All rights reserved. https://xdsoft.net
*/
import { HTMLTagNames, IComponent, IDictionary, Modes } from './types';
import { IViewBased } from './view';
import { IJodit } from './jodit';
import { IFileBrowser } from './fileBrowser';
interface IControlType<
T = IJodit | IViewBased | IFileBrowser,
Button = IToolbarButton
> {
controlName?: string;
name?: string;
mode?: Modes;
hotkeys?: string | string[];
data?: IDictionary;
isInput?: boolean;
/**
* You can use it function for control - active/not active button
* @param {Jodit} editor
* @param {IControlType} btn
* @return {boolean}
* @see copyformat plugin
* @example
* ```javascript
* var editor = new Jodit('.selectorclass', {
* buttons: {
* checkbox: {
* data: {
* active: false,
* },
* iconURL: 'checkbox.png',
* exec: function (a, b, btn) {
* btn.data.active = !btn.data.active;
* },
* isActive: function (editor, btn) {
* return !!btn.data.active;
* }
* }
* }
* })
* ```
*/
isActive?: (
editor: T,
control: IControlType<T, Button>,
button?: Button
) => boolean;
isActiveChild?: (
editor: T,
control: IControlType<T, Button>,
button?: Button
) => boolean; // for list
getContent?: (
editor: T,
control: IControlType<T, Button>,
button?: Button
) => string | HTMLElement;
/**
* You can use it function for control - disable/enable button
*
* @param {Jodit} editor
* @param {IControlType} btn
* @return {boolean}
* @see copyformat plugin
* @example
* ```javascript
* var editor = new Jodit('.selectorclass', {
* buttons: {
* checkbox: {
* data: {
* enable: false,
* },
* iconURL: 'checkbox.png',
* exec: function (a, b, btn) {
* btn.data.active = !btn.data.active;
* },
* isDisable: function (editor, btn) {
* return !!btn.data.enable;
* }
* }
* }
* })
* ```
*/
isDisable?: (
editor: T,
control: IControlType<T, Button>,
button?: Button
) => boolean;
isDisableChild?: (
editor: T,
control: IControlType<T, Button>,
button?: Button
) => boolean;
getLabel?: (
editor: T,
control: IControlType<T, Button>,
button?: Button
) => boolean | void;
/**
* Drop-down list. A hash or array. You must specify the command which will be submitted for the hash key
* (or array value) (see .[[Jodit.execCommand]] or define 'exec' function. See example
* @example
* ```javascript
* new Jodit('#editor2', {
* buttons: Jodit.defaultOptions.buttons.concat([{
* name: 'listsss',
* iconURL: 'stuf/dummy.png',
* list: {
* h1: 'insert Header 1',
* h2: 'insert Header 2',
* clear: 'Empty editor',
* },
* exec: (editor, current, control) => {
* var key = control.args[0],
* value = control.args[1];
*
* if (key === 'clear') {
* this.setEditorValue('');
* return;
* }
* this.selection.insertNode(this.create.element(key, ''));
* this.events.fire('errorMessage', 'Was inserted ' + value);
* },
* template: function (key, value) {
* return '<div>' + value + '</div>';
* }
* });
* ```
*/
list?: IDictionary<string> | string[] | string;
/**
* The command executes when the button is pressed. Allowed all
* {@link https://developer.mozilla.org/ru/docs/Web/API/Document/execCommand#commands}
* and several specific [[Jodit.execCommand]]
*/
command?: string;
tagRegExp?: RegExp;
/**
* Tag list: when cursor inward tag from this list, button will be highlighted
*/
tags?: HTMLTagNames[];
options?: any;
css?:
| IDictionary<string | string[]>
| IDictionary<(editor: T, value: string) => boolean>;
/**
* String name for existing icons.
* @example
* ```javascript
* var editor = new Jodit('.editor', {
* buttons: [
* {
* icon: 'source',
* exec: function (editor) {
* editor.toggleMode();
* }
* }
* ]
* })
* ```
*/
icon?: string;
/**
* Use this property if you want set background image for the button. This icon can be 16 * 16 px in SVG or
* another image formats
*/
iconURL?: string;
/**
* Buttons hint
*/
tooltip?: string;
/**
* This function will be executed when the button is pressed.
*/
exec?: (
editor: T,
current: Node | false,
control: IControlType<T, Button>,
originalEvent: Event,
btn: HTMLLIElement
) => void;
args?: any[];
/**
* The method which will be called for each element of button.list
*/
template?: (editor: T, key: string, value: string) => string;
/**
* After click on the button it will show popup element which consist value that this function returned
* @example
* ```javascript
* var editor = new Jodit('.editor', {
* buttons: [
* {
* icon: "insertCode",
* popup: function (editor) {
* var div = dccument.createElement('div'), button = dccument.createElement('button');
* div.innerHTML = 'Hi! Click button and enter your code';
* button.innerHTML = 'Click me';
*
* div.appendChild(button);
*
* button.addEventListener('click', function (e) {
* editor.selection.insertHTML(prompt("Enter your code"));
* return false;
* });
* return div;
* }
* }
* ]
* });
* ```
*/
popup?: (
editor: T,
current: Node | false,
control: IControlType<T, Button>,
close: () => void,
button: Button
) => string | HTMLElement | false;
defaultValue?: string | string[];
}
interface IControlTypeStrong extends IControlType {
name: string;
}
export type Controls = IDictionary<IControlType>;
export type Buttons = Array<string | IControlType> | string;
interface IToolbarElement extends IComponent {
container: HTMLElement;
parentToolbar?: IToolbarCollection;
createIcon(clearName: string, control?: IControlTypeStrong): HTMLElement;
focus(): void;
}
interface IToolbarButton extends IToolbarElement {
disable: boolean;
active: boolean;
control: IControlTypeStrong;
target: HTMLElement | undefined;
textBox: HTMLSpanElement;
anchor: HTMLAnchorElement;
tooltipText: string;
isDisable(): boolean;
isActive(): boolean;
}
interface IToolbarCollection extends IComponent {
readonly listenEvents: string;
getButtonsList(): string[];
firstButton: IToolbarElement;
appendChild(button: IToolbarElement): void;
removeChild(button: IToolbarElement): void;
build(buttons: Buttons, container: HTMLElement, target?: HTMLElement): void;
clear(): void;
immedateCheckActiveButtons: () => void;
buttonIsActive(button: IToolbarButton): boolean | void;
buttonIsDisabled(button: IToolbarButton): boolean | void;
/**
* Target for button element
*
* @param button
*/
getTarget(button: IToolbarButton): Node | void;
checkActiveButtons: () => void;
container: HTMLElement;
setDirection(direction: 'rtl' | 'ltr'): void;
destruct(): void;
}