@qingbing/ts-vue3-md-editor v2.0.2

ts-vue3-md-editor

• 2.0.0
  • 结构成型推送
• 2.0.1
  • 加入 highlight.js 插件
• 2.0.2
  • ok

1. 功能说明

• 该组件时对 @kangc/v-md-editor 进行再次封装，只能使用在 vue3 上， 使用 typescript 语言
• 插件中透传 @kangc/v-md-editor 组件的所有事件

对于单独安装 @kangc/v-md-editor 插件的命令

# vue2 版本上安装
npm i @kangc/v-md-editor

# vue3 版本上安装
npm i @kangc/v-md-editor@next

• 封装后的编辑组件选项

export interface MdEditorOptions {
    mode?: "preview" | "editable" | "edit";
    placeholder?: string;
    height?: string;
    defaultFullscreen?: boolean;
    disabledMenus?: Array<
        | "bold"
        | "clear"
        | "code"
        | "fullscreen"
        | "h"
        | "hr"
        | "image"
        | "italic"
        | "link"
        | "ol"
        | "preview"
        | "quote"
        | "redo"
        | "save"
        | "strikethrough"
        | "sync-scroll"
        | "table"
        | "toc"
        | "ul"
        | "undo"
    >;
}

2. 下载

npm i @qingbing/ts-vue3-md-editor

3. 使用

3.1 渲染 md 内容

<template>
  <MdPreview v-model="text" />
</template>

<script setup lang="ts">
import { MdPreview } from "@qingbing/ts-vue3-md-editor";

const text = "# 这里是要预览的解析后的html文本\n\n```js\nvar a = 1\n```"；
</script>

3.2 渲染 html 内容

<template>
  <MdHtmlPreview v-model="html" />
</template>

<script setup lang="ts">
import { MdHtmlPreview } from "@qingbing/ts-vue3-md-editor";

const html = "<h2>这里是要预览的解析后的html文本</h2>";
</script>

3.3 md 文档编辑器

<template>
  <MdEditor
    v-model="text"
    :options="opts"
    @save="save"
    @upload-image="uploadImage"
  />
</template>

<script setup lang="ts">
import { ref } from "vue";
import { MdEditor, MdEditorOptions } from "@qingbing/ts-vue3-md-editor";

const html = "<h2>这里是要预览的解析后的html文本</h2>";
// 编辑器支持的选项参数
const opts: MdEditorOptions = {
  height: "400px",
};
// Ctrl + S 保存文件事件 
const save = (text: string) => {
  console.log("saveing =====> ", text);
};
// @upload-image 事件可以开启本地图片上传
function uploadImage(event: Event, insertImage: any, files: Array<File>) {
  insertImage({
    url: "https://www.baidu.com/img/flexible/logo/pc/result.png",
  });
}
</script>