Export from Markdown Custom Button

by Froala_marketing

HTML

<script src="https://editor-latest.s3.amazonaws.com/v3/js/froala_editor.min.js"></script>
<script src="https://editor-latest.s3.amazonaws.com/v3/js/plugins/markdown.min.js"></script>
<link rel="stylesheet" href="https://editor-latest.s3.amazonaws.com/v3/css/froala_editor.min.css">
<link rel="stylesheet" href="https://editor-latest.s3.amazonaws.com/v3/css/plugins/markdown.min.css">
<div id="froala-editor"></div>

JavaScript

FroalaEditor.SVG.export =
  "M15.293 5.293L12 8.586V2h-1v6.586L8.707 5.293 7.293 6.707 12 11.414l4.707-4.707zM18 11h-1v4H7v-4H6v5h12v-5z"

FroalaEditor.DefineIcon("export", { NAME: "Export", SVG_KEY: "export" })
FroalaEditor.RegisterCommand("export", {
  title: "Export from Markdown",
  type: "button",
  //focus: false,
  undo: false,
  refreshAfterCallback: true,
  forcedRefresh: true,
  disabled: true,
  plugin: "markdown",
  showOnMobile: true,
  refresh: function refresh($btn) {
    if (this.markdown.isEnabled()) $btn[0].classList.remove("fr-disabled").setAttribute('aria-disabled', 'true');
    else $btn[0].classList.add("fr-disabled").setAttribute('aria-disabled', 'false');
  },
  callback: function () {
    this.selection.save();
    this.commands.selectAll();
    const markdownContent = this.selection.text();
    this.selection.restore();
    const blob = new Blob([markdownContent], {
      type: "text/markdown;charset=utf-8",
    })
    const url = URL.createObjectURL(blob)
    const a = document.createElement("a")
    a.href = url
    a.download = "markdown.md"
    a.click()
    URL.revokeObjectURL(url)
  },
})

new FroalaEditor("#froala-editor", {
  toolbarButtons: ["bold", "italic", "underline", "markdown", "|", "export"],
})