在线时间:8:00-16:00
迪恩网络APP
随时随地掌握行业动态
扫描二维码
关注迪恩网络微信公众号
开源软件名称:MDEditor开源软件地址:https://gitee.com/mooshroom/MDEditor开源软件介绍:MDEditor--markdown编辑器直接上网址碳素云-markdown编辑器 功能介绍MDEditor是一款前端实现markdown编辑器的模块,目前功能包含:
依赖实现编辑器的全部部分并非我一人之手,使用了很多成熟的框架,编辑器的编译部分也是使用大神写的markdown编译器,我只是做了一个外壳而已,以下是本编辑器所依赖的框架:
因为这个模块原本是在自己团队内部使用,而团队就用这3个框架来进行开发,所以这里也是直接基于这3者开始,图标的部分就不额外给设计师加工作量,所以就直接用的fontAwesome的库,总之都是很偷懒的啦~ 不过我还没写完全部的功能就被推荐了也是很以外(所以才来好好写写文档)。 除此之外,实现编译和代码美化的部分也用了别人的代码: 小生感激不尽! 文件结构文件结构直接使用碳素云前端团队的标准目录结构###1. plugins这个文件用户放置项目所用的各种插件,MDEditor也是一个插件,所以也是放在这个里面,团队使用的时候直接整个文件夹拖过去就好。 attention.js 是罗丹的提示插件,新版本名字已经修改了,我用的是老版本的,所以还是用的这个名字。 markdown.js 是markdown的编译器,prettify.js是代码美化插件。 MDEditor.html是编辑器的结构层,需要引入才能看,使用的时候可以用动态加载的方法也可以直接代码负责粘贴。 MDEditor.js是编辑器的主要文件,其中实现了快捷键,自动高度,跟随滚动,等等的功能。 ###2. src这个文件夹里面放置了静态资源,包括各种框架等等的,其中比较总要的是MDEditor.css这个文件,这个文件就是编辑器的样式表,加入了之后就能看到正确的样子了###3. config.js这个文件用于配置项目相关的配置项,例如API的接口,全局方法等,比较重要的是,要将依赖的地址在这里明确写出来,像这样: require.config({ paths: { MDEditor:"../../plugins/MDEditor", marked:"../../plugins/markdown", prettify:"../../plugins/prettify" }}); 基本地址是从avalon.js所在的地址开始,具体的细节可以看avalon关于加载器的详细介绍。如果你的目录结构和我的不一样,只需要在这里配置好各个依赖的地址,使用就没问题了。###4. include.js这个文件里面是一个avalon的VM,作用是用来控制各个模块在index.html上面的各种引入。我在这里引入了MDEditor.html。###5. index.html启动文件,不用多说,一看就明白。###6. router.jsavalon的路由系统的文件,具体怎么弄的可以看这里。我在这里监听了首页的路由,然后动态加载了MDEditor.js,然后在MDEditor.js里面动态加载了编译器和代码美化插件,所以如果你目录结构和我一样,直接动态加载,或者引入MDEditor.js就可以了。 使用指引如果你只是下下来自己用的话,你需要配置一个本地的服务器,用IIS还是nginx 都可以,然后打开 http://localhost/mdeditor 就可以使用了(localhost是什么我就不多说了)。 要在自己的项目中使用,首先需要引入jquery、avalon、bootstrap、font-awesome,不想引入avalon,bootstrap,font-awesome也是可以的,不过jq必须得有,其他的没有的话,需要修改一下代码,核心的方法不需要修改。 引入结构层和表现层:MDEditor.html和MDEditor.css 然后需要配置编译器和代码美化的地址,这个上面说过了。 使用avalon的AMD加载器加载: require(['MDEditor'], function () { MDEditor.ready()}) 加载成功之后执行MDEditor.ready()这个方法,编辑器就加载好了。 (完 The MIT License (MIT)Copyright (c) 2015 mooshroom See LICENSE for more info. |
请发表评论