Usando el paso cherry-markDown en vue3

Adjunto se encuentra el sitio web oficial de cherry-markDown y ejemplos de uso de API.

Título: GitHub - Tencent/cherry-markdown: ✨ Un editor de Markdown

API: API de Cherry Markdown

Teniendo en cuenta la reutilización, hice una encapsulación secundaria basada en el complemento. Los pasos son los siguientes:

1. Descargue npm install cherry-markdown --save

2. Primero defina un contenedor MarkDown en html y establezca la identificación y el estilo.

<template>
  <div v-loading="loading" element-loading-text="文件上传中...">
    <div @click.prevent.stop>
      <div :id="mdId" :style="{ height: height + 'px' }"></div>
    </div>
  </div>
</template>

3.Introducir markDown en js

import Cherry from "cherry-markdown";
import "cherry-markdown/dist/cherry-markdown.min.css";

4. Defina las variables que se utilizarán e inicialice MarkDown.

(Parte de esto se pasa desde el componente principal, la carga se usa al cargar imágenes/videos/adjuntos)

const props = defineProps({
  height: {
    type: Number,
    default: 600,
  },
  modelValue: {
    type: String,
    default: "",
  },
  knwlgId: {
    type: String,
    default: "",
  },
  mdId: {
    type: String,
    default: "markdown-container",
  },
});
const emits = defineEmits(["update:modelValue", "setHtml"]);
const cherrInstance = ref(null);
const loading = ref(false);

onMounted(() => {
  //初始化markDown
  initCherryMD();
});

5.Inicializar MarkDown

togglePreview en toolbars.toolbar es el botón de vista previa

Establezca el modo predeterminado: editor.defaultModel

// defaultModel es el modo predeterminado después de inicializar el editor. Hay tres modos en total: 1. modo de vista previa de edición de dos columnas; 2. modo de edición pura; 3. modo de vista previa

// edición y vista previa: modo de vista previa de edición de doble columna

// editOnly: modo de edición pura (sin vista previa, se puede cambiar al modo de doble columna o vista previa a través de la barra de herramientas)

// solo vista previa: modo de vista previa (sin cuadro de edición, la barra de herramientas solo muestra el botón "Volver a editar", puede cambiar al modo de edición a través de la barra de herramientas)

// modelo predeterminado: 'editar y vista previa',

const initCherryMD = (value, config) => {
  cherrInstance.value = new Cherry({
    id: props.mdId,
    value: props.modelValue,
    fileUpload: fileUpload,
    emoji: {
      useUnicode: true,
    },
    header: {
      anchorStyle: "autonumber",
    },
    editor: {
      defaultModel: "editOnly",
    },
    toolbars: {
      theme: "light",
      toolbar: [
        "bold",
        "italic",
        "underline",
        "strikethrough",
        "|",
        "color",
        "header",
        "|",
        "list",
        "image",
        {
          insert: [
            "audio",
            "video",
            "link",
            "hr",
            "br",
            "code",
            "formula",
            "toc",
            "table",
            "line-table",
            "bar-table",
            "pdf",
            "word",
          ],
        },
        "graph",
        "settings",
        // "switchModel",
        "togglePreview",
      ],
      bubble: [
        "bold",
        "italic",
        "underline",
        "strikethrough",
        "sub",
        "sup",
        "|",
        "size",
        "color",
      ],
      float: [
        "h1",
        "h2",
        "h3",
        "|",
        "checklist",
        "quote",
        "quickTable",
        "code",
      ],
      customMenu: [],
    },
    callback: {
      afterChange: afterChange,
      beforeImageMounted: beforeImageMounted,
    },
  });
};

6. Defina el método para cargar imágenes y obtener datos (aquí puede emitir juicios según las necesidades reales)

// 上传通用接口未实现audioVideo
const fileUpload = (file, callback) => {
  if (file.size / 1024 / 1024 > 200) {
    return proxy.$modal.msgError("请上传200M以内的图片！");
  }
  if (!file.type.includes("image")) {
    return proxy.$modal.msgError("仅支持上传图片！");
  }
  const formData = new FormData();
  formData.append("file", file);
  console.log(file, "file");
  loading.value = true;
  uploadImg(props.knwlgId, formData)
    .then((res) => {
      loading.value = false;
      callback(
        import.meta.env.VITE_APP_BASE_API +
          "/ekms/images/v1/preview/" +
          res.data.imgId
      );
    })
    .catch(() => {
      loading.value = false;
    });
};

// 变更事件回调
const afterChange = (e) => {
  emits("setHtml", getCherryContent(), getCherryHtml());
};

// 获取渲染后html内容
const getCherryHtml = () => {
  const result = cherrInstance.value.getHtml();
  // console.log(result, "get");
  return result;
};

// 获取markdown内容
const getCherryContent = () => {
  const result = cherrInstance.value.getMarkdown();
  return result;
};

// 设置markdown内容
const setCherryContent = (val) => {
  cherrInstance.value.setMarkdown(val, 1);
};

// 图片加载回调
const beforeImageMounted = (e, src) => {
  return { [e]: src };
};
defineExpose({
  getCherryHtml,
  setCherryContent,
});

Utilice este componente:

 <CherryMD
   ref="MDRef"
   v-model="mdContent"
   :knwlgId="artDetails.pkId"
   @setHtml="getContent"
 />

 const mdContent = ref("");
 //设置默认值
 mdContent.value = res.data.content;
 nextTick(() => {
   proxy.$refs.MDRef.setCherryContent(res.data.content || "");
 });

// 获取文章结构信息
const getContent = (content, html) => {
  mdHtml.value = html;
  mdContent.value = content;
  changeArticle();
};