git如何编辑html,Git@OSC推荐|基于Mdjs的Markdown编辑器_html/css_WEBITnose

Mdjs.editor

一款基于 Mdjs 写的在线Markdown编辑器

2016年01月11日

编辑器版本 0.1 Dev Mdjs 版本: ( 0.4 Dev )

演示页面: http://hangxingliu.github.io/mdjs.editor

欢迎大家参考学习,也望大家能够对本解析器中的不足或错误进行指正批评.

开发者: 刘越(HangxingLiu) &＃64;航行刘

[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]&＃61;CallbackFunction 给编辑器绑上**Ctrl&＃43;_x_**类型的快捷键

onMenu_ new / open / save / export / help / settings 分别对应了菜单栏的六个按钮的响应事件

preview() 这个方法可以马上预览编辑器输入框内的Markdown内容,并且将内容保存到LocalStorage如果没有禁用的话

fileStatusChange(fileOrFileName) 这个方法用于通知编辑器,当前正在编辑的Markdown文件有变化了,编辑器会同步文件名和 nowFile

showIframeDlg(title,url) 显示一个大对话框,内置网页为**url**,标题为**title**

LIOEvent.onDone &＃61; onReadMdDone ; LIOEvent.onError &＃61; onReadMdError ; LIOEvent.onAbort &＃61; onReadMdAbort ;这三个接口和实现的方法分别为当加载本地Markdown文件成功,失败,被中断. onDone(markdownContent)

onError(errInfo)

onAbort()

一些编辑器元素的JQuery对象 filedlg : 用于选择本地文件的 input[type&＃61;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