vue3引入md格式文本输入框

最新推荐文章于 2025-04-26 11:30:00 发布

GH-ShanBao

最新推荐文章于 2025-04-26 11:30:00 发布

阅读量1.3k

点赞数 23

文章标签：前端

本文链接：https://blog.youkuaiyun.com/m0_57089822/article/details/139991514

版权

vue3引入md格式文本输入框

😲 md-editor-v3

Markdown Editor for Vue3，用jsx和typescript开发，支持不同的主题、更漂亮的内容

🤖 Base

粗体, 下划线, 斜体, 直通线, 上标26, 下标1, 链接, link

引用：我有一个梦想

序号（实例翻译非作者语言）

xxxxxxxxxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

星期五
星期六
星期日

🤗 setup导入

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

<script setup>
import { ref } from 'vue';
import { MdEditor } from 'md-editor-v3';
import 'md-editor-v3/lib/style.css';

const text = ref('Hello Editor!');
</script>

🖨 Text

《老人与海》重振了海明威的文学声誉，并促使人们重新审视他的整个作品。

📈 Table

nickname	from
zhijian	ChongQing, China

📏 Formula

Inline: $x+y^{2x}$

$$ \sqrt[3]{x} $$

🧬 Diagram

flowchart TD
  Start --> Stop

🪄 Alert

!!! note Supported Types

note、abstract、info、tip、success、question、warning、failure、danger、bug、example、quote、hint、caution、error、attention

!!!

☘️ em…

引入步骤

npm安装用法

npm install md-editor-v3 --save

.vue模板基础使用（我目前使用的是该方法主要是这个遇到了问题）

<template>
  <md-editor v-model="text" />
 </template>
 
 <script lang="ts">
 import { defineComponent } from 'vue';
 import MdEditor from 'md-editor-v3';
 import 'md-editor-v3/lib/style.css';
 
 export default defineComponent({
   components: { MdEditor },
   data() {
     return { text: '' };
   }
 });
 </script>

这里遇到一个



ERROR  Failed to compile with 1 error                                                                                                                                                16:48:14

error  in ./node_modules/md-editor-v3/node_modules/lru-cache/dist/mjs/index.js

Syntax Error: D:\Codes\Java\big-event\web\big-event\node_modules\md-editor-v3\node_modules\lru-cache\dist\mjs\index.js: Class private methods are not enabled. Please add `@babel/plugin-transform-private-methods` to your configuration.
 354 |         return this.#keyMap.has(key) ? Infinity : 0;
 355 |     }
