<!-- jQuery -->
<script src="https://cdn.jsdelivr.net/npm/jquery@latest/dist/jquery.min.js"></script>
<!-- FontAwesome 5 -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.0/css/all.min.css" rel="stylesheet"/>
<!-- CodeMirror -->
<script src="https://cdn.jsdelivr.net/npm/codemirror@5/lib/codemirror.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/codemirror@5/mode/markdown/markdown.js"></script>
<script src="https://cdn.jsdelivr.net/npm/codemirror@5/mode/css/css.js"></script>
<script src="https://cdn.jsdelivr.net/npm/codemirror@5/mode/xml/xml.js"></script>
<script src="https://cdn.jsdelivr.net/npm/codemirror@5/mode/htmlmixed/htmlmixed.js"></script>
<link href="https://cdn.jsdelivr.net/npm/codemirror@5/lib/codemirror.min.css" rel="stylesheet"/>
<!-- Katex -->
<script src="https://cdn.jsdelivr.net/npm/katex@latest/dist/katex.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/katex@latest/dist/katex.min.css" rel="stylesheet"/>
<!-- SunEditor -->
<script src="https://cdn.jsdelivr.net/npm/suneditor@latest/dist/suneditor.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/suneditor@latest/src/lang/en.js"></script>
<link href="https://cdn.jsdelivr.net/npm/suneditor@latest/dist/css/suneditor.min.css" rel="stylesheet"/>
<!-- Summernote w/Bootstrap5 Support -->
<script src="https://cdn.jsdelivr.net/npm/summernote@latest/dist/summernote-bs5.min.js"></script>
<link  href="https://cdn.jsdelivr.net/npm/summernote@latest/dist/summernote-bs5.min.css" rel="stylesheet"/>
<!--  Showdown -->
<script src="https://cdn.jsdelivr.net/npm/showdown@latest/dist/showdown.min.js"></script>

Note: The jQuery dependency comes from Summernote. 

FontAwesome is used to first create some nicer buttons to use with CodeMirror, and later to show how the entire set of icons for both Summernote and SunEditor can easily be replaced.  

A (somewhat) basic CodeMirror setup is included, and we'll get to the implementation details of that shortly. Note that the CodeMirror modes included are needed for regular "markdown" editing, and also those that we'll be using when it is used as the HTML code editor for both Summernote and SunEditor. If we were just using CodeMirror without those, we could get by with just the markdown JavaScript file. And as we covered last time, we're specifically referencing codemirror@5 from the CDN here so that we don't get into trouble if the CodeMirror folks release their CodeMirror 6 via a CDN link at some future point.

Katex is a library for handling mathematical equations, which is (optionally) used by SunEditor. Note that in terms of ordering, CodeMirror and Katex should come before the others so that Summernote and SunEditor are aware of them when their scripts are initialized. If you add Katex after SunEditor, for example, Katex support will not be available.

For SunEditor, the only extra bit is the language file used. There are a fair number of additional languages available.  

For Summernote, there are a handful of different distributions. For example, lite vs. regular vs. bootstrap variations.  Bootstrap support until recently was a little less than spectacular, but we'll give it a shot now and see how things turn out. Previously, I've used the lite version without problems. So if you run into any hiccups with any other variants, that might be a good choice. Note also that the jQuery dependency is due to Summernote and not anyone else.

And finally, for Showdown, there's not really much to do but include a reference to the library.

For demo purposes, I'm using a fresh TMS WEB Bootstrap Application template with three TWebHTMLDiv components that will hold each of the editors to start with. We'll expand on that shortly, but to get started we can drop the three TWebHTMLDiv components on a TWebForm and give them a name and ElementID of divSummernote, divSunEditor, and divCodeMirror. Then in the form's WebFormCreate procedure, we can do some basic initialization for each editor like this.

unit Unit1;

interface uses System.SysUtils, System.Classes, JS, Web,
WEBLib.Graphics, WEBLib.Controls, WEBLib.Forms, WEBLib.Dialogs,
Vcl.Controls, WEBLib.WebCtrls;

