mavonEditor | 基于Vue的markdown 编辑器插件

mavonEditor是一款基于Vue的markdown编辑器,提供PC和移动设备的展示示例,支持安装、引入及自定义配置。内置API包括props和events,依赖markdown-it等库。后续将优化撤销、保存等功能,提升移动端适配性。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

mavonEditor

github项目地址
演示网址

基于Vue的markdown编辑器

example (图片展示)

PC

PC
PC

移动

移动
   
移动

Use Setup (开始)

Install mavon-editor (安装)

$ npm install mavon-editor --save

package.json

"mavon-editor": "^1.3.3"

Use (如何引入)

    // 方法一
    // import with ES6
    import Vue from 
### 如何在 Vue 项目中安装和配置 mavon-editor #### 安装依赖包 为了能够在 Vue 项目中使用 `mavon-editor` 编辑器组件,需先通过 npm 或 yarn 来安装该库。 ```bash npm install mavon-editor --save ``` 此命令会下载并保存 `mavon-editor` 及其必要的依赖到项目的 node_modules 文件夹下[^2]。 #### 引入样式文件 除了引入 JavaScript 组件外,还需要导入默认的 CSS 样式来确保编辑器外观正常显示: ```javascript import 'mavon-editor/dist/css/index.css' ``` 这段代码通常放置于应用程序入口处(如 main.js),以便在整个应用范围内生效[^3]。 #### 注册组件 有两种方式可以注册 `mavon-editor` 组件——局部注册或全局注册。对于大多数情况来说,推荐采用按需加载的方式即局部注册;而对于频繁使用的场景,则可以选择一次性完成全局注册以简化后续操作流程。 ##### 局部注册实例 如果仅希望在一个特定页面上使用这个编辑器的话,在对应的.vue单文件组件内部定义即可: ```html <template> <div id="editor"> <!-- 使用 mavon-editor --> <mavon-editor v-model="content"/> </div> </template> <script> // 导入 mavon-editor 的 js 和 css 部分 import { mavonEditor } from "mavon-editor"; export default { components: { mavonEditor, }, }; </script> ``` 上述例子展示了如何将 `mavon-editor` 添加至模板内,并绑定了一个名为 content 的变量用于存储输入的内容数据[^1]。 ##### 全局注册方法 当多个视图都需要访问同一个编辑器时,可以在 main.js 中进行一次性的全局声明: ```javascript import Vue from 'vue'; import App from './App.vue'; // 导入 mavon-editor 并将其作为全局组件注册 import mavonEditor from 'mavon-editor'; Vue.use(mavonEditor); new Vue({ render: h => h(App), }).$mount('#app'); ``` 这样做的好处是可以减少重复劳动,使得其他地方可以直接调用而无需再次单独引入。 #### 获取 Markdown 和 HTML 内容 有时开发者可能想要读取用户编写的原始 markdown 文本或者是渲染后的 html 结果。这时可以通过监听 change 事件或者直接访问 data model 实现目的。 ```html <mavon-editor @change="handleChange" /> ... methods:{ handleChange(value,render){ console.log('markdown source:', value); console.log('html result:', render); } } ``` 以上就是关于如何在 Vue 应用程序里集成 `mavon-editor` 的简单介绍。
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值