Git@OSC 推荐 | 基于 Mdjs 的 Markdown 编辑器_html/css_WEB-ITnose
程序员文章站
2022-05-21 10:00:48
...
Mdjs.editor
一款基于 Mdjs 写的在线Markdown编辑器
2016年01月11日
编辑器版本 0.1 Dev Mdjs 版本: ( 0.4 Dev )
演示页面: http://hangxingliu.github.io/mdjs.editor
欢迎大家参考学习,也望大家能够对本解析器中的不足或错误进行指正批评.
开发者: 刘越(HangxingLiu) @航行刘
[TOC]
开源声明
Mdjs遵循Apache Licence 2.0
允许使用在商业应用中,允许通过修改来满足实际需求(但需要在被修改的文件中说明).
页面截图
代码文件结构
- src 编辑器源代码( 建议用于研究学习 )
- dist 压缩优化过的编辑器源代码
src下文件结构
- lib 编辑器所以来的脚本库
- css 编辑器所依赖的样式表
-
img 编辑器内所需要的图片
-
三个页面
- index.html 编辑器主页面
- settings.html 编辑器设置子页面
- settings.css
- settings.js
- help.html 编辑器帮助与关于子页面
-
Toast消息显示组件(类似Android的显示一会儿的Toast组件)
- toast.css
- toast.js
-
Dialog对话框组件
- dialog.css
- dialog.js
-
本地文件读写库(用于编辑器读写用户本地的Markdown文件)
- localio.js
-
LocalStorage内容配置读写脚本
- h5storage.js
-
将Markdown生成的HTML转换为完整的HTML的导出脚本
- export.js
-
编辑器输入框的历史记录功能脚本(撤销,重做)
- history.jq.js
-
编辑器相关组件
- editor.css
- editor.js
-
Markdown解析成的HTML的样式表
- mdcss.css
dist下文件结构变动
- lib下面与编辑器页面相关的脚本(除了 jquery.min.js 外)均合并到 editor.all.js
- lib下的 h5storage.js 在合并到了 editor.all.js 内仍保留一份以便于 settings.html 页面引用
- css下的编辑器相关的样式表均合并到 editor.all.css
扩展开发可能涉及到的变量和函数
- window.nowFile 目前正在编辑的Markdown内容的HTML5原生File对象
- window.shortcutMap 可以通过 shortcutMap[keyCode]=CallbackFunction 给编辑器绑上**Ctrl+_x_**类型的快捷键
- onMenu_ new / open / save / export / help / settings 分别对应了菜单栏的六个按钮的响应事件
- preview() 这个方法可以马上预览编辑器输入框内的Markdown内容,并且将内容保存到LocalStorage如果没有禁用的话
- fileStatusChange(fileOrFileName) 这个方法用于通知编辑器,当前正在编辑的Markdown文件有变化了,编辑器会同步文件名和 nowFile
- showIframeDlg(title,url) 显示一个大对话框,内置网页为**url**,标题为**title**
- LIOEvent.onDone = onReadMdDone ; LIOEvent.onError = onReadMdError ; LIOEvent.onAbort = onReadMdAbort ;这三个接口和实现的方法分别为当加载本地Markdown文件成功,失败,被中断.
- onDone(markdownContent)
- onError(errInfo)
- onAbort()
- 一些编辑器元素的JQuery对象
- filedlg : 用于选择本地文件的 input[type=file]
- editorView : 包裹编辑器输入框和预览区的 div
- editorView.undo() : 撤销
- editorView.redo() : 重做
- inputView : 编辑器输入框 textarea
- outputView : 编辑器预览区域 div
- 显示Toast消息:
- Toast.text(text,[showTime]) 普通消息
- Toast.warn(warnInfo,[showTime]) 警告消息
- Toast.err(errInfo,[showTime]) 错误消息
- Dialog对话框,HTML代码如下**示例代码_Dialog**
- 读写存在LocalStorage内的内容标题和配置可使用 H5S 对象
- H5S.content
- H5S.title
- H5S.settings
- H5S.getValue(settingKey)
示例代码:
示例代码_Dialog
相关文章
相关视频
上一篇: MongoDB学习(一)安装配置