首页 > 其他分享 >个人网站建站日记-集成Markdown编辑器

个人网站建站日记-集成Markdown编辑器

时间:2024-12-15 13:42:06浏览次数:7  
标签:function Markdown const value label 编辑器 let import 日记

一次偶然的机会,我体验的到了markdown的便捷,于是乎,我就着手给我的网站闲蛋博客社区集成了Markdown,现在可以自由的切换Markdown与富文本编辑的使用了。这里我特此分享记录下安装使用的过程。

一、安装Markdown编辑器

这里我采用的是md-editor-v3编辑器,目前看来还是很好用的,安装方便,使用简单

二 pnpm安装 pnpm install md-editor-v3

注意,直接运行的是安装的最新版的,最新版本的使用的vue3.5以上,如果你低于3.5的版本,代码运行的时候可能会报错,所以安装的是其它的版本

pnpm install md-editor-v3@4.21.1

三、页面基本使用

话不多说,直接看代码

<template>
    <MdEditor :autoFocus="true" v-model="textContent"  :toolbars="toolbars">
    </MdEditor>
</template>
<script lang="ts" setup>
import { ref, watch } from 'vue';
import { MdEditor, DropdownToolbar, ToolbarNames, config } from 'md-editor-v3';
import 'md-editor-v3/lib/style.css';
const { checkImg } = useUpload();
const toolbars: ToolbarNames[] = [
    'bold',
    'underline',
    'italic',
    '-',
    'title',
    'strikeThrough',
    'sub',
    'sup',
    'quote',
    'unorderedList',
    'orderedList',
    'task',
    '-',
    'codeRow',
    'code',
    'link',
    'image',
    'table',
    'mermaid',
    'katex',
    '-',
    'revoke',
    'next',
    '=',
    'pageFullscreen',
    'fullscreen',
    'preview',
    'htmlPreview',
    'catalog',
    'github'
];

</script>

让后运行项目如下图
image

这样就可以了,但是我们看官网,它是可以支持切换主题的,那么怎实现呢。

四、编辑器切换主题

实现它就是去使用它的#defToolbars插槽,可以实现

实现切换预览主题

我这里只是默认使用它里面提供的几个主题,定义预览主题如下:

const previewThemeOptions = [
    {
        value: 'default',
        label: 'default'
    },
    {
        value: 'github',
        label: 'github'
    },
    {
        value: 'vuepress',
        label: 'vuepress'
    },
    {
        value: 'mk-cute',
        label: 'mk-cute'
    },
    {
        value: 'smart-blue',
        label: 'smart-blue'
    },
    {
        value: 'cyanosis',
        label: 'cyanosis'
    }
];

然后插槽里面的代码

<MdEditor :autoFocus="true" v-model="textContent" :previewTheme="previewThemeSelected"
          :toolbars="toolbars">
        <template #defToolbars>
            <DropdownToolbar title="预览主题" :visible="showPreviewTheme" :on-change="appendixPreviewThemeChanged">
                <template #overlay>
                    <el-select v-model="previewThemeSelected" size="small" style="width: 70px"
                        @change="previewThemeChange">
                        <el-option v-for="item in previewThemeOptions" :key="item.value" :label="item.label"
                            :value="item.value" />
                    </el-select>
                </template>
                <template #trigger>
                    <el-icon class="md-editor-icon" :size="18">
                        <Platform />
                    </el-icon>
                </template>
            </DropdownToolbar>
        </template>
    </MdEditor>

同时在toolbars里面要加一个对应的索引位置,代表自己的工具栏
image

然后运行看下代码部分截图

default主题

image

github主题

image

smart-blue主题

image

以此类推,其它的主题我就不演示了

图片上传

图片上传要实现它的 @on-upload-img="onUploadImg"方法,参考代码如下,也可以参考官网的写法,比较简单

function onUploadImg(files, callback) {
    files.forEach((s) => {
        let file = s;
        let formData = new FormData();
        formData.append('file', file);
        uploadFileApi(formData).then((res) => {
            let arr = [];
            arr.push(res.urlPath);
            callback(arr);
        });
    });
}

内容超链接target属性

如果想实现target属性需要安装 markdown-it-link-attributes 插件,让后代码加入如下代码

