Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
59 changes: 43 additions & 16 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -3,28 +3,55 @@
[![](https://img.shields.io/badge/Open_in_DevExpress_Support_Center-FF7200?style=flat-square&logo=DevExpress&logoColor=white)](https://supportcenter.devexpress.com/ticket/details/T1223158)
[![](https://img.shields.io/badge/📖_How_to_use_DevExpress_Examples-e9f6fc?style=flat-square)](https://docs.devexpress.com/GeneralInformation/403183)
<!-- default badges end -->
# DXHtmlEditor

This is the repository template for creating new examples. Describe the solved task here.
# Integrate JavaScript HTML Editor into a WinForms App

Put a screenshot that illustrates the result here.
This example integrates the JavaScript WYSIWYG HTML Editor (a components that ships as part of [DevExteme UI component suite](https://js.devexpress.com)) within a WinForms application. The client-side HTML Editor is embedded into the Microsoft Edge WebView2 control (`DXHtmlEditorWebView`).

Then, add implementation details (steps, code snippets, and other technical information in a free form), or add a link to an existing document with implementation details.
![Integrate JavaScript HTML Editor into a WinForms Application](https://raw.githubusercontent.com/DevExpress-Examples/integrate-devextreme-javascript-html-editor-into-winforms-app/main/i/devextreme-html-editor-within-winforms-app.png?token=GHSAT0AAAAAACOLUA4BY24LLNXJFVZ63SBCZPYBT7Q)

## Files to Review
## HTML Editor Features

- HTML and Markdown Support
- HTML Editor features include:
- Inline and Block Formats
- Copy/Paste Rich Text Formatting
- Insert Media and Upload Images
- Tables
- Mail Merge
- UI Customization
- Light/Dark Themes

> Note
> - Using DevExpress JavaScript HTML Editor within your desktop application requires an active [DevExtreme license](https://www.devexpress.com/buy/js/).
> - The DevExtreme HTML Editor does not support all HTML-related features and tags ([read about limitations](https://js.devexpress.com/Angular/Documentation/Guide/UI_Components/HtmlEditor/Overview/)).

- link.cs (VB: link.vb)
- link.js
- ...
The example also implements the following:

## Documentation
- Auto-syncs the WinForms application skin with the HTML Editor’s theme. When switching from a dark to a light color palette (and vice versa), the corresponding theme (dark or light) is applied to the HTML Editor.
- Undo/Redo Ribbon commands allow users to revert or redo actions within the HTML Editor.

- link
- link
- ...
## Use the HTML Editor in Your WinForms App

## More Examples
1. Copy the `DXHtmlEditor` folder to your project.
2. Install the `Microsoft.Web.WebView2` NuGet package.
3. Open the *DXHtmlEditorClient.cs* file and specify the default namespace within the `OnWebResourceRequested` method:
```csharp
void OnWebResourceRequested(object sender, CoreWebView2WebResourceRequestedEventArgs e) {
var environment = webView?.Environment;
if(environment == null)
return;
string asset = $@"{nameof(MyDefaultNamespace)}.{nameof(DXHtmlEditor)}.Assets.{e.Request.Uri.Substring(rootURIFilter.Length - 1)}";
// ...
}
```
4. Set **Build Action** to "Embedded Resource" for all files in the Assets folder.
5. Build the solution.
6. Drop the `DXHtmlEditorWebView` component from the toolbox onto a form.

## Files to Review

- link
- link
- ...
- [DXHtmlEditorClient.cs](./DXHtmlEditor/DXHtmlEditorClient.cs)
- [DXHtmlEditorWebView.cs](./DXHtmlEditor/DXHtmlEditorWebView.cs)
- [MainForm.cs](./MainForm.cs)
- [index.js](./DXHtmlEditor/Assets/index.js)
Binary file added i/devextreme-html-editor-within-winforms-app.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.