Mdjs_html/css_WEB-ITnose に基づく Git@OSC の推奨事項

Mdjs.editor

Mdjs に基づくオンライン Markdown エディター

2016 年 1 月 11 日

エディター バージョン 0.1 Dev Mdjs バージョン: ( 0.4 Dev )

デモ ページ: http://hangxingliu.github.io/mdjs.editor

皆さん、学習の参考にしてください。皆さんがこのパーサーの欠陥やエラーを修正し、批判していただければ幸いです。

開発者: Liu Yue (HangxingLiu) @行流

[TOC ]

オープンソース声明

Mdjs は Apache License 2.0 に準拠しています

商用アプリケーションでの使用が許可されており、実際のニーズを満たすために変更することが許可されています (ただし、ファイルの説明で変更)。

ページのスクリーンショット

コード ファイル構造

• src エディターのソース コード (調査および研究に推奨) )
• dist 圧縮され最適化されたエディターのソース コード

src 下のファイル構造

• エディターからの lib スクリプト ライブラリ
• CSS エディターが依存するスタイルシート

• エディターに必要な img 画像

• 3 ページ

  • インデックス.html エディターのメイン ページ
  • settings.html エディターの設定サブページ
    • settings.css
    • settings.js
  • ヘルプ.html エディターのヘルプとバージョン情報サブページ

• トースト メッセージ表示コンポーネント (しばらくの間表示される Android のトースト コンポーネントに似ています)

  • past.css
  • past.js

• ダイアログ ダイアログ コンポーネント

  • Dialog.css
  • Dialog.js

• ローカル ファイルの読み書きライブラリ (エディターがユーザーのローカル Markdown ファイルを読み書きするために使用)

  • localio.js

• LocalStorage コンテンツ構成の読み取りおよび書き込みスクリプト

  • h5storage.js

• 変換用の Markdown エクスポート スクリプトの生成HTMLを完成させるHTML

  • export.js

• エディタ入力ボックスの履歴機能スクリプト(undo、redo) )

  • 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 現在の HTML5編集中の Markdown コンテンツのネイティブ ファイル オブジェクト
2. window.shortcutMap は、shortcutMap[keyCode]=CallbackFunction
3. を通じて **Ctrl+_x_** タイプのショートカット キーをエディターにバインドできます。 onMenu_ new/open/save/export/help/settings はそれぞれメニューバーの 6 つのボタンの応答イベントに対応します
4. review() このメソッドはエディターの入力ボックスで Markdown を即座にプレビューできます
5. fileStatusChange(fileOrFileName) このメソッドは、現在編集中の Markdown ファイルが変更されたことをエディターに通知するために使用され、エディターはファイル名とファイル名を同期します。 nowFile
6. showIframeDlg(title,url) は大きなダイアログ ボックスを表示します。組み込み Web ページは **url**、タイトルは **title**
7. LIOEvent.onDone =これら 3 つのインターフェイスと実装されたメソッドは、それぞれ、ローカル Markdown ファイルの読み込みが成功したとき、失敗したとき、および中断されたときです。 🎜> onError(errInfo)
   1. onAbort()
   3. 一部のエディター要素の JQuery オブジェクト
   filedlg: ローカルを選択するための input[type=file]ファイル
8. editorView: エディターの入力ボックスとプレビュー領域をラップする div
   1. editorView.undo(): Undo
   2. editorView.redo(): Redo
      2. inputView: エディターの入力ボックス textarea
      OutputView: エディターのプレビュー領域 div
   4. トースト メッセージの表示:
   トースト。 text(text, [showTime]) 通常メッセージ
9. Toast.warn(warnInfo,[showTime]) 警告メッセージ
   1. Toast.err(errInfo,[showTime]) エラーメッセージ
   3. ダイアログ ダイアログ ボックスの HTML コードは次のとおりです **サンプル コード_Dialog**
   LocalStorage に保存されているコンテンツ タイトルと構成を読み書きするには、H5S オブジェクト
10. H5S.content
11. H5S.title
    1. H5S.settings
    2. H5S.getValue(settingKey)
    サンプルコード:
サンプルコード_ダイアログ