import LinkAttr from 'markdown-it-link-attributes';
config({
    markdownItPlugins(plugins) {
        return [
            ...plugins,
            {
                type: 'linkAttr',
                plugin: LinkAttr,
                options: {
                    matcher(href: string) {
                        return !href.startsWith('#');
                    },
                    attrs: {
                        target: '_blank'
                    }
                }
            }
        ];
    }
});

应该没有什么还有补充了

标签:function,Markdown,const,value,label,编辑器,let,import,日记
From: https://www.cnblogs.com/MrHanBlog/p/18607910

相关文章

  • Electron + React + Monaco Editor + AI 本地代码编辑器实现分析
    1.项目概述1.1核心技术栈前端框架:React编辑器引擎:MonacoEditor桌面框架:ElectronAI模型:Ollama(本地部署)Qwen(通义千问)1.2主要特性本地化AI编程助手多语言代码编辑实时代码补全智能文档生成2.AI模型集成2.1模型对比特性OllamaQwen部署方式纯本地本地/云端......
  • MarkDown学习
    Markdown学习标题(几个标题前面几个#+空格)三级标题四级标题字体Hello,word!Hello,word!Hello,word!Hello,word!引用跟着狂神说java,走上人生巅峰分割线(注:3个-或者3个*)图片超链接点击跳转到卡迪拉克——名称列表AB表格......
  • Linux ed命令教程:轻松学会使用ed行编辑器(附语法参数安装及实例)
    Linuxed命令linux ed 命令是一个行编辑器。它被认为是标准的Unix文本编辑器,因为它是首个出现在Unix的文本编辑器,并且它曾经无处不在,你在任何一个POSIX系统中都能找到它(通常来说,你现在也可以)。在某种程度上,你可以很容易看出来它是第一个文本编辑器,因为它在许多方面的......
  • MarkItDown: Python一站式文档转Markdown神器
    文章目录 MarkItDown的功能特点环境准备使用virtualenv使用pipenvMarkItDown的使用方法1.基础文件转换2.处理网络资源3.处理流式数据4.命令行使用MarkItDown高级特性1.自定义会话和模型2.自定义转换器异常处理最佳实践使用建议总结在日常开发或数据分析工作中......
  • json转成数组,数组转成json,json编辑器
    module.exports={JSONToPathArr(data){constresArr=[]constpArr=['']constlist=[data]for(leti=0;i<list.length;i++){constjson=list[i]for(letkinjson){const......
  • 《安富莱嵌入式周报》第347期:分立元件自制14bit分辨率DAC,开源电池测试仪,大量位操作技
    周报汇总地址:http://www.armbbs.cn/forum.php?mod=forumdisplay&fid=12&filter=typeid&typeid=104 视频版https://www.bilibili.com/video/BV1SFq9YAE4j/目录:1、分立元件自制14bit分辨率DAC2、开源电池测试仪3、微软为VSCode制作的AIToolkit插件4、Zephyr相关(1)好消......
  • 【日记】衣柜到了!ww(444 字)
    正文终于愿意打墨水了。虽然今天上班还是一整个想死的心情。物理意义上上到有些恶心反胃。所以工作上的事情就不说了,免得倒垃圾,未来也都不想看。写这则日记时嘴里正嚼着大轩轩给的泡泡糖w。以前没吃过大大,不过感觉跟其它泡泡糖没有多大区别。新衣柜到了!好耶!......
  • vue使用百度富文本编辑器
     1、安装 npm addvue-ueditor-wrap  或者  pnpmaddvue-ueditor-wrap 进行安装 2、下载UEditor 官网:ueditor:richtext富文本编辑器-GitCode整理好的:vue-ueditor:百度编辑器JSP版因为官方的我没用来,所以我自己找的另外的包3、把下载好的包放在项目......
  • cf补题日记
    听退役选手建议,补40道C、D题。(又又又开新专题。。。进度:2/100 原题1:Youaregivenastring ss,consistingofdigitsfrom 00 to 99.Inoneoperation,youcanpickanydigitinthisstring,exceptfor 00 ortheleftmostdigit,decreaseitby 11,and......
  • 表情包emoj&MD编辑器的使用
    表情包emoj&MD编辑器的使用使用直接复制粘贴即可......