type
  TForm1 = class(TWebForm)
    divSummernote: TWebHTMLDiv;
    divSunEditor: TWebHTMLDiv;
    divCodeMirror: TWebHTMLDiv;
    procedure WebFormCreate(Sender: TObject);
  private
    { Private declarations }
  public
    { Public declarations }
  end;

var
  Form1: TForm1;

implementation

{$R *.dfm}

procedure TForm1.WebFormCreate(Sender: TObject);
begin
  asm
    $('#divSummernote').summernote();
    SUNEDITOR.create('divSunEditor',{});
    CodeMirror(document.getElementById('divCodeMirror'), {mode: "markdown"});
  end;
end;

end.

The result is that we've got a page with three different editors, each with its own preferences about layout (for example, only CodeMirror has any respect for the div that it is contained by), default icons, and so on. Kind of a mess to start with, but we'll get it cleaned up in no time at all.  Here's what they look like with no options specified.

unit Unit1;

interface

uses
  System.SysUtils, System.Classes, JS, Web, WEBLib.Graphics, WEBLib.Controls,
  WEBLib.Forms, WEBLib.Dialogs, Vcl.Controls, WEBLib.WebCtrls,
  Vcl.StdCtrls, WEBLib.StdCtrls;

type
  TForm1 = class(TWebForm)
    divSummernote: TWebHTMLDiv;
    divSunEditor: TWebHTMLDiv;
    divCodeMirror: TWebHTMLDiv;
    divCodeMirrorPanel: TWebHTMLDiv;
    btnCodeMirrorBold: TWebButton;
    btnCodeMirrorUnderline: TWebButton;
    btnCodeMirrorItalic: TWebButton;
    procedure WebFormCreate(Sender: TObject);
    procedure btnCodeMirrorBoldClick(Sender: TObject);
    procedure btnCodeMirrorUnderlineClick(Sender: TObject);
    procedure btnCodeMirrorItalicClick(Sender: TObject);
  private
    { Private declarations }
  public
    { Public declarations }
    cmeditor: JSValue;
  end;

var
  Form1: TForm1;

implementation

{$R *.dfm}

procedure TForm1.btnCodeMirrorBoldClick(Sender: TObject);
var
  cm: JSValue;
begin
  cm := Form1.cmeditor;
  asm
    var selection = cm.getSelection();
    cm.replaceSelection('**' + selection + '**');
    if (!selection) {
      var cursorPos =cm.getCursor();
      cm.setCursor(cursorPos.line, cursorPos.ch - 2);
    }
  end;
end;

procedure TForm1.btnCodeMirrorItalicClick(Sender: TObject);
var
  cm: JSValue;
begin
  cm := Form1.cmeditor;
  asm
    var selection = cm.getSelection();
    cm.replaceSelection('*' + selection + '*');
    if (!selection) {
      var cursorPos =cm.getCursor();
      cm.setCursor(cursorPos.line, cursorPos.ch - 2);
    }
  end;
end;

procedure TForm1.btnCodeMirrorUnderlineClick(Sender: TObject);
var
  cm: JSValue;
begin
  cm := Form1.cmeditor;
  asm
    var selection = cm.getSelection();
    cm.replaceSelection('<span style="text-decoration: underline">' + selection + '</span>');
    if (!selection) {
      var cursorPos =cm.getCursor();
      cm.setCursor(cursorPos.line, cursorPos.ch - 2);
    }
  end;
end;

procedure TForm1.WebFormCreate(Sender: TObject);
begin
  asm

    $('#divSummernote').summernote({
      height: 200,
      minHeight: 100
    });

    SUNEDITOR.create('divSunEditor',{
      width: 'auto',
      height: 200,
      minHeight: 100
    });

    this.cmeditor = CodeMirror(divCodeMirror, {
      mode: "markdown",
      lineNumbers: true
    });

    var boldclick = this.btnCodeMirrorBoldClick;
    this.cmeditor.addKeyMap({"Ctrl-B":function (cm) { boldclick() }});
    var underlineclick = this.btnCodeMirrorBoldClick;
    this.cmeditor.addKeyMap({"Ctrl-I":function (cm) { underlineclick() }});
    var italicclick = this.btnCodeMirrorBoldClick;
    this.cmeditor.addKeyMap({"Ctrl-U":function (cm) { italicclick() }});

    divCodeMirror.classList.add('w-100');
    divCodeMirror.firstElementChild.style.height = "200px";
    divCodeMirror.firstElementChild.style.minHeight = "100px";
    divCodeMirror.firstElementChild.style.resize = "vertical";
    divCodeMirror.firstElementChild.style.overflow = "auto !important";
  end;
