vue中使用web-editor-markdown在线编辑浏览markdown

web-editor-markdown是Web浏览器中的Markdown编辑器，用于实时渲染，如.它基于 TypeScript 和 JavaScript，不依赖于任何第三方框架。它支持中文友好，可以轻松扩展并连接到原生JavaScript，Vue，React，Angular和其他应用程序。它提供四种渲染模式：、 和 。如有必要，其底层还支持协同编辑的能力，并提供原子来扩展协作编辑。Typora SOURCE SOURCE_AND_PREVIEW RENDER PREVIEW Operation

github https://github.com/Ben-love-zy/web-editor-markdown

npm install web-editor-markdown --save

<template>
  <button @click="print">print</button>
  {{text}}
  <div id="box"></div>
</template>

<script setup lang="ts">
import { onMounted,ref } from "vue";
import { Editor, withUndoRedo } from "web-editor-markdown";

let text = ref<string>('');
let editor:Editor;
onMounted(() => {
  editor = new Editor(document.querySelector("#box") as HTMLElement);
  editor = withUndoRedo(editor);
  editor.insertTextAtCursor('# 标题');
});

const print = ()=> {
  text.value = editor.getContent();
}
</script>

<style scoped></style>