SunEditor Playground

// npm i suneditor@3.0.0
import suneditor, { plugins } from "suneditor";
import "suneditor/css/editor";
import "suneditor/css/contents";
import CodeMirror from "codemirror";
import "codemirror/lib/codemirror.css";
import "codemirror/mode/htmlmixed/htmlmixed";

const editor = suneditor.create(document.getElementById("editor"), {
  plugins,
    externalLibs: {
      codeMirror: { src: CodeMirror },
    },
    buttonList: [
          ["undo", "redo"],
          "|",
          ["blockStyle", "font", "fontSize"],
          "|",
          ["bold", "italic", "underline", "strike"],
          "|",
          ["fontColor", "backgroundColor"],
          "|",
          ["removeFormat"],
          "|",
          ["outdent", "indent", "align", "list"],
          "|",
          ["table", "link", "image"],
          "|",
          ["fullScreen", "codeView"],
          [
            "%768",
            [
            ["undo", "redo"],
            "|",
            [":Format-default.more_paragraph", "blockStyle", "font", "fontSize"],
            [":Text-default.more_text", "bold", "italic", "underline", "strike", "|", "fontColor", "backgroundColor", "|", "removeFormat"],
            ["outdent", "indent", "align", "list"],
            "|",
            [":Insert-default.more_plus", "table", "link", "image"],
            "|",
            ["fullScreen", "codeView"]
            ]
          ],
          [
            "%576",
            [
            ["undo", "redo"],
            [":Format-default.more_paragraph", "blockStyle", "font", "fontSize"],
            [":Text-default.more_text", "bold", "italic", "underline", "strike", "|", "fontColor", "backgroundColor", "|", "removeFormat"],
            [":Insert-default.more_plus", "outdent", "indent", "align", "list", "|", "table", "link", "image"],
            ["-right", ":View-default.more_view", "fullScreen", "codeView"]
            ]
          ]
        ],
});