Vue + editor.Md 双向数据绑定Markdown编辑器（vue-editormd-wrap）
2024-04-29 18:46:56
Vue + editor.Md 双向数据绑定组件（vue-editormd-wrap）
先贴上组件的npm主页和源码，如果有下载了开发过程中build版本的用户，将无法使用，请更新为最新版就可以正常使用了（当前最新版本为0.3.0，修复了组件path配置全局引用的问题）
npm：vue-editormd-wrap地址
GitHub：vue-editormd-wrap
如果觉得有帮助的话辛苦点个Star，感谢，有问题可以提Issue或者文章下留言
A Vue EditorMd Wrap project Power By editor.md
VUE + editor.MD v-model数据双向绑定，多编辑器共存
- 因为editor.md本身不支持Vue，所以封装了此工具上传到npm使用，便于使用，更详细的editor.Md使用方法请参考 editor.md官网
文章目录
- Vue + editor.Md 双向数据绑定组件（vue-editormd-wrap）
- `VUE + editor.MD` v-model数据双向绑定，多编辑器共存
- 安装
- 导入静态资源
- 使用
- 全局组件注册
- vue page使用组件
- 配置说明
- 常用方法
- 特殊说明
- Config 参考
安装
npm i vue-editormd-wrap
导入静态资源
https://github.com/Aubrey-J/vue-editormd-wrap
中static下的editor-md文件夹放到项目中的static下，如静态资源路径不同，请参考下面配置的修改，以保证使用正常
使用
全局组件注册
import vueEditorMdWrap from 'vue-editormd-wrap'// 注册时可以声明全局配置，如图片上传路径，免得后续使用时每个页面引用都需要设置
// VueEditorMdWrap.props.syncRoll.default = false // 非对象类型直接赋值，不用函数
VueEditorMdWrap.props.config.default = () => {return {// 如果静态资源不在/static/editor-md下，必须使用path配置覆盖默认配置，配置为：静态资源路径/lib/，如：/static/-md/lib/path: '', imageUpload: true,imageFormats: ['jpg', 'jpeg', 'gif', 'png', 'bmp', 'webp'],imageUploadURL: './upload',crossDomainUpload: false// uploadCallbackURL: ''}
}Vue.component('editorMdWrap', VueEditorMdWrap)
vue page使用组件
<editorMdWrap></editorMdWrap>
配置说明
| 属性 | 说明 | 默认 |
|---|---|---|
| editorId | 编辑器标签ID | ‘mdEditor_’ + 8位随机字符 |
| v-model | 编辑器内容（Markdown格式）双向绑定 | |
| config | 编辑器配置 | 见下文 |
| syncRoll |
是否同步滚动 可选：true、false、“single” => editor area sync |
true |
| watch | 是否实时预览 | true |
| onlyRead | 编辑窗口是否只读 | false |
| themeConfig |
主题 格式：{ theme: “default”, editorTheme: ‘night’, previewTheme: “default” } theme、previewTheme可选：default、dark editorTheme可选：default\ambiance\ambiance-mobile\eclipse\elegant\erlang-dark……更多请参考 http://editor.md.ipandao.com/examples/themes.html |
default |
| previewForHtml |
非编辑状态 HTML格式预览 格式：{ showContext: true, showToc: true, showExtendToc: true } 使用时会覆盖其他配置，仅为浏览状态 |
| 事件 | 说明 | 参数 |
|---|---|---|
| ready | 编辑器实例完成后回调，绑定一个方法，回调参数为编辑器实例 | editor |
常用方法
更多方法及说明，请参考官网 http://editor.md.ipandao.com/examples/index.html
// 更新配置的值
editor.config("syncScrolling", true);
// 通过实例获取当前编辑器的值
editor.getMarkdown(); // 获取 Markdown 源码
editor.getHTML(); // 获取 Textarea 保存的 HTML 源码
editor.getPreviewedHTML(); // 获取预览窗口里的 HTML，在开启 watch 且没有开启 saveHTMLToTextarea 时使用
特殊说明
1、如果静态资源不在/static/editor-md下，必须使用path配置覆盖默认配置，配置为：静态资源路径/lib/，如：/static/editor-md/lib/
2、图片上传配置，使用的话需要覆盖配置
// 可以再注册全局组件时，声明全局配置，见上面使用说明
{imageUpload: true, // 是否支持上传图片imageFormats: ['jpg', 'jpeg', 'gif', 'png', 'bmp', 'webp'], // 支持类型imageUploadURL: './upload', // 上传接口地址crossDomainUpload: true, // 是否跨域uploadCallbackURL: '' // 跨域的回调地址
}// 上传接口响应的消息结构要求如下，编辑器会自动接收响应的消息
{success : 0 | 1, // 0 表示上传失败，1 表示上传成功message : "提示的信息，上传成功或上传失败及错误信息等。",url : "图片地址" // 上传成功时才返回
}
Config 参考
{mode: 'markdown', // gfm or markdownname: '', // Form element namevalue: '', // value for CodeMirror, if mode not gfm/markdowntheme: '', // Editor.md self themes, before v1.5.0 is CodeMirror theme, default emptyeditorTheme: 'default', // Editor area, this is CodeMirror theme at v1.5.0previewTheme: '', // Preview area theme, default emptymarkdown: '', // Markdown source codeappendMarkdown: '', // if in init textarea value not empty, append markdown to textareawidth: '100%',height: '640px',path: '/static/editor-md/lib/', // Dependents module file directorypluginPath: '', // If this empty, default use settings.path + "../plugins/"delay: 300, // Delay parse markdown to html, Uint : msautoLoadModules: true, // Automatic load dependent module fileswatch: true,placeholder: 'Enjoy Markdown! coding now...',gotoLine: true,codeFold: false,autoHeight: false,autoFocus: true,autoCloseTags: true,searchReplace: true,syncScrolling: true, // true | false | "single", default truereadOnly: false,tabSize: 4,indentUnit: 4,lineNumbers: true,lineWrapping: true,autoCloseBrackets: true,showTrailingSpace: true,matchBrackets: true,indentWithTabs: true,styleSelectedText: true,matchWordHighlight: true, // options: true, false, "onselected"styleActiveLine: true, // Highlight the current linedialogLockScreen: true,dialogShowMask: true,dialogDraggable: true,dialogMaskBgColor: '#fff',dialogMaskOpacity: 0.1,fontSize: '13px',saveHTMLToTextarea: false,disabledKeyMaps: [],imageUpload: true,imageFormats: ['jpg', 'jpeg', 'gif', 'png', 'bmp', 'webp'],imageUploadURL: '',crossDomainUpload: true,uploadCallbackURL: '',toc: true, // Table of contentstocm: true, // Using [TOCM], auto create ToC dropdown menutocTitle: '', // for ToC dropdown menu btntocDropdown: false,tocContainer: '',tocStartLevel: 1, // Said from H1 to create ToChtmlDecode: true, // Open the HTML tag identificationpageBreak: true, // Enable parse page break [========]atLink: true, // for @linkemailLink: true, // for email address auto linktaskList: true, // Enable Github Flavored Markdown task listsemoji: true, // :emoji: , Support Github emoji, Twitter Emoji (Twemoji);// Support FontAwesome icon emoji :fa-xxx: > Using fontAwesome icon web fonts;// Support Editor.md logo icon emoji :editormd-logo: :editormd-logo-1x: > 1~8x;tex: true, // TeX(LaTeX), based on KaTeXflowChart: true, // flowChart.js only support IE9+sequenceDiagram: true, // sequenceDiagram.js only support IE9+previewCodeHighlight: true,toolbar: true, // show/hide toolbartoolbarAutoFixed: true, // on window scroll auto fixed positiontoolbarIcons: 'full'
}
Vue + editor.Md 双向数据绑定Markdown编辑器（vue-editormd-wrap）相关推荐
- 关于datetimepicker和vue v-model指令双向数据绑定失败的问题
关于datetimepicker和vue v-model指令双向数据绑定失败的问题 1,v-model监听用户输入事件以更新数据,并特别处理一些极端的例子.这是v-model指令的解释. 2,解决方案 ...
- vue中实现双向数据绑定原理,使用了Object.defineproperty()方法,方法简单
在vue中双向数据绑定原理,我们一般都是用v-model来实现的 ,但一般在面试话会问到其实现的原理, 方法比较简单,就是利用了es5中的一个方法.Object.defineproperty(),它有 ...
- Vue笔记_01双向数据绑定原理
目录 [1]什么叫双向数据绑定? [2]双向绑定原理 vue2.x实现双向绑定 Object.defineProperty对象(es6新增) 语法 举例说明 踩坑 - 给某属性进行双向绑定 踩坑 - ...
- vue的v-model双向数据绑定原理
双向数据绑定(v-model) v-model就是vue的双向绑定指令,能将页面上空间输入的值同步更新到相关绑定的属性,也会在更新data绑定属性的时候,更新页面上输入控件的值 v-model的原理: ...
- JQuery 类似Vue.js的双向数据绑定器。
类似Vue.js双向数据绑定器.依赖于JQuery. 实时更新数据,兼容IE9以上浏览器. IE8则是失去焦点更新数据. ;(function($) {BindSysnc.pt = BindSysnc ...
- vue 自定义组件双向数据绑定
文章目录 序 属性&事件传值双向绑定 v-model组件双向绑定 .sync修饰符双向绑定 总结 !!!这边文章记录的是 vue2 的概念,vue3 对双向绑定进行了改动,不要把一下代码放到 ...
- 双向数据绑定原理（Vue）
双向绑定的底层原理就是应用了发布订阅者模式结合数据劫持,通过Object.defineProperty()方法来劫持各个属性(需要数据绑定的属性,vue 双花括号里面的值就是需要双向数据绑定的属性,如 ...
- html导入.md文件并渲染,vue 导入.md文件（markdown转HTML）
前言 刚接到这个需求的时候,觉得很简单(的确很简单)但是这玩意的坑真的也让人无奈. 网上找了很多的资料,都没有写出痛点(这就很难过了).通过实践并且在我们项目中平稳运行,想分享给后面的人 我的博客上也 ...
- vue双向数据绑定没有生效----vue强制更新dom结构
vue中使用v-for渲染的页面无法通过v-if或v-show动态隐藏 当你的数剧层次太多,数据是变化了的,但是dom没有更新,没有自动双向数据驱动 这时候可以手动强制刷新 this.$forceUp ...
最新文章
- 敏捷团队中的QA由来
- git configuration
- Redhat下XFS的安装
- [NOI2011]兔兔与蛋蛋游戏 二分图博弈
- 手把手引进门之 ASP.NET Core Entity Framework Core（官方教程翻译版 版本3.2.5）
- MFC中为菜单命令添加快捷键
- python数据结构的列表_Python自带数据结构 列表(list)
- 网易云音乐下线所有明星艺人榜单，对数字专辑及单曲限购
- dojo.declare
- 必须安装三星系列android系统智能手机usb驱动程序,三星N9109W Android 5.0 (GALAXY Note 4 电信4G)usb驱动下载安装教程...
- liunx破解root密码精简版
- Oracle执行计划Explain Plan 如何使用
- 二级展开式斜齿圆柱齿轮减速器
- 20世纪50年代到60年代 电子计算机,计算机基础知识习题标准答案
- 专题：手把手学习硬件基础------8、驱动电路
- cvc 降噪_耳机降噪技术-ANC、ENC、DSP、CVC
- 排队时延(Queuing delay)
- php之cURL详细说明
- 微信 for BlackBerry
- 如何提高你的记忆力之二