> 356 |     #initializeTTLTracking() {
     |     ^
 357 |         const ttls = new ZeroArray(this.#max);
 358 |         const starts = new ZeroArray(this.#max);
 359 |         this.#ttls = ttls;
   at transformFile.next (<anonymous>)
   at run.next (<anonymous>)
   at transform.next (<anonymous>)


ERROR in ./node_modules/md-editor-v3/node_modules/lru-cache/dist/mjs/index.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: D:\Codes\Java\big-event\web\big-event\node_modules\md-editor-v3\node_modules\lru-cache\dist\mjs\index.js: Class private methods are not enabled. Please add `@babel/plugin-transform-private-methods` to your configuration.
 354 |         return this.#keyMap.has(key) ? Infinity : 0;
 355 |     }
> 356 |     #initializeTTLTracking() {
     |     ^
 357 |         const ttls = new ZeroArray(this.#max);
 358 |         const starts = new ZeroArray(this.#max);
 359 |         this.#ttls = ttls;
   at File.buildCodeFrameError (D:\Codes\Java\big-event\web\big-event\node_modules\@babel\core\lib\transformation\file\file.js:205:12)
   at NodePath.buildCodeFrameError (D:\Codes\Java\big-event\web\big-event\node_modules\@babel\traverse\lib\path\index.js:98:21)
   at shouldTransform (D:\Codes\Java\big-event\web\big-event\node_modules\@babel\helper-create-class-features-plugin\lib\features.js:108:29)
   at PluginPass.Class (D:\Codes\Java\big-event\web\big-event\node_modules\@babel\helper-create-class-features-plugin\lib\index.js:101:44)
   at newFn (D:\Codes\Java\big-event\web\big-event\node_modules\@babel\traverse\lib\visitors.js:160:14)
   at NodePath._call (D:\Codes\Java\big-event\web\big-event\node_modules\@babel\traverse\lib\path\context.js:46:20)
   at NodePath.call (D:\Codes\Java\big-event\web\big-event\node_modules\@babel\traverse\lib\path\context.js:36:17)
   at NodePath.visit (D:\Codes\Java\big-event\web\big-event\node_modules\@babel\traverse\lib\path\context.js:82:31)
   at TraversalContext.visitQueue (D:\Codes\Java\big-event\web\big-event\node_modules\@babel\traverse\lib\context.js:86:16)
   at TraversalContext.visitSingle (D:\Codes\Java\big-event\web\big-event\node_modules\@babel\traverse\lib\context.js:65:19)
   at TraversalContext.visit (D:\Codes\Java\big-event\web\big-event\node_modules\@babel\traverse\lib\context.js:109:19)
   at traverseNode (D:\Codes\Java\big-event\web\big-event\node_modules\@babel\traverse\lib\traverse-node.js:22:17)
   at NodePath.visit (D:\Codes\Java\big-event\web\big-event\node_modules\@babel\traverse\lib\path\context.js:88:52)
   at TraversalContext.visitQueue (D:\Codes\Java\big-event\web\big-event\node_modules\@babel\traverse\lib\context.js:86:16)
   at TraversalContext.visitMultiple (D:\Codes\Java\big-event\web\big-event\node_modules\@babel\traverse\lib\context.js:61:17)
   at TraversalContext.visit (D:\Codes\Java\big-event\web\big-event\node_modules\@babel\traverse\lib\context.js:107:19)
   at traverseNode (D:\Codes\Java\big-event\web\big-event\node_modules\@babel\traverse\lib\traverse-node.js:22:17)
   at NodePath.visit (D:\Codes\Java\big-event\web\big-event\node_modules\@babel\traverse\lib\path\context.js:88:52)
   at TraversalContext.visitQueue (D:\Codes\Java\big-event\web\big-event\node_modules\@babel\traverse\lib\context.js:86:16)
   at TraversalContext.visitSingle (D:\Codes\Java\big-event\web\big-event\node_modules\@babel\traverse\lib\context.js:65:19)
   at TraversalContext.visit (D:\Codes\Java\big-event\web\big-event\node_modules\@babel\traverse\lib\context.js:109:19)
   at traverseNode (D:\Codes\Java\big-event\web\big-event\node_modules\@babel\traverse\lib\traverse-node.js:22:17)
   at traverse (D:\Codes\Java\big-event\web\big-event\node_modules\@babel\traverse\lib\index.js:52:34)
   at transformFile (D:\Codes\Java\big-event\web\big-event\node_modules\@babel\core\lib\transformation\index.js:82:31)
   at transformFile.next (<anonymous>)
   at run (D:\Codes\Java\big-event\web\big-event\node_modules\@babel\core\lib\transformation\index.js:24:12)
   at run.next (<anonymous>)
   at transform (D:\Codes\Java\big-event\web\big-event\node_modules\@babel\core\lib\transform.js:22:33)
   at transform.next (<anonymous>)
   at step (D:\Codes\Java\big-event\web\big-event\node_modules\gensync\index.js:261:32)
   at D:\Codes\Java\big-event\web\big-event\node_modules\gensync\index.js:273:13
   at async.call.result.err.err (D:\Codes\Java\big-event\web\big-event\node_modules\gensync\index.js:223:11)
@ ./node_modules/md-editor-v3/lib/es/index.mjs 29:0-19
@ ./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[0]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/views/article/ArticleManage.vue?vue&type=script&setup=true&lang=js 5:0-40 122:15-23
@ ./src/views/article/ArticleManage.vue?vue&type=script&setup=true&lang=js 1:0-222 1:0-222 1:223-434 1:223-434
@ ./src/views/article/ArticleManage.vue 2:0-75 3:0-70 3:0-70 8:49-55
@ ./src/router/index.js 5:0-62 24:15-28
@ ./src/main.js 5:0-30 17:8-14

webpack compiled with 1 error

报错详情就是这样的

主要问题：

Syntax Error: D:\Codes\Java\big-event\web\big-event\node_modules\md-editor-v3\node_modules\lru-cache\dist\mjs\index.js: Class private methods are not enabled. Please add `@babel/plugin-transform-private-methods` to your configuration.

语法错误：D：CodesJavabig-eventwebbig-eventnode_modulesmd-editor-v3node_moduleslru-cachedistmjsindex.js：未启用类私有方法。请将“@babel/plugin-transform-private-methods”添加到您的配置中。

解决方法：

安装@babel/plugin-transform-private-methods

@babel/plugin-transform-private-methods 是一个 Babel 插件，用于转换 JavaScript 代码中的私有方法（private methods）为公共方法（public methods）的包装。

在 JavaScript 中，私有方法是类内部定义的方法，只能被类本身使用，不能被外部访问。这种特性在很多情况下可以提供更好的封装和安全性。然而，在某些情况下，你可能需要将这些私有方法转换为公共方法，以便在类的外部进行访问和调用。

@babel/plugin-transform-private-methods 插件的作用是在代码转换过程中，将私有方法转换为公共方法的包装。它通过生成一个新的方法来包装私有方法，并将私有方法的访问限制在类的内部。这样，你可以在类的外部调用公共方法来实现与私有方法相同的功能。

npm

npm install @babel/plugin-transform-private-methods --save-dev

yarn

yarn add @babel/plugin-transform-private-methods --dev

pnpm

pnpm add @babel/plugin-transform-private-methods --save-dev```

**在babel.config.js/babel.config.json 配置：**
>babel.config.json
```json
{
  "plugins": ["@babel/plugin-transform-private-methods"]
}```

>babel.config.js
```js
plugins: ["@babel/plugin-transform-private-methods"]