欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

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下文件结构变动

  1. lib下面与编辑器页面相关的脚本(除了 jquery.min.js 外)均合并到 editor.all.js
  2. lib下的 h5storage.js 在合并到了 editor.all.js 内仍保留一份以便于 settings.html 页面引用
  3. css下的编辑器相关的样式表均合并到 editor.all.css

扩展开发可能涉及到的变量和函数

  1. window.nowFile 目前正在编辑的Markdown内容的HTML5原生File对象
  2. window.shortcutMap 可以通过 shortcutMap[keyCode]=CallbackFunction 给编辑器绑上**Ctrl+_x_**类型的快捷键
  3. onMenu_ new / open / save / export / help / settings 分别对应了菜单栏的六个按钮的响应事件
  4. preview() 这个方法可以马上预览编辑器输入框内的Markdown内容,并且将内容保存到LocalStorage如果没有禁用的话
  5. fileStatusChange(fileOrFileName) 这个方法用于通知编辑器,当前正在编辑的Markdown文件有变化了,编辑器会同步文件名和 nowFile
  6. showIframeDlg(title,url) 显示一个大对话框,内置网页为**url**,标题为**title**
  7. LIOEvent.onDone = onReadMdDone ; LIOEvent.onError = onReadMdError ; LIOEvent.onAbort = onReadMdAbort ;这三个接口和实现的方法分别为当加载本地Markdown文件成功,失败,被中断.
    1. onDone(markdownContent)
    2. onError(errInfo)
    3. onAbort()
  8. 一些编辑器元素的JQuery对象
    1. filedlg : 用于选择本地文件的 input[type=file]
    2. editorView : 包裹编辑器输入框和预览区的 div
      1. editorView.undo() : 撤销
      2. editorView.redo() : 重做
    3. inputView : 编辑器输入框 textarea
    4. outputView : 编辑器预览区域 div
  9. 显示Toast消息:
    1. Toast.text(text,[showTime]) 普通消息
    2. Toast.warn(warnInfo,[showTime]) 警告消息
    3. Toast.err(errInfo,[showTime]) 错误消息
  10. Dialog对话框,HTML代码如下**示例代码_Dialog**
  11. 读写存在LocalStorage内的内容标题和配置可使用 H5S 对象
    1. H5S.content
    2. H5S.title
    3. H5S.settings
    4. H5S.getValue(settingKey)

示例代码:

示例代码_Dialog

Git@OSC 推荐 | 基于 Mdjs 的 Markdown 编辑器_html/css_WEB-ITnose

声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。

相关文章

相关视频