Angular HtmlEditor - converter

Allows you to convert an HtmlEditor value between different markups.

Selector: dxo-converter

Type:

| undefined

Default Value: undefined

jQuery

index.js

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,
});

Angular

app.component.ts

app.component.html

export class AppComponent {
    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;
    }
}

<dx-html-editor>
    <dxo-converter
        (toHtml)="toHtml"
        (fromHtml)="fromHtml"
    >
    </dxo-converter>
</dx-html-editor>

Vue

App.vue

<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>

React

App.js

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;

View Demo