Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://js.devexpress.com/Documentation/Guide/UI_Components/HtmlEditor/Formats/ below:

Vue HtmlEditor - Formats | Vue Documentation

The formats are applied by toolbar items. Most formats have items attached to them out-of-the-box. Refer to Predefined Items for a full list of toolbar items and the formats they apply.

The following tables list available formats and their values grouped into five categories: inline (or text), block, embedded, image, and table formats.

All the following formats are extendable:

The following formats apply only to the <table> element and can be modified (not extendable):

The following formats apply only to the <th> and <td> elements and can be modified (not extendable):

The HTML Editor provides the following API methods to format the content:

Refer to the full method descriptions for examples and detailed information.

The extend operation is available for blots only. For attributors, use the modify operation.

The format tables include customization operations.

When modifying a format, you can change the markup tag associated with it and limit format values. Refer to the get(componentPath) description to see a code example.

Module modification is also possible but can cause the module to malfunction.

You can extend the HTML Editor's formats and modules, and also the DevExtreme Quill's formats and modules. To get a format or module for further extension, pass "formats/[formatName]" or "modules/[moduleName]" to the get(componentPath) method.

In the following code, the strike format is extended so that the strikethrough text is non-editable when the format is applied. The extended format is then registered.

$(function() {
    $("#htmlEditorContainer").dxHtmlEditor({
        // ...
        onInitialized: function(e) {
            const htmlEditor = e.component;
            const Strike = htmlEditor.get("formats/strike");
            class NonEditableStrike extends Strike {
                // Overrides the method that creates a DOM node for the formatted text
                static create(value) {
                    // Creates a DOM node using the parent's implementation
                    const node = super.create(value);
                    node.setAttribute('contenteditable', false);
                    return node;
                }
            }
            // Replaces the built-in `strike` format
            htmlEditor.register({ "formats/strike": NonEditableStrike });
        }
    });
});

<dx-html-editor
    (onInitialized)="onInitialized($event)">
</dx-html-editor>

import { DxHtmlEditorModule } from "devextreme-angular";
// ...
export class AppComponent {
    onInitialized (e) {
        const htmlEditor = e.component;
        const Strike = htmlEditor.get("formats/strike");
        class NonEditableStrike extends Strike {
            // Overrides the method that creates a DOM node for the formatted text
            static create(value) {
                // Creates a DOM node using the parent's implementation
                const node = super.create(value);
                node.setAttribute('contenteditable', false);
                return node;
            }
        }
        // Replaces the built-in `strike` format
        htmlEditor.register({ "formats/strike": NonEditableStrike });
    }
}
@NgModule({
    imports: [
        // ...
        DxHtmlEditorModule
    ],
    // ...
})

<template>
    <DxHtmlEditor @initialized="onInitialized"/>
</template>

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

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

export default {
    components: {
        DxHtmlEditor
    },
    methods: {
        onInitialized(e) {
            const htmlEditor = e.component;
            const Strike = htmlEditor.get('formats/strike');
            class NonEditableStrike extends Strike {
                // Overrides the method that creates a DOM node for the formatted text
                static create(value) {
                    // Creates a DOM node using the parent's implementation
                    const node = super.create(value);
                    node.setAttribute('contenteditable', false);
                    return node;
                }
            }
            // Replaces the built-in `strike` format
            htmlEditor.register({
                'formats/strike': NonEditableStrike
            });
        }
    }
}
</script>

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

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

class App extends React.Component {
    onInitialized(e) {
        const htmlEditor = e.component;
        const Strike = htmlEditor.get('formats/strike');
        class NonEditableStrike extends Strike {
            // Overrides the method that creates a DOM node for the formatted text
            static create(value) {
                // Creates a DOM node using the parent's implementation
                const node = super.create(value);
                node.setAttribute('contenteditable', false);
                return node;
            }
        }
        // Replaces the built-in `strike` format
        htmlEditor.register({
            'formats/strike': NonEditableStrike
        });
    }

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

}

export default App;

NOTE

Quill registers modules globally in a static function. You cannot register different modules for different HTML Editor instances. If you register a module for one HTML Editor, this module will be registered for all other HTML Editors on the page/application.

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4