JavaScript/jQuery HtmlEditor Options

const converter = {
    toHtml: (value) => {
        const result = */ Convert the value and return a string */
        return result;
    },

    fromHtml: (value) => {
        const result = /* Convert the value and return a string */
        return result;
    }
    }

$('#editor').dxHtmlEditor({
    converter,
});

<template>
    <DxHtmlEditor ...>
        <DxConverter
            @to-html="toHtml"
            @from-html="fromHtml"
        />
    </DxHtmlEditor>
</template>

<script setup>
import DxHtmlEditor, { DxConverter } from 'devextreme-vue/html-editor';

const toHtml: (value) => {
    const result = */ Convert the value and return a string */
    return result;
}

const fromHtml: (value) => {
    const result = /* Convert the value and return a string */
    return result;
}
</script>

import React from 'react';
import HtmlEditor, { Converter } from 'devextreme-react/html-editor';

const toHtml: (value) => {
    const result = */ Convert the value and return a string */
    return result;
}

const fromHtml: (value) => {
    const result = /* Convert the value and return a string */
    return result;
}

function App() {
    return (
        <HtmlEditor ...>
            <Converter
                fromHtml={fromHtml}
                toHtml={toHtml}
            />
        </HtmlEditor>
    );
}

export default App;

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

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

<script>
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.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;

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

<template>
    <DxHtmlEditor ...
        :element-attr="htmlEditorAttributes">
    </DxHtmlEditor>
</template>

<script>
import DxHtmlEditor from 'devextreme-vue/html-editor';

export default {
    components: {
        DxHtmlEditor
    },
    data() {
        return {
            htmlEditorAttributes: {
                id: 'elementId',
                class: 'class-name'
            }
        }
    }
}
</script>

import React from 'react';

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

class App extends React.Component {
    htmlEditorAttributes = {
        id: 'elementId',
        class: 'class-name'
    }

    render() {
        return (
            <HtmlEditor ...
                elementAttr={this.htmlEditorAttributes}>
            </HtmlEditor>
        );
    }
}
export default App;

$(function() {
    $("#htmlEditorContainer").dxHtmlEditor({
        // ...
        imageUpload: {
            fileUploadMode: 'both',
            tabs: ['url', 'file'],
            uploadUrl: 'https://js.devexpress.com/Demos/Upload'
            uploadDirectory: '/Images'
        }
    });
});

<template>
    <DxHtmlEditor ...>
        <DxImageUpload
            fileUploadMode="both"
            :tabs="dialogTabs"
            uploadUrl="https://js.devexpress.com/Demos/Upload"
            uploadDirectory="/Images"
         />
    </DxHtmlEditor>
</template>

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

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

export default {
    components: {
        DxHtmlEditor
    },
    methods: {
        // ...
    },
    data() {
        return {
            dialogTabs: ['url', 'file']
        };
    }         
}
</script>

import React from 'react';

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

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

const dialogTabs = ['url', 'file'];

class App extends React.Component {
    render() {
        return (
            <HtmlEditor ...>
                <ImageUpload 
                    fileUploadMode="both"
                    :tabs={dialogTabs}
                    uploadUrl="https://js.devexpress.com/Demos/Upload"
                    uploadDirectory="/Images"
                />
            </HtmlEditor>
        );
    }
}
export default App;

$(() => {
    const htmlEditor = $('#htmlEditor').dxHtmlEditor({
        // ...
    }).dxHtmlEditor('instance');

    $('#button').dxButton({
        // ...
        onClick () {
            if (htmlEditor.option('isDirty')) {
                DevExpress.ui.notify("Do not forget to save changes", "warning", 500);
            }
        }
    });
});

<template>
    <DxHtmlEditor ...
        :ref="htmlEditorRef"
    >
    </DxHtmlEditor>
    <DxButton ...
        @click="onClick"
    />
</template>

<script>
import 'devextreme/dist/css/dx.light.css';
import DxHtmlEditor from 'devextreme-vue/html-editor';
import DxButton from 'devextreme-vue/button';
import notify from 'devextreme/ui/notify';

export default {
    components: {
        DxHtmlEditor,
        DxButton
    },

    data() {
        return {
            htmlEditorRef
        }
    },

    methods: {
        onClick () {
            if (this.htmlEditor.option('isDirty')) {
                notify("Do not forget to save changes", "warning", 500);
            }
        }
    },

    computed: {
        htmlEditor: function() {
            return this.$refs[htmlEditorRef].instance;
        }
    }
}
</script>

import React, { useRef } from 'react';
import HtmlEditor from 'devextreme-react/html-editor';
import Button from 'devextreme-react/button';
import 'devextreme/dist/css/dx.light.css';

const App = () => {
    const htmlEditorRef = useRef(null);

    const onClick = () => {
        if (this.htmlEditorRef.current.instance().option('isDirty')) {
            notify("Do not forget to save changes", "warning", 500);
        }
    };

    return (
        <HtmlEditor ...
            ref={htmlEditorRef}
        >
        </HtmlEditor>
        <Button ...
            onClick={onClick}
        />
    );
};

