JavaScript/jQuery HtmlEditor Options

accessKey

activeStateEnabled

customizeModules

$(function() {
    $("htmlEditorContainer").dxHtmlEditor({
        // ...
        customizeModules: function(config) {
            config.history = {
                delay: 0,
                maxStack: 5000
            }; 
        }
    });
});

<dx-html-editor ...
    [customizeModules]="customizeQuillModules">
</dx-html-editor>

import { Component } from '@angular/core';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent {
    customizeQuillModules(config) {
        config.history = {
            delay: 0,
            maxStack: 5000
        }; 
    }
}

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';

import { DxHtmlEditorModule } from 'devextreme-angular';
@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        BrowserModule,
        DxHtmlEditorModule
    ],
    providers: [ ],
    bootstrap: [AppComponent]
})
export class AppModule { }

<template>
    <DxHtmlEditor ...
        :customize-modules="customizeQuillModules"
    />
</template>

<script>
import 'devextreme/dist/css/dx.common.css';
import 'devextreme/dist/css/dx.light.css';

import DxHtmlEditor from 'devextreme-vue/html-editor';

export default {
    components: {
        DxHtmlEditor
    },
    methods: {
        customizeQuillModules(config) {
            config.history = {
                delay: 0,
                maxStack: 5000
            }; 
        }
    }
}
</script>

import React from 'react';

import 'devextreme/dist/css/dx.common.css';
import 'devextreme/dist/css/dx.light.css';

import HtmlEditor from 'devextreme-react/html-editor';

class App extends React.Component {
    render() {
        return (
            <HtmlEditor ...
                customizeModules={this.customizeQuillModules}
            />
        );
    }
    customizeQuillModules(config) {
        config.history = {
            delay: 0,
            maxStack: 5000
        }; 
    }
}
export default App;

disabled

elementAttr

$(function(){
    $("#htmlEditorContainer").dxHtmlEditor({
        // ...
        elementAttr: {
            id: "elementId",
            class: "class-name"
        }
    });
});

<dx-html-editor ...
    [elementAttr]="{ id: 'elementId', class: 'class-name' }">
</dx-html-editor>

import { DxHtmlEditorModule } from "devextreme-angular";
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxHtmlEditorModule
    ],
    // ...
})

@(Html.DevExtreme().HtmlEditor()
    .ElementAttr("class", "class-name")
    // ===== or =====
    .ElementAttr(new {
        @id = "elementId",
        @class = "class-name"
    })
    // ===== or =====
    .ElementAttr(new Dictionary<string, object>() {
        { "id", "elementId" },
        { "class", "class-name" }
    })

)

@(Html.DevExtreme().HtmlEditor() _
    .ElementAttr("class", "class-name")
    ' ===== or =====
    .ElementAttr(New With {
        .id = "elementId",
        .class = "class-name"
    })
    ' ===== or =====
    .ElementAttr(New Dictionary(Of String, Object) From {
        { "id", "elementId" },
        { "class", "class-name" }
    })
)

focusStateEnabled

height

hint

hoverStateEnabled

isValid

mediaResizing

mentions[]

name

onContentReady

onDisposing

onFocusIn

onFocusOut

onInitialized

onOptionChanged

onValueChanged

placeholder

readOnly

rtlEnabled

DevExpress.config({
    rtlEnabled: true
});

tabIndex

toolbar

validationError

validationMessageMode

value

valueType

import "devextreme/ui/html_editor/converters/markdown";
// or
// require("ui/html_editor/converters/markdown");

variables

$(function(){
    $("#htmlEditorContainer").dxHtmlEditor({
        toolbar: {
            // Adds a toolbar control that allows users to insert variables
            items: [ "variable" ]
        },
        variables: {
            dataSource: [ "FirstName", "LastName", "Company" ],
            escapeChar: [ "{", "}" ]
        }
    })
})

<dx-html-editor>
    <!-- Adds a toolbar control that allows users to insert variables -->
    <dxo-toolbar [items]="[ 'variable' ]"></dxo-toolbar>
    <dxo-variables
        [dataSource]="[ 'FirstName', 'LastName', 'Company' ]"
        [escapeChar]="[ '{', '}' ]">
    </dxo-variables>
</dx-html-editor>

import { DxHtmlEditorModule } from "devextreme-angular";
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxHtmlEditorModule
    ],
    // ...
})

visible

width