diff --git a/api-reference/10 UI Components/dxHtmlEditor/1 Configuration/customizeModules.md b/api-reference/10 UI Components/dxHtmlEditor/1 Configuration/customizeModules.md index 7c2cc3e1fc..db6b8c9b78 100644 --- a/api-reference/10 UI Components/dxHtmlEditor/1 Configuration/customizeModules.md +++ b/api-reference/10 UI Components/dxHtmlEditor/1 Configuration/customizeModules.md @@ -10,121 +10,151 @@ Allows you to customize the DevExtreme Quill and 3rd-party modules. Module configurations. --- -The DevExtreme Quill modules and the API you can use to customize them are described in the Modules documentation section. For example, the History module, which handles the undo and redo operations, can be customized as follows: +The [Modules](https://github.com/DevExpress/devextreme-quill/tree/master/docs/modules) documentation section describes the DevExtreme Quill modules and the API you can use to customize them. For example, the [History](https://github.com/DevExpress/devextreme-quill/blob/master/docs/modules/history.md) module, which handles the undo and redo operations, can be customized as follows: --- + ##### jQuery - $(function() { - $("#htmlEditorContainer").dxHtmlEditor({ - // ... - customizeModules: function(config) { - config.history = { - delay: 0, - maxStack: 5000 - }; - } - }); + $("#html-editor").dxHtmlEditor({ + customizeModules(config) { + config.history = { + delay: 0, + maxStack: 5000 + }; + } }); ##### Angular - import { Component } from '@angular/core'; + import { DxHtmlEditorModule } from 'devextreme-angular/ui/html-editor'; - @Component({ - selector: 'app-root', - templateUrl: './app.component.html', - styleUrls: ['./app.component.css'] - }) + // ... export class AppComponent { customizeQuillModules(config) { config.history = { delay: 0, - maxStack: 5000 + 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 { } - ##### Vue - ##### React - - import React from 'react'; + + import React, { useCallback } from 'react'; + import { HtmlEditor } from 'devextreme-react/html-editor'; - import 'devextreme/dist/css/dx.fluent.blue.light.css'; + export default function App() { + const customizeQuillModules = useCallback((config) => { + config.history = { + delay: 0, + maxStack: 5000, + }; + }, []); + + return ( + + ); + } + +--- - import HtmlEditor from 'devextreme-react/html-editor'; +Use **customizeModules** and `keyboard.inlineTabInsertion` to modify the HTML Editor's [keyboard navigation](/Documentation/Guide/UI_Components/HtmlEditor/Accessibility/#Keyboard_Navigation) behavior: - class App extends React.Component { - render() { - return ( - - ); +--- + +##### jQuery + + + $("#html-editor").dxHtmlEditor({ + customizeModules(config) { + config.keyboard.inlineTabInsertion = true; } + }); + +##### Angular + + + + + + + import { Component } from '@angular/core'; + import { DxHtmlEditorModule } from 'devextreme-angular/ui/html-editor'; + + // ... + export class AppComponent { customizeQuillModules(config) { - config.history = { - delay: 0, - maxStack: 5000 - }; + config.keyboard.inlineTabInsertion = true; } } - export default App; + +##### Vue + + + + + + +##### React + + + import React, { useCallback } from 'react'; + import { HtmlEditor } from 'devextreme-react/html-editor'; + + export default function App() { + const customizeQuillModules = useCallback((config) => { + config.keyboard.inlineTabInsertion = true; + }, []); + + return ( + + ); + } --- diff --git a/concepts/05 UI Components/HtmlEditor/03 Accessibility/10 Accessibility Standards Compliance.md b/concepts/05 UI Components/HtmlEditor/03 Accessibility/10 Accessibility Standards Compliance.md index a48eb0f841..e0280043e4 100644 --- a/concepts/05 UI Components/HtmlEditor/03 Accessibility/10 Accessibility Standards Compliance.md +++ b/concepts/05 UI Components/HtmlEditor/03 Accessibility/10 Accessibility Standards Compliance.md @@ -16,11 +16,6 @@ The HTML Editor component meets a variety of - PC - Mac + PC + Mac Action @@ -50,25 +50,45 @@ A user can use the following keys to interact with the HTML Editor component: Insert a line break (in the same paragraph) - Tab - Nest current list item (when in a list) + Tab + +
    +
  • Indent list items
    • +
  • Focus the next cell in tables
    • +
  • Focus the next focusable element on the page. If keyboard.inlineTabInsertion is enabled, insert a tab character (\t) in text.
    • +
+ + + + Shift + Tab + + + - Increase indentation (when at the start of a paragraph) - - - Move the cursor to the next table cell + Arrow Keys + Navigate through the table - Shift + Tab - Move the cursor to the previous table cell + Ctrl + Shift + Up Arrow + ⌘ + Shift + Up Arrow + Focus the previous focusable element on the page or the HTML Editor toolbar (if configured) - Decrease indentation (when at the start of a paragraph) - - - Arrow Keys - Navigate through the table + Ctrl + Shift + Down Arrow + ⌘ + Shift + Down Arrow + Focus the next focusable element on the page Enter @@ -84,4 +104,72 @@ A user can use the following keys to interact with the HTML Editor component: +Configure [customizeModules](/Documentation/ApiReference/UI_Components/dxHtmlEditor/Configuration/#customizeModules) to toggle `keyboard.inlineTabInsertion`: + +--- + +##### jQuery + + + $("#html-editor").dxHtmlEditor({ + customizeModules(config) { + config.keyboard.inlineTabInsertion = true; + } + }); + +##### Angular + + + + + + + import { Component } from '@angular/core'; + import { DxHtmlEditorModule } from 'devextreme-angular/ui/html-editor'; + + // ... + export class AppComponent { + customizeQuillModules(config) { + config.keyboard.inlineTabInsertion = true; + } + } + +##### Vue + + + + + + +##### React + + + import React, { useCallback } from 'react'; + import { HtmlEditor } from 'devextreme-react/html-editor'; + + export default function App() { + const customizeQuillModules = useCallback((config) => { + config.keyboard.inlineTabInsertion = true; + }, []); + + return ( + + ); + } + +--- + #include common-code-register-key-handler \ No newline at end of file