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

HTML/MarkDown Editor

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

14 comment(s)
Simon Unsworth

I'm pretty excited about this control...

Do you have some examples of configuring the RichEdit control, Ribbons/Toolbar appearance etc?

Is the MVC Extension going to be full featured or will it require javascript configuration?

29 October, 2018
Customer37575

We need a similar component under ASP.NET MVC & Core Controls (without DevExtreme).

Of course, there is already HtmlEditor from WebForms, but it is very heavy and multifunctional. That is why we have to use third-party solutions. What we need is a lightweight component with HTML / Markdown support, with the ability to insert images from the dialog, mail-merge, and other simple functions.

29 October, 2018
Santiago Moscoso

Nice.

Can you make the mentions system configurable? something like this: yuku.github.io/textcomplete (Or at least a way to integrate it)

29 October, 2018
Alex B (DevExpress)

@Simon Unsworth

> Do you have some examples of configuring the RichEdit control, Ribbons/Toolbar appearance etc?

I'd like to make sure you don't confuse ASP.NET Core RichEdit with HtmlEditor. We have both. The first one is used to load/export office RTF/DOC formats. It replicates MS Word features. The second one is lightweight and is used to load/export formatted text in HTML and Markdown formats. We are working on demos and documentation and expect to publish them soon.

> Is the MVC Extension going to be full featured or will it require javascript configuration?

You can use Razor to configure the ASP.NET MVC/Core HtmlEditor. But you need to use JavaScript to interact with the control on the client-side.

@Customer37575

> We need a similar component under ASP.NET MVC & Core Controls (without DevExtreme).

DevExpress ASP.NET MVC & Core Controls are based on DevExtrme JavaScript widgets. Could you please clarify, why you need them without DevExtreme?

@Santiago Moscoso

> Can you make the mentions system configurable?

We'll consider your suggestion. Thank you.

29 October, 2018
Customer37575

@Alex B (DevExpress)

I think you could guess that I was talking about with the ASP.NET MVC Extensions suite (based on WebForms suite).

Your company develops different sets of components. DevExtreme though is the most advanced set, but not so complete as the set for WebForms / MVC Extensions. There is not even a FileManager Control and many other complex components. It was hoped that ASP.NET Core Bootstrap would actively develop, but it was thrown out in favor of DevExtreme. And It’s not so easy to take and move from WebForms / MVC Extensions to DevExtreme ;)

29 October, 2018
Tomas Rimkus

@Customer37575

Have you seen the following ASP.NET MVC Extension:

demos.devexpress.com/MVCxHTMLEditorDemos

30 October, 2018
Customer37575

@Tomas Rimkus

Of course I saw him. As I wrote above, there is already an HtmlEditor (from WebForms / ASP.NET MVC Extensions), however it is heavy, slow and designed for other tasks, in other words, it is not a real alternative to this lightweight widget. In addition, it does not support Markdown.

30 October, 2018
Jim Foye

It should be just as easy to paste unformatted text into the control as it is to paste formatted text. This is a problem with the support system (as I have complained about before).

Let's say I'm editing in this control.

Now I want to paste some text from another source, where it happens to be formatted (most likely a web page, but could also be source code from Visual Studio, text from Word or PDF). I MAY want to preserve the formatting from the original source. Then again, I may be formatting text completely differently, and it is easiest if I can paste in my text without formatting and then format it to match what I'm currently editing.

I'm one of these people who has found it necessary to configure Outlook to always paste in text from elsewhere as PLAIN text by default, because 9 times out of 10, the source text will NOT be formatted in anyway that is desirable for the email that I'm sending someone.

I'm always getting annoyed in the support system when I copy some text into a support incident that I am creating, then have to clean it up.

30 October, 2018
Nico Naumann

Great news! We have been looking forward to this for a while now.

Looks like you included Quills Image Drop module.

(www.npmjs.com/.../quill-image-drop-module)

Any plans in adding the Image Resize Module as well?

(www.npmjs.com/.../quill-image-resize-module)

1 November, 2018
Brien King

I'm assuming you're not touching the ASPxHtmlEditor correct?

2 November, 2018
Alex B (DevExpress)

@Nico Naumann

> Any plans in adding the Image Resize Module as well?

I would say that we plan to add an image resizing functionality, but it may be implemented not by means of the module you've mentioned.

@Brein King

> I'm assuming you're not touching the ASPxHtmlEditor correct?

You are right. This post is not related to ASPxHtmlEditor.

2 November, 2018
Rudy Garcia

Will this be available as an option for the scheduler appointment description field? I am currently using quill as an override so would be nice if this was just a default option.

6 November, 2018
Alex B (DevExpress)

> Will this be available as an option for the scheduler appointment description field?

It's not going to be a default option, but you can customize the form and use the new HTML/Markdown Editor instead of the default one.

14 November, 2018
Christodoulos Maragkos 1

It could be nice if add paste from word excel feature, if you paste now from word it doesn't keep tables.

Another feature is that we can implement custom dialogs, for example to make a file browser for images and links

18 November, 2018

Please login or register to post comments.