DevExtreme - HTML/Markdown WYSIWYG Text Editor (CTP in v18.2)

Many business applications require users to enter and edit formatted text, commonly in HTML or Markdown format. In our v18.2 release, we provide a CTP version of our own editor solution that integrates perfectly with your DevExtreme-based application.

To create this editor widget, we took advantage of the Open Source project Quill. This solution is performant, well-tested and highly flexible, so it didn’t seem a good idea to reinvent the wheel. We extended the Quill editor with our own modules, formats, themes and other elements.

You can use the editor on all platforms supported by DevExtreme, including Angular, Vue, React, jQuery and ASP.NET MVC and ASP.NET Core.

v18.2 Feature Set

In the CTP release, we support the following features:

• HTML and Markdown as storage formats
• Text formatting
  • Bold, italic, underlined
  • Font, size, colors (HTML only)
• Block formats
  • Headers
  • Lists, ordered and unordered
  • Text alignment (HTML only)
  • Code blocks
  • Quotes
• Inserting images as links or base64 (base64 also supports drag&drop uploads!)
• Mail-merge or templating placeholders (%username% or similar, syntax can be customized)
• Copy&paste for rich content with automatic removal of unsupported formatting
• Adaptive toolbar and dialogs to work with links, images and color formats
• Custom format support

Custom Formats

You can define your own formats using a very flexible API. To give you an impression, here’s an implementation of a custom format that replaces the standard format bold.

const CustomBold = new ClassAttributor('bold', 'custom-bold', {
  scope: INLINE
});

CustomBold.add = function(node, value) {
  if (this.canAdd(node, value)) {
    node.classList.add(`${this.keyName}`);
  }
  return value;
};

editor.registerModules({ 'formats/bold': CustomBold });

The editor is restrictive in terms of the formats it allows in the edited text. This is done on purpose to promote consistency, and it means that the flexible custom format support we supply is important so you can adapt the editor to your use cases.

Future Plans

We decided to make the editor available for v18.2 as a CTP release in order to gather feedback from you that will enable us to meet your needs in the best possible way. At the same time we have several ideas that we intend to implement for v19.1 and later – no promises about the exact timeline at this point! Here’s what we have in mind:

• Table support
• User mentions using @username syntax
• A pop-up toolbar for inline formatting
• Advanced support for images and other embeddable media, resizing, drag&drop, copy&paste

There are also two main scenarios that will not be covered by this widget:

• Layout editing - this editor is designed to support textual content with a linear flow only
• Full HTML persistence support - the editor works with a subset of HTML defined by built-in and custom formats, and it drops all unknown elements

Try It Now

The public beta of our v18.2 release is available now. Please install it using the pre-release npm package:

npm install --save devextreme@18.2-unstable

Please Let Us Know What You Think

We are interested in your thoughts, even more than usual since this is a CTP release. Please feel free to comment below or to get back to us in the Support Center or on GitHub.

We welcome all comments about our plans, the current implementation or your specific use cases!

Join the Webinar

To see all our new v18.2 features demonstrated, including the HTML and Markdown Editor, please join us in our upcoming webinar New in v18.2 - JavaScript: jQuery, Angular, React, and Vue. You can ask questions during the webinar as well!

Please follow this link to sign up

Free DevExpress Products - Get Your Copy Today