end;

end.

Next up, let's talk about buttons, generally. We've just seen what was necessary to get buttons for CodeMirror to behave the way we'd like, but fortunately, with Summernote and SunEditor, there are a ton of buttons already defined. And there are even more buttons possible, all easily customizable. They both work pretty much the same way, with a few minor differences. And, in both cases, they call all be replaced with other icons. I'm a big fan of FontAwesome DuoTone icons for example, as they make things look a little nicer. But regular FontAwesome icons work just as well. Both also support button groups, so similar buttons can be collected together. And with a little bit of effort, they will also wrap when the available space is less than the width of all of the buttons.

Beyond the standard buttons, there's also generally a need to add custom buttons. For example, both Summernote and SunEditor have undo/redo capabilities. I also tend to use these with a database backend, so being able to "save to database" is a natural thing to want to do, but only if the content has changed. So having some custom functionality can be pretty important, along with some custom icons to personalize things a little bit.

procedure TForm1.SummernoteSave(HTML: WideString);
begin
  console.log('User wants to save an HTML file that has '+IntToStr(Length(HTML))+' bytes');
end;

All the same kinds of things apply here to SunEditor as they do to Summernote, just expressed a little differently, and none of the caret shenanigans.

SunEditor with FontAwesome 5 Solid Icons.

SunEditor with FontAwesome 6 DuoTone Icons.

procedure TForm1.SunEditorSave(HTML: WideString);
begin
  console.log('User wants to save an HTML file that has '+IntToStr(Length(HTML))+' bytes');
end;

Markdown/Showdown Scenario.

Note that in Markdown, you don't need to properly order an ordered list - it will figure out the numbers for you.  Also, the Showdown JavaScript library can convert from HTML back to Markdown as well, if you find that you need that feature.

Code View.

Both Summernote and SunEditor can make use of CodeMirror directly when viewing the underlying HTML code.  Line numbers, themes, and all the rest of CodeMirror can be used, simply by specifying its own options in the definition of the editor. Summernote by default has reasonable CodeMirror defaults. In SunEditor you can get the same effect using an extra definition, something like this.

   this.suneditor = SUNEDITOR.create('divSunEditor',{
      width: 'auto',
      height: 200,
      minHeight: 100,
      codeMirror: {
        src: CodeMirror,
        options: {
          lineNumbers: true
        }
      }
    });

SunEditor even has options that can prohibit certain HTML tags from being used in the first place, which can be hugely beneficial but also bothersome if you happen to need those tags and aren't aware of what is being excluded.  Both editors are also likely to rewrite your HTML code when it decides there's a more optimal way to display it. So getting them ultimately to behave like the WYSIWYG editors they are sometimes can be a bit tricky. but entirely possible. 

One could probably write a book about all the various ins and outs of both of these editors, but here are some final thoughts to keep in mind.

Tough call. I used SunEditor initially for a long time. I've recently started to use Summernote in a few projects. I tend to personally prefer SunEditor, but general users who are just editing documents seem to have less trouble with Summernote. Summernote might be more forgiving when editing certain kinds of advanced HTML blocks, but honestly, it is hard to say. From a developer perspective, I actually see a lot more development work going into SunEditor than Summernote, just based on the frequency of GitHub activity. And there's a big v3 release of SunEditor due in the next short while, whereas Summernote has been languishing around v0.8 for quite some time. Not that it matters if it works great already, just different things to think about.

Next time out, we'll finally start to get into Tabulator. Definitely won't get through it in one post. Or even two or three. So stay tuned. And as always, I'd like to get more feedback on how things are going and what things you find interesting. Suggestions for future topics. Questions about past topics. Whatever you like!

Follow Andrew on 𝕏 at @WebCoreAndMore or join our 𝕏 Web Core and More Community.