le-markdown-编辑器-一个强大的Vuemarkdown编辑器组件
le-markdown-editor是一个强大的markdown编辑器,它不仅支持常用的markdown语法,还增加了上传图片和换肤等实用功能,上传图片的功能可以自定义,更换也很方便。非常适合个人博客编辑。这里只介绍一些简单的使用步骤。更多内容可以访问码云或github查看:码云地址:点击访问GitHub地址:点击访问预览图组件。使用CDN有些人可能不喜欢用webpack或者只是写个小demo,如果不需要webpack,可以点击访问这个文件,在webpack搭建的工程中参考这个文件下载插件$npmile-markdown-editor--saveindex.js或importVuefrom'inmain.jsvue'importleMarkdownEditorfrom'le-markdown-editor'//...Vue.use(leMarkdownEditor)//....newVue({components:{App},router,store,template:''}).$mount('#app')index.html
我如何理解插件语法?打开项目根目录下的test.txt,复制到编辑区,对比右边的预览文字就知道如何使用API??props(自定义配置)属性描述类型默认值值可以使用v-model双向绑定数据Sting''theme编辑器主题Sting'base16-dark'font设置编辑区和显示区的文字大小Object{editor:16,preview:16}shadow编辑器是否有阴影效果BooleantruedragUpload是否允许拖拽上传图片,需要结合图片上传配置使用BooleantrueshowToolbar是否显示工具栏Booleantruetoolbar菜单单栏和快捷键的功能见下文MenuBarConfigurationConfiguration//默认菜单栏配置toolbar:{undo:true,//undoredo:true,//redobold:true,//bolddel:true,//删除线下划线:true,//下划线斜体:true,//斜体引用:true,//引用书签:true,//标记上标:true,//上标下标:true,//下标h1:true,//Heading1h2:true,//Heading2h3:true,//Heading3h4:true,//Heading4h5:true,//Heading5h6:true,//Heading6alignLeft:true,//leftalignCenter:true,//居中alignRight:true,//右ol:true,//有序列表ul:true,//无序列表hr:true,//分隔符link:true,//链接inlineCode:true,//内联代码code:true,//代码块image:true,//图片table:true,//tableskin:true,//skinfullScreenEdit:true,//全屏编辑fullScreen:true,//全屏预览preview:true,//实时预览save:true,//保存html文本preview}//使用(比如按照下图的配置,只会显示两个图标)
<script>exportdefault{name:'app',data(){return{toolbar:{undo:true,redo:true}}}}events(事件)事件名称描述返回值保存保存预览文本预览区html文本uploadImg上传图片组件对象,文件,文件名。本地图片上传见下方图片上传配置。因为没有云存储账号,所以暂时只支持拖拽或者粘贴剪贴板图片。Windows粘贴本地图片时,需要先预览,不需要截图)上传到Github仓库和自己的服务器。虽然大家都在说Github访问有点慢,但是我这几天测试了一下。虽然上传速度不快,但是访问的时候感觉效果还可以,毕竟是免费的。适合没有图床和服务器的用户。如果介意,可以上传到自己的服务器或者使用扩展的方式上传到自己的云存储。注意:mac系统下粘贴本地图片会在编辑区留下原文件名。Windows上没有问题,但不影响使用。虽然可以直接通过编辑器去掉文字,但是总觉得别扭,所以没有处理。功能有待优化。如果您介意,请使用拖拽和上传功能。图片上传demo:详情请点击这里-->图片上传配置详解快捷键注意:除了撤销和重做两个功能外,其他快捷键只有在菜单设置为显示时才有效。快捷键功能Ctrl+Z撤消Ctrl+Y重做Ctrl+B粗体Ctrl+D删除线Ctrl+U下划线Ctrl+I斜体Ctrl+Q引用Ctrl+M标记Ctrl+L链接Ctrl+1(F1)标题1Ctrl+2(F2)标题2Ctrl+3(F3)标题3Ctrl+4(F4)标题4Ctrl+5(F5)标题5Ctrl+6(F6)标题6Ctrl+Alt+S上角标Ctrl+Alt+B下角标Ctrl+Alt+L左Ctrl+Alt+C居中Ctrl+Alt+R右Ctrl+Alt+O有序列表Ctrl+Alt+U无序列表Ctrl+Alt+H分割线Ctrl+Alt+I内联代码Ctrl+Alt+D代码块Ctrl+Alt+P切换实时预览Ctrl+Alt+F切换全窗口预览Ctrl+S保存html文本