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>
标签:markdown,示例,cherry,strikethrough,astro,theme,Cherry
From: https://www.cnblogs.com/soarowl/p/18342069