export default App;

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

class App extends React.Component {
    constructor(props) {
        super(props);

        this.saveInstance = this.saveInstance.bind(this);
    }

    saveInstance(e) {
        this.htmlEditorInstance = e.component;
    }

    render() {
        return (
            <div>
                <HtmlEditor onInitialized={this.saveInstance} />
            </div>
        );
    }
}

$(function() {
    $("#htmlEditorContainer").dxHtmlEditor({
        // ...
        onOptionChanged: function(e) {
            if(e.name === "changedProperty") {
                // handle the property change here
            }
        }
    });
});

<template> 
    <DxHtmlEditor ...
        @option-changed="handlePropertyChange"
    />            
</template> 

<script>  
import 'devextreme/dist/css/dx.light.css'; 
import DxHtmlEditor from 'devextreme-vue/html-editor'; 

export default { 
    components: { 
        DxHtmlEditor
    }, 
    // ...
    methods: { 
        handlePropertyChange: function(e) {
            if(e.name === "changedProperty") {
                // handle the property change here
            }
        }
    } 
} 
</script> 

import React from 'react';  
import 'devextreme/dist/css/dx.light.css'; 

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

const handlePropertyChange = (e) => {
    if(e.name === "changedProperty") {
        // handle the property change here
    }
}

export default function App() { 
    return ( 
        <HtmlEditor ...
            onOptionChanged={handlePropertyChange}
        />        
    ); 
} 

$(function() {
    $("#htmlEditorContainer").dxHtmlEditor({
        // ...
        validationMessagePosition: 'right'
    }).dxValidator({
        validationRules: [{
            type: 'required',
            message: 'Required',
        }],
    });
});

<dx-html-editor ...
    validationMessagePosition="right">
    <dx-validator>
        <dxi-validation-rule
            type="required"
            message="Required"
        >
        </dxi-validation-rule>
    </dx-validator>
</dx-html-editor>

<template>
    <DxHtmlEditor ...
        validation-message-position="right"
    >
        <DxValidator>
            <DxRequiredRule message="Required" />
        </DxValidator>
    </DxHtmlEditor>
</template>

<script>
    // ...
</script>

import React from 'react';
// ...

function App() {
    return (
        <HtmlEditor ...
            validationMessagePosition="right"
        >
            <Validator>
                <RequiredRule message="Required" />
            </Validator>
        </HtmlEditor>
    ); 

};
export default App;

$(function() {
    const htmlEditor = $("#htmlEditorContainer").dxHtmlEditor({
        // ...
    }).dxHtmlEditor("instance");

    function setInvalidStatus(message) {
        htmlEditor.option({
            validationStatus: "invalid",
            validationErrors: [{ message: message }]
        });
    }
});

<template>
    <DxHtmlEditor ...
        :validation-status="validationStatus"
        :validation-errors="validationErrors"
    />
</template>

<script>
    // ...
    export default {
        // ...
        data() {
            return {
                validationStatus: "valid",
                validationErrors: []
            }
        },
        methods: {
            setInvalidStatus(message) {
                this.validationStatus = "invalid";
                this.validationErrors = [{ message: message }];
            }
        }
    }
</script>

import React, { useState } from 'react';
// ...

function App() {
    const [validationStatus, setValidationStatus] = useState("valid");
    const [validationErrors, setValidationErrors] = useState([]);

    const setInvalidStatus = message => {
        setValidationStatus("invalid");
        setValidationErrors([{ message: message }]);
    }

    return (
        <HtmlEditor
            validationStatus={validationStatus}
            validationErrors={validationErrors}
        />
    ); 

};
export default App;

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

<template>
    <DxHtmlEditor ... >
        <!-- Adds a toolbar item that allows users to insert variables -->
        <DxToolbar>
            <DxItem name="variable" />
        </DxToolbar>
        <DxVariables
            :data-source="variables"
            :escape-char="escapeCharacters"
        />
    </DxHtmlEditor>
</template>

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

import DxHtmlEditor, {
    DxToolbar,
    DxItem,
    DxVariables
} from 'devextreme-vue/html-editor';

export default {
    components: {
        DxHtmlEditor,
        DxVariables
    },
    data() {
        return {
            variables: ['FirstName', 'LastName', 'Company'],
            escapeCharacters: ['{', '}']
        };
    }
}
</script>

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

import HtmlEditor, {
    Variables
} from 'devextreme-react/html-editor';

const variables = ['FirstName', 'LastName', 'Company'];
const escapeCharacters = ['{', '}'];

export default function App() {
    return (
        <HtmlEditor>
            {/* Adds a toolbar item that allows users to insert variables */}
            <Toolbar>
                <Item name="variable" />
            </Toolbar>
            <Variables
                dataSource={variables}
                escapeChar={escapeCharacters}
            />
        </HtmlEditor>
    );
}