The base class of all Jodit UI components. Provides work with a life cycle.

Hierarchy

Implements

Properties

OPTIONS: IViewOptions = View.defaultOptions
STATUSES: {
    beforeDestruct: "beforeDestruct";
    beforeInit: "beforeInit";
    destructed: "destructed";
    ready: "ready";
} = STATUSES

Type declaration

  • beforeDestruct: "beforeDestruct"
  • beforeInit: "beforeInit"
  • destructed: "destructed"
  • ready: "ready"
async: IAsync = ...
buffer: IStorage<StorageValueType> = ...

Some extra data inside editor

See

copyformat plugin

components: Set<IComponent<IViewBased<IViewOptions>>> = ...

All created ViewComponent inside this view

constants: constants = constants
core: {
    Plugin: typeof Plugin;
} = ...

Type declaration

create: ICreate
createInside: ICreate = ...
currentPlace: IWorkPlace
decorators: IDictionary<Function, string> = {}
editorIsActive: boolean = false

Editor has focus in this time

esNext: boolean = isESNext
fatMode: boolean = false
id: string

ID attribute for source element, id add {id}_editor it's editor's id

instances: IDictionary<IJodit, string> = instances
isJodit: true = ...

Define if object is Jodit

isView: true = ...
lang: any = lang
message: IMessages
mods: IDictionary<null | string | boolean, string> = {}
modules: modules = ...
ns: modules = ...
ownerWindow: Window = window

The window in which jodit was created

places: IWorkPlace[]
plugins: IPluginSystem = pluginSystem
progressbar: IProgressBar

progress_bar Progress bar

registeredButtons: Set<IPluginButton> = ...
selection: Select

Container for set/get value

toolbar: IToolbarCollection = ...
uid: string
version: string = appVersion

