astro cherry-markdown 示例

cherry-markdown是一个TS编写的markdown编辑器。

---
import "cherry-markdown/dist/cherry-markdown.css";
---

<cherry-mark>
  <textarea></textarea>
</cherry-mark>

<script>
  import Cherry from "cherry-markdown";

  class CherryMark extends HTMLElement {
    constructor() {
      super();
      const area = this.querySelector("textarea")!;
      const cherryInstance = new Cherry({
        autoScrollByHashAfterInit: true,
        el: area,
        toolbars: {
          toolbar: [
            'bold',
            'italic',
            {
              strikethrough: ['strikethrough', 'underline', 'sub', 'sup', 'ruby', 'customMenuAName'],
            },
            'size',
            '|',
            'color',
            'header',
            '|',
            'drawIo',
            '|',
            'ol',
            'ul',
            'checklist',
            'panel',
            'justify',
            'detail',
            '|',
            'formula',
            {
              insert: ['image', 'audio', 'video', 'link', 'hr', 'br', 'code', 'inlineCode', 'formula', 'toc', 'table', 'pdf', 'word'],
            },
            'graph',
            'togglePreview',
            'settings',
            'codeTheme',
            'export',
            'theme',
          ],
          toolbarRight: ['fullScreen', '|', 'wordCount'],
          bubble: ['bold', 'italic', 'underline', 'strikethrough', 'sub', 'sup', 'quote', 'ruby', '|', 'size', 'color'], // array or false
          sidebar: ['mobilePreview', 'copy', 'theme', 'publish'],
          theme: "light",
        },
        value: "# Welcome to Cherry Markdown Editor"
      });
    }
  }

  customElements.define('cherry-mark', CherryMark);
</script>