vue3使用MarkDown编辑器并预览以及报错解决办法

halo小伙伴们,上一篇小编有写到微信小程序渲染MarkDown,现在小编带来vue3的web项目渲染MarkDown。
这里使用的v-md-editor 是基于 Vue 开发的 markdown 编辑器组件

安装支持vue3的版本:

# 使用 npm
npm i @kangc/v-md-editor@next -S

一、实现MarkDown编辑器

在vue3中注册:

import { createApp } from 'vue';
import VueMarkdownEditor from '@kangc/v-md-editor';
import '@kangc/v-md-editor/lib/style/base-editor.css';
import vuepressTheme from '@kangc/v-md-editor/lib/theme/vuepress.js';
import '@kangc/v-md-editor/lib/theme/style/vuepress.css';

import Prism from 'prismjs';

VueMarkdownEditor.use(vuepressTheme, {
  Prism,
});

const app = createApp(/*...*/);

app.use(VueMarkdownEditor);

使用:

<v-md-editor v-model="text" height="400px"></v-md-editor>

即可实现MarkDown编辑器

二、实现MarkDown渲染

在vue3中引用

import { createApp } from 'vue';
import VMdPreview from '@kangc/v-md-editor/lib/preview';
import '@kangc/v-md-editor/lib/style/preview.css';
import githubTheme from '@kangc/v-md-editor/lib/theme/github.js';
import '@kangc/v-md-editor/lib/theme/style/github.css';

// highlightjs
import hljs from 'highlight.js';

VMdPreview.use(githubTheme, {
  Hljs: hljs,
});

const app = createApp(/*...*/);

app.use(VMdPreview);

或者

在对应的页面上引用


import VMdPreview from '@kangc/v-md-editor/lib/preview';
import '@kangc/v-md-editor/lib/style/preview.css';
import githubTheme from '@kangc/v-md-editor/lib/theme/github.js';
import '@kangc/v-md-editor/lib/theme/style/github.css';

VMdPreview.use(githubTheme, {
	Hljs: hljs,
});

使用:

<v-md-preview :text="text"></v-md-preview>

即可实现MarkDown渲染

防踩坑

在这里小编有遇到一个坑,有可能会报错如下:

TS7016: Could not find a declaration file for module '@kangc/v-md-editor/lib/preview'. 'G:/project/xy-yxf-pc/node_modules/@kangc/v-md-editor/lib/preview.js' implicitly has an 'any' type.   Try `npm i --save-dev @types/kangc__v-md-editor` if it exists or add a new declaration (.d.ts) file containing `declare module '@kangc/v-md-editor/lib/preview';`

TS7016: Could not find a declaration file for module '@kangc/v-md-editor/lib/theme/github.js'. 'G:/project/xy-yxf-pc/node_modules/@kangc/v-md-editor/lib/theme/github.js' implicitly has an 'any' type.   Try `npm i --save-dev @types/kangc__v-md-editor` if it exists or add a new declaration (.d.ts) file containing `declare module '@kangc/v-md-editor/lib/theme/github.js';`

解决方法

  1. 在项目的根目录中创建一个新的==.d.ts文件,例如v-md-editor.d.d.ts==。
  2. 打开v-md-editor.d.ts文件,并添加以下内容:
declare module '@kangc/v-md-editor/lib/preview';
declare module '@kangc/v-md-editor/lib/theme/github.js';

这样就不会报错啦。
好啦,快去试试吧。大家如果还有什么好的解决方法记得和小编分享哦~

### v-md-editor 使用指南 #### 安装 为了安装 `v-md-editor`,可以使用 npm 或 yarn 进行全局或本地项目依赖的安装。推荐的方式如下所示: 对于 npm 用户而言, ```bash npm install v-md-editor --save ``` 而对于 yarn 用户,则应执行, ```bash yarn add v-md-editor ``` 这将确保获取到最新稳定版并将其添加至项目的依赖列表中[^1]。 #### 配置 在 Vue 项目中引入 `v-md-editor` 并进行基本配置的方法相对简单。首先,在 main.js 文件里导入编辑器及相关样式文件;其次,通过 Vue.use() 方法注册组件以便于在整个应用范围内使用编辑器插件。 ```javascript import VMdEditor from &#39;v-md-editor&#39;; import &#39;v-md-editor/lib/style/base.css&#39;; // 如果需要支持代码高亮显示功能, 可继续按需加载 highlightjs 和对应的语言包. import createHighlightJs from &#39;v-md-editor/lib/plugins/highlight-js&#39;; import hljs from &#39;highlight.js&#39;; VMdEditor.use(createHighlightJs(hljs)); Vue.use(VMdEditor); ``` 上述操作完成后即可在任何页面上利用 `<v-md-editor>` 标签创建富文本编辑区域[^2]。 #### 使用方法 当成功集成之后就可以像下面这样轻松地把 markdown 编辑框嵌入网页当中了: ```html <template> <div id="app"> <!-- 创建一个简单的Markdown编辑器 --> <v-md-editor v-model="text"></v-md-editor> <!-- 显示渲染后的HTML内容 --> <div class="preview-content" v-html="compiledMarkdown(text)"> {{ compiledMarkdown(text) }} </div> </div> </template> <script> export default { data () { return { text: &#39;# Hello V-MD-Editor!&#39; } }, methods:{ compiledMarkdown (value) { // 此处可加入转换逻辑,比如使用marked库解析markdown字符串为html } } } </script> ``` 这段模板定义了一个双向绑定的数据属性 `text`, 当用户输入时会自动更新此变量的内容,并且可以通过自定义函数 `compiledMarkdown()` 将其转化为 HTML 版本用于预览目的[^3]。 #### 常见问题解答 有时可能会遇到一些典型的问题,这里列举几个常见的例子及其解决方案: - **Q:** 如何解决中文乱码? - **A:** 确认是否已正确设置了 meta charset 属性以及服务器端返回头中的字符集编码设置。 - **Q:** 插件无法正常工作怎么办? - **A:** 检查浏览器控制台是否有报错信息,确认所有必要的资源都已被正确加载,尝试清除缓存重新部署应用程序。 - **Q:** 怎样实现图片上传功能呢? - **A:** 利用官方提供的事件钩子机制(如 @on-upload-img),结合自己的业务需求开发相应的接口处理程序来完成这项任务。
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值