devextreme-vue/esm/html-editor.js

DevExtreme Vue UI and Visualization Components

/*!
 * devextreme-vue
 * Version: 25.1.5
 * Build date: Wed Sep 03 2025
 *
 * Copyright (c) 2012 - 2025 Developer Express Inc. ALL RIGHTS RESERVED
 *
 * This software may be modified and distributed under the terms
 * of the MIT license. See the LICENSE file in the root of the project for details.
 *
 * https://github.com/DevExpress/devextreme-vue
 */

import { defineComponent } from "vue";
import { prepareComponentConfig } from "./core/index";
import HtmlEditor from "devextreme/ui/html_editor";
import { prepareConfigurationComponentConfig } from "./core/index";
const componentConfig = {
    props: {
        accessKey: String,
        activeStateEnabled: Boolean,
        aiIntegration: Object,
        allowSoftLineBreak: Boolean,
        converter: Object,
        customizeModules: Function,
        disabled: Boolean,
        elementAttr: Object,
        focusStateEnabled: Boolean,
        height: [Number, String],
        hint: String,
        hoverStateEnabled: Boolean,
        imageUpload: Object,
        isDirty: Boolean,
        isValid: Boolean,
        mediaResizing: Object,
        mentions: Array,
        name: String,
        onContentReady: Function,
        onDisposing: Function,
        onFocusIn: Function,
        onFocusOut: Function,
        onInitialized: Function,
        onOptionChanged: Function,
        onValueChanged: Function,
        placeholder: String,
        readOnly: Boolean,
        rtlEnabled: Boolean,
        stylingMode: String,
        tabIndex: Number,
        tableContextMenu: Object,
        tableResizing: Object,
        toolbar: Object,
        validationError: {},
        validationErrors: Array,
        validationMessageMode: String,
        validationMessagePosition: String,
        validationStatus: String,
        value: {},
        variables: Object,
        visible: Boolean,
        width: [Number, String]
    },
    emits: {
        "update:isActive": null,
        "update:hoveredElement": null,
        "update:accessKey": null,
        "update:activeStateEnabled": null,
        "update:aiIntegration": null,
        "update:allowSoftLineBreak": null,
        "update:converter": null,
        "update:customizeModules": null,
        "update:disabled": null,
        "update:elementAttr": null,
        "update:focusStateEnabled": null,
        "update:height": null,
        "update:hint": null,
        "update:hoverStateEnabled": null,
        "update:imageUpload": null,
        "update:isDirty": null,
        "update:isValid": null,
        "update:mediaResizing": null,
        "update:mentions": null,
        "update:name": null,
        "update:onContentReady": null,
        "update:onDisposing": null,
        "update:onFocusIn": null,
        "update:onFocusOut": null,
        "update:onInitialized": null,
        "update:onOptionChanged": null,
        "update:onValueChanged": null,
        "update:placeholder": null,
        "update:readOnly": null,
        "update:rtlEnabled": null,
        "update:stylingMode": null,
        "update:tabIndex": null,
        "update:tableContextMenu": null,
        "update:tableResizing": null,
        "update:toolbar": null,
        "update:validationError": null,
        "update:validationErrors": null,
        "update:validationMessageMode": null,
        "update:validationMessagePosition": null,
        "update:validationStatus": null,
        "update:value": null,
        "update:variables": null,
        "update:visible": null,
        "update:width": null,
    },
    model: { prop: "value", event: "update:value" },
    computed: {
        instance() {
            return this.$_instance;
        }
    },
    beforeCreate() {
        this.$_WidgetClass = HtmlEditor;
        this.$_hasAsyncTemplate = true;
        this.$_expectedChildren = {
            converter: { isCollectionItem: false, optionName: "converter" },
            imageUpload: { isCollectionItem: false, optionName: "imageUpload" },
            mediaResizing: { isCollectionItem: false, optionName: "mediaResizing" },
            mention: { isCollectionItem: true, optionName: "mentions" },
            tableContextMenu: { isCollectionItem: false, optionName: "tableContextMenu" },
            tableResizing: { isCollectionItem: false, optionName: "tableResizing" },
            toolbar: { isCollectionItem: false, optionName: "toolbar" },
            variables: { isCollectionItem: false, optionName: "variables" }
        };
    }
};
prepareComponentConfig(componentConfig);
const DxHtmlEditor = defineComponent(componentConfig);
const DxCommandConfig = {
    emits: {
        "update:isActive": null,
        "update:hoveredElement": null,
        "update:name": null,
        "update:options": null,
        "update:prompt": null,
        "update:text": null,
    },
    props: {
        name: [Object, String],
        options: {},
        prompt: Function,
        text: String
    }
};
prepareConfigurationComponentConfig(DxCommandConfig);
const DxCommand = defineComponent(DxCommandConfig);
DxCommand.$_optionName = "commands";
DxCommand.$_isCollectionItem = true;
const DxConverterConfig = {
    emits: {
        "update:isActive": null,
        "update:hoveredElement": null,
        "update:fromHtml": null,
        "update:toHtml": null,
    },
    props: {
        fromHtml: Function,
        toHtml: Function
    }
};
prepareConfigurationComponentConfig(DxConverterConfig);
const DxConverter = defineComponent(DxConverterConfig);
DxConverter.$_optionName = "converter";
const DxFileUploaderOptionsConfig = {
    emits: {
        "update:isActive": null,
        "update:hoveredElement": null,
        "update:abortUpload": null,
        "update:accept": null,
        "update:accessKey": null,
        "update:activeStateEnabled": null,
        "update:allowCanceling": null,
        "update:allowedFileExtensions": null,
        "update:chunkSize": null,
        "update:dialogTrigger": null,
        "update:disabled": null,
        "update:dropZone": null,
        "update:elementAttr": null,
        "update:focusStateEnabled": null,
        "update:height": null,
        "update:hint": null,
        "update:hoverStateEnabled": null,
        "update:inputAttr": null,
        "update:invalidFileExtensionMessage": null,
        "update:invalidMaxFileSizeMessage": null,
        "update:invalidMinFileSizeMessage": null,
        "update:isDirty": null,
        "update:isValid": null,
        "update:labelText": null,
        "update:maxFileSize": null,
        "update:minFileSize": null,
        "update:multiple": null,
        "update:name": null,
        "update:onBeforeSend": null,
        "update:onContentReady": null,
        "update:onDisposing": null,
        "update:onDropZoneEnter": null,
        "update:onDropZoneLeave": null,
        "update:onFilesUploaded": null,
        "update:onInitialized": null,
        "update:onOptionChanged": null,
        "update:onProgress": null,
        "update:onUploadAborted": null,
        "update:onUploaded": null,
        "update:onUploadError": null,
        "update:onUploadStarted": null,
        "update:onValueChanged": null,
        "update:progress": null,
        "update:readOnly": null,
        "update:readyToUploadMessage": null,
        "update:rtlEnabled": null,
        "update:selectButtonText": null,
        "update:showFileList": null,
        "update:tabIndex": null,
        "update:uploadAbortedMessage": null,
        "update:uploadButtonText": null,
        "update:uploadChunk": null,
        "update:uploadCustomData": null,
        "update:uploadedMessage": null,
        "update:uploadFailedMessage": null,
        "update:uploadFile": null,
        "update:uploadHeaders": null,
        "update:uploadMethod": null,
        "update:uploadMode": null,
        "update:uploadUrl": null,
        "update:validationError": null,
        "update:validationErrors": null,
        "update:validationStatus": null,
        "update:value": null,
        "update:visible": null,
        "update:width": null,
    },
    props: {
        abortUpload: Function,
        accept: String,
        accessKey: String,
        activeStateEnabled: Boolean,
        allowCanceling: Boolean,
        allowedFileExtensions: Array,
        chunkSize: Number,
        dialogTrigger: {},
        disabled: Boolean,
        dropZone: {},
        elementAttr: Object,
        focusStateEnabled: Boolean,
        height: [Number, String],
        hint: String,
        hoverStateEnabled: Boolean,
        inputAttr: {},
        invalidFileExtensionMessage: String,
        invalidMaxFileSizeMessage: String,
        invalidMinFileSizeMessage: String,
        isDirty: Boolean,
        isValid: Boolean,
        labelText: String,
        maxFileSize: Number,
        minFileSize: Number,
        multiple: Boolean,
        name: String,
        onBeforeSend: Function,
        onContentReady: Function,
        onDisposing: Function,
        onDropZoneEnter: Function,
        onDropZoneLeave: Function,
        onFilesUploaded: Function,
        onInitialized: Function,
        onOptionChanged: Function,
        onProgress: Function,
        onUploadAborted: Function,
        onUploaded: Function,
        onUploadError: Function,
        onUploadStarted: Function,
        onValueChanged: Function,
        progress: Number,
        readOnly: Boolean,
        readyToUploadMessage: String,
        rtlEnabled: Boolean,
        selectButtonText: String,
        showFileList: Boolean,
        tabIndex: Number,
        uploadAbortedMessage: String,
        uploadButtonText: String,
        uploadChunk: Function,
        uploadCustomData: {},
        uploadedMessage: String,
        uploadFailedMessage: String,
        uploadFile: Function,
        uploadHeaders: {},
        uploadMethod: String,
        uploadMode: String,
        uploadUrl: String,
        validationError: {},
        validationErrors: Array,
        validationStatus: String,
        value: Array,
        visible: Boolean,
        width: [Number, String]
    }
};
prepareConfigurationComponentConfig(DxFileUploaderOptionsConfig);
const DxFileUploaderOptions = defineComponent(DxFileUploaderOptionsConfig);
DxFileUploaderOptions.$_optionName = "fileUploaderOptions";
const DxImageUploadConfig = {
    emits: {
        "update:isActive": null,
        "update:hoveredElement": null,
        "update:fileUploaderOptions": null,
        "update:fileUploadMode": null,
        "update:tabs": null,
        "update:uploadDirectory": null,
        "update:uploadUrl": null,
    },
    props: {
        fileUploaderOptions: Object,
        fileUploadMode: String,
        tabs: Array,
        uploadDirectory: String,
        uploadUrl: String
    }
};
prepareConfigurationComponentConfig(DxImageUploadConfig);
const DxImageUpload = defineComponent(DxImageUploadConfig);
DxImageUpload.$_optionName = "imageUpload";
DxImageUpload.$_expectedChildren = {
    fileUploaderOptions: { isCollectionItem: false, optionName: "fileUploaderOptions" },
    tab: { isCollectionItem: true, optionName: "tabs" }
};
const DxItemConfig = {
    emits: {
        "update:isActive": null,
        "update:hoveredElement": null,
        "update:acceptedValues": null,
        "update:beginGroup": null,
        "update:closeMenuOnClick": null,
        "update:commands": null,
        "update:cssClass": null,
        "update:disabled": null,
        "update:html": null,
        "update:icon": null,
        "update:items": null,
        "update:locateInMenu": null,
        "update:location": null,
        "update:menuItemTemplate": null,
        "update:name": null,
        "update:options": null,
        "update:selectable": null,
        "update:selected": null,
        "update:showText": null,
        "update:template": null,
        "update:text": null,
        "update:visible": null,
        "update:widget": null,
    },
    props: {
        acceptedValues: Array,
        beginGroup: Boolean,
        closeMenuOnClick: Boolean,
        commands: Array,
        cssClass: String,
        disabled: Boolean,
        html: String,
        icon: String,
        items: Array,
        locateInMenu: String,
        location: String,
        menuItemTemplate: {},
        name: String,
        options: {},
        selectable: Boolean,
        selected: Boolean,
        showText: String,
        template: {},
        text: String,
        visible: Boolean,
        widget: String
    }
};
prepareConfigurationComponentConfig(DxItemConfig);
const DxItem = defineComponent(DxItemConfig);
DxItem.$_optionName = "items";
DxItem.$_isCollectionItem = true;
DxItem.$_expectedChildren = {
    command: { isCollectionItem: true, optionName: "commands" },
    item: { isCollectionItem: true, optionName: "items" }
};
const DxMediaResizingConfig = {
    emits: {
        "update:isActive": null,
        "update:hoveredElement": null,
        "update:allowedTargets": null,
        "update:enabled": null,
    },
    props: {
        allowedTargets: Array,
        enabled: Boolean
    }
};
prepareConfigurationComponentConfig(DxMediaResizingConfig);
const DxMediaResizing = defineComponent(DxMediaResizingConfig);
DxMediaResizing.$_optionName = "mediaResizing";
const DxMentionConfig = {
    emits: {
        "update:isActive": null,
        "update:hoveredElement": null,
        "update:dataSource": null,
        "update:displayExpr": null,
        "update:itemTemplate": null,
        "update:marker": null,
        "update:minSearchLength": null,
        "update:searchExpr": null,
        "update:searchTimeout": null,
        "update:template": null,
        "update:valueExpr": null,
    },
    props: {
        dataSource: [Array, Object, String],
        displayExpr: [Function, String],
        itemTemplate: {},
        marker: String,
        minSearchLength: Number,
        searchExpr: [Array, Function, String],
        searchTimeout: Number,
        template: {},
        valueExpr: [Function, String]
    }
};
prepareConfigurationComponentConfig(DxMentionConfig);
const DxMention = defineComponent(DxMentionConfig);
DxMention.$_optionName = "mentions";
DxMention.$_isCollectionItem = true;
const DxTabConfig = {
    emits: {
        "update:isActive": null,
        "update:hoveredElement": null,
        "update:name": null,
    },
    props: {
        name: String
    }
};
prepareConfigurationComponentConfig(DxTabConfig);
const DxTab = defineComponent(DxTabConfig);
DxTab.$_optionName = "tabs";
DxTab.$_isCollectionItem = true;
const DxTableContextMenuConfig = {
    emits: {
        "update:isActive": null,
        "update:hoveredElement": null,
        "update:enabled": null,
        "update:items": null,
    },
    props: {
        enabled: Boolean,
        items: Array
    }
};
prepareConfigurationComponentConfig(DxTableContextMenuConfig);
const DxTableContextMenu = defineComponent(DxTableContextMenuConfig);
DxTableContextMenu.$_optionName = "tableContextMenu";
DxTableContextMenu.$_expectedChildren = {
    item: { isCollectionItem: true, optionName: "items" },
    tableContextMenuItem: { isCollectionItem: true, optionName: "items" }
};
const DxTableContextMenuItemConfig = {
    emits: {
        "update:isActive": null,
        "update:hoveredElement": null,
        "update:beginGroup": null,
        "update:closeMenuOnClick": null,
        "update:disabled": null,
        "update:icon": null,
        "update:items": null,
        "update:name": null,
        "update:selectable": null,
        "update:selected": null,
        "update:template": null,
        "update:text": null,
        "update:visible": null,
    },
    props: {
        beginGroup: Boolean,
        closeMenuOnClick: Boolean,
        disabled: Boolean,
        icon: String,
        items: Array,
        name: String,
        selectable: Boolean,
        selected: Boolean,
        template: {},
        text: String,
        visible: Boolean
    }
};
prepareConfigurationComponentConfig(DxTableContextMenuItemConfig);
const DxTableContextMenuItem = defineComponent(DxTableContextMenuItemConfig);
DxTableContextMenuItem.$_optionName = "items";
DxTableContextMenuItem.$_isCollectionItem = true;
DxTableContextMenuItem.$_expectedChildren = {
    item: { isCollectionItem: true, optionName: "items" }
};
const DxTableResizingConfig = {
    emits: {
        "update:isActive": null,
        "update:hoveredElement": null,
        "update:enabled": null,
        "update:minColumnWidth": null,
        "update:minRowHeight": null,
    },
    props: {
        enabled: Boolean,
        minColumnWidth: Number,
        minRowHeight: Number
    }
};
prepareConfigurationComponentConfig(DxTableResizingConfig);
const DxTableResizing = defineComponent(DxTableResizingConfig);
DxTableResizing.$_optionName = "tableResizing";
const DxToolbarConfig = {
    emits: {
        "update:isActive": null,
        "update:hoveredElement": null,
        "update:container": null,
        "update:items": null,
        "update:multiline": null,
    },
    props: {
        container: {},
        items: Array,
        multiline: Boolean
    }
};
prepareConfigurationComponentConfig(DxToolbarConfig);
const DxToolbar = defineComponent(DxToolbarConfig);
DxToolbar.$_optionName = "toolbar";
DxToolbar.$_expectedChildren = {
    item: { isCollectionItem: true, optionName: "items" },
    toolbarItem: { isCollectionItem: true, optionName: "items" }
};
const DxToolbarItemConfig = {
    emits: {
        "update:isActive": null,
        "update:hoveredElement": null,
        "update:acceptedValues": null,
        "update:commands": null,
        "update:cssClass": null,
        "update:disabled": null,
        "update:html": null,
        "update:locateInMenu": null,
        "update:location": null,
        "update:menuItemTemplate": null,
        "update:name": null,
        "update:options": null,
        "update:showText": null,
        "update:template": null,
        "update:text": null,
        "update:visible": null,
        "update:widget": null,
    },
    props: {
        acceptedValues: Array,
        commands: Array,
        cssClass: String,
        disabled: Boolean,
        html: String,
        locateInMenu: String,
        location: String,
        menuItemTemplate: {},
        name: String,
        options: {},
        showText: String,
        template: {},
        text: String,
        visible: Boolean,
        widget: String
    }
};
prepareConfigurationComponentConfig(DxToolbarItemConfig);
const DxToolbarItem = defineComponent(DxToolbarItemConfig);
DxToolbarItem.$_optionName = "items";
DxToolbarItem.$_isCollectionItem = true;
DxToolbarItem.$_expectedChildren = {
    command: { isCollectionItem: true, optionName: "commands" }
};
const DxVariablesConfig = {
    emits: {
        "update:isActive": null,
        "update:hoveredElement": null,
        "update:dataSource": null,
        "update:escapeChar": null,
    },
    props: {
        dataSource: [Array, Object, String],
        escapeChar: [Array, String]
    }
};
prepareConfigurationComponentConfig(DxVariablesConfig);
const DxVariables = defineComponent(DxVariablesConfig);
DxVariables.$_optionName = "variables";
export default DxHtmlEditor;
export { DxHtmlEditor, DxCommand, DxConverter, DxFileUploaderOptions, DxImageUpload, DxItem, DxMediaResizing, DxMention, DxTab, DxTableContextMenu, DxTableContextMenuItem, DxTableResizing, DxToolbar, DxToolbarItem, DxVariables };