Methods

  • Create and init current editable place

    Parameters

    Returns void | Promise<any>

  • Parameters

    Returns void

  • Method wrap usual Has Object in Object helper for prevent deep object merging in options*

    Type Parameters

    • T

    Parameters

    • object: T

    Returns T

  • Returns string

  • Parameters

    • this: IViewBased<IViewOptions> & IDlgs
    • msg: string
    • title: undefined | string | ((yes: boolean) => void)
    • Optional callback: ((yes: boolean) => false | void)
        • (yes: boolean): false | void
        • Parameters

          • yes: boolean

          Returns false | void

    Returns IDialog

  • Jodit's Destructor. Remove editor, and return source input

    Returns void

  • Execute command editor

    See

    https://developer.mozilla.org/ru/docs/Web/API/Document/execCommand#commands and a number of its own for example applyStyleProperty. Comand fontSize receives the second parameter px, formatBlock and can take several options

    Example

    this.execCommand('fontSize', 12); // sets the size of 12 px
    this.execCommand('underline');
    this.execCommand('formatBlock', 'p'); // will be inserted paragraph

    Parameters

    • command: string

      command. It supports all the

    • Optional showUI: boolean
    • Optional value: any
    • Rest ...args: unknown[]

    Returns void

  • Returns void

  • Safe get any field

    Example

    private a = {
    b: {
    c: {
    e: {
    g: {
    color: 'red'
    }
    }
    }
    }
    }

    this.get('a.b.c.e.g.color'); // Safe access to color
    // instead using optionsl chaining
    this?.a?.b?.c?.e?.g?.color

    Type Parameters

    • T

    Parameters

    • chain: string

      the path to be traversed in the obj object

    • Optional obj: IDictionary<any, string>

      the object in which the value is searched

    Returns Nullable<T>

  • Return true if editor in disabled mode

    Returns boolean

  • Return editor value

    Parameters

    • removeSelectionMarkers: boolean = true
    • Optional consumer: string

    Returns string

  • Return source element value

    Returns string

  • Calc BEM element class name

    Parameters

    • elementName: string

      element name in the bem classification

    Returns string

  • Parameters

    • elementName: string
    • mod: string

    Returns string

  • Parameters

    • elementName: string
    • mod: string
    • modValue: string | boolean

    Returns string

  • Make one instance of one module

    Type Parameters

    Parameters

    • moduleName: string
    • Optional options: object

    Returns T

  • Get BEM class modification value

    Parameters

    • this: IMods
    • name: string

    Returns ModType

  • Return current editor mode: Jodit.MODE_WYSIWYG, Jodit.MODE_SOURCE or Jodit.MODE_SPLIT

    Returns Modes

  • Return true if editor in read-only mode

    Returns boolean

  • Return current real work mode. When editor in MODE_SOURCE or MODE_WYSIWYG it will return them, but then editor in MODE_SPLIT it will return MODE_SOURCE if Textarea(CodeMirror) focused or MODE_WYSIWYG otherwise

    Example

    var editor = Jodit.make('#editor');
    console.log(editor.getRealMode());

    Returns Modes

  • Returns string

  • Return current version

    Returns string

  • Adds a handler for changing the component's status

    Parameters

    • status: ComponentStatus

      the status at which the callback is triggered

    • callback: ((component: Jodit) => void)

      a function that will be called when the status is status

        • (component: Jodit): void
        • Parameters

          Returns void

    Returns void

  • Internationalization method. Uses Jodit.lang object

    Parameters

    • text: string
    • Rest ...params: (string | number)[]

    Returns string

  • Returns boolean

  • Parameters

    • name: string

    Returns boolean

  • Disable selecting

    Parameters

    • name: string = 'any'

    Returns boolean

  • Factory for creating Jodit instance

    Parameters

    • element: string | HTMLElement
    • Optional options: object

    Returns Jodit

  • Exec native command

    Parameters

    • command: string
    • Optional showUI: boolean
    • Optional value: any

    Returns boolean

  • Parameters

    • this: IViewBased<IViewOptions> & IDlgs
    • msg: string
    • title: undefined | string | (() => false | void)
    • callback: ((value: string) => false | void)
        • (value: string): false | void
        • Parameters

          • value: string

          Returns false | void

    • Optional placeholder: string
    • Optional defaultValue: string

    Returns IDialog

  • Register custom handler for command

    Example

    var jodit = Jodit.make('#editor);

    jodit.setEditorValue('test test test');

    jodit.registerCommand('replaceString', function (command, needle, replace) {
    var value = this.getEditorValue();
    this.setEditorValue(value.replace(needle, replace));
    return false; // stop execute native command
    });

    jodit.execCommand('replaceString', 'test', 'stop');

    console.log(jodit.value); // stop test test

    // and you can add hotkeys for command
    jodit.registerCommand('replaceString', {
    hotkeys: 'ctrl+r',
    exec: function (command, needle, replace) {
    var value = this.getEditorValue();
    this.setEditorValue(value.replace(needle, replace));
    }
    });

    Type Parameters

    • C extends string

    Parameters

    • commandNameOriginal: C
    • command: CustomCommand<IJodit, C>
    • Optional options: {
          stopPropagation: boolean;
      }
      • stopPropagation: boolean

    Returns IJodit

  • Register hotkey for command

    Parameters

    • hotkeys: string | string[]
    • commandName: string
    • shouldStop: boolean = true

    Returns void

  • Set current place object

    Parameters

    Returns void

  • Switch on/off the editor into the disabled state. When in disabled, the user is not able to change the editor content This function firing the disabled event.

    Parameters

    • isDisabled: boolean

    Returns void

  • Set editor html value and if set sync fill source element value When method was called without arguments - it is simple way to synchronize editor to element

    Parameters

    • Optional value: string

    Returns void

  • Set current mode

    Parameters

    • mode: string | number

    Returns void

  • Set value to native editor

    Parameters

    • value: string

    Returns void

  • Change panel container

    Parameters

    Returns void

  • Switch on/off the editor into the read-only state. When in readonly, the user is not able to change the editor content, but can still use some editor functions (show source code, print content, or seach). This function firing the readonly event.

    Parameters

    • isReadOnly: boolean

    Returns void

  • Set component status

    See

    ComponentStatus

    Parameters

    Returns void

  • Returns void

  • Parameters

    • Optional isFullSize: boolean

    Returns void

  • Toggle editor mode WYSIWYG to TEXTAREA(CodeMirror) to SPLIT(WYSIWYG and TEXTAREA) to again WYSIWYG

    Example

    var editor = Jodit.make('#editor');
    editor.toggleMode();

    Returns void

  • Enable selecting

    Returns boolean

  • Return promise for ready actions

    Example

    const jodit = Jodit.make('#editor');
    await jodit.waitForReady();
    jodit.e.fire('someAsyncLoadedPluginEvent', (test) => {
    alert(test);
    });

    Returns Promise<IJodit>

Accessors

  • get basePath(): string
  • Get path for loading extra staff

    Returns string

  • get c(): this["create"]
  • Returns this["create"]

  • get componentName(): string
  • Returns string

  • get defaultOptions(): Config
  • Default settings

    Returns Config

  • get defaultTimeout(): number
  • Return default timeout period in milliseconds for some debounce or throttle functions. By default, {history.timeout} options

    Returns number

  • get e(): this["events"]
  • Returns this["events"]

  • get ed(): this["editorDocument"]
  • Alias for this.ew

    Returns this["editorDocument"]

  • get editorDocument(): Document
  • In iframe mode editor's window can be different by owner

    Returns Document

  • get editorWindow(): Window
  • In iframe mode editor's window can be different by owner

    Returns Window

  • set editorWindow(win: Window): void
  • Parameters

    Returns void

  • get ew(): this["editorWindow"]
  • Alias for this.ew

    Returns this["editorWindow"]

  • get isDestructed(): boolean
  • Component was destructed

    Returns boolean

  • get isFocused(): boolean
  • Returns boolean

  • get isFullSize(): boolean
  • View is in fullSize

    Returns boolean

  • get isInDestruct(): boolean
  • The component is currently undergoing destructuring or has already been destroyed. Those. you should not hang new events on him now or do anything else with him.

    Returns boolean

  • get isLocked(): boolean
  • View is locked

    Returns boolean

  • get isReady(): boolean
  • Component is ready for work

    Returns boolean

  • get mode(): Modes
  • Editor's mode

    Returns Modes

  • set mode(mode: Modes): void
  • Parameters

    Returns void

  • get o(): this["options"]
  • Short alias for options

    Returns this["options"]

  • get options(): Config
  • options All Jodit settings default + second arguments of constructor

    Returns Config

  • set options(opt: Config): void
  • Parameters

    Returns void

  • get ownerDocument(): Document
  • The document in which jodit was created

    Returns Document

  • get s(): this["selection"]
  • Alias for this.selection

    Returns this["selection"]

  • get text(): string
  • Plain text editor's value

    Returns string

  • get value(): string
  • HTML value

    Returns string

  • set value(html: string): void
  • Parameters

    • html: string

    Returns void

Constructors

  • Create instance of Jodit

    Deprecated

    • Instead use Jodit.make

    Parameters

    • element: string | HTMLElement

      Selector or HTMLElement

    • Optional options: object

      Editor's options

    Returns Jodit

Jodit PRO

If you like Jodit - try Jodit PRO