July Special:  Up to 30% off on all plans for new users
Days
Hours
Minutes
Seconds
x
Skip to content
Froala Documentation

Markdown Export in Froala Editor

Markdown Export

This demo includes a custom button for exporting the user’s Markdown input. The button becomes active when the Markdown interface is in use. Clicking it downloads a .md file containing the Markdown code, making it easy to share with others.

Try it yourself:

Edit in JSFiddle

HTML

<div id="froala-editor">
</div>

JavaScript

<script>
// Define the custom button's SVG icon path.
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" })

// Custom button properties
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)
  },
})

//Initialize the editor with the custom toolbar button.
new FroalaEditor("#froala-editor", {
  toolbarButtons: ["bold", "italic", "underline", "markdown", "|", "export"],
})
</script>

Try Froala Free

 
 
Back to Examples