ホームページ > 記事 > ウェブフロントエンド > リアルタイム プレビューのための純粋なフロントエンド テクノロジーを備えた Markdown エディター
リアルタイム プレビューのための純粋なフロントエンド テクノロジーを備えた Markdown エディター
- php中世界最好的语言オリジナル
- 2018-03-10 15:39:473258ブラウズ
今回は、リアルタイム プレビューに純粋なフロントエンド テクノロジーを使用するマークダウン エディターについて説明します。リアルタイム プレビューに純粋なフロントエンド テクノロジーを使用するマークダウン エディターの 注意事項 は何ですか?見てみましょう。
レイアウトを構築する最初のステップ:1. レイアウトを考えます (以下は全体的なレイアウトです)
<!DOCTYPE html><html>
<head>
<meta charset="UTF-8">
<title>markdown编辑器</title>
<style type="text/css">
* { margin: 0; padding: 0; outline: none; border-radius: 0;
}
html, body { width: 100%; height: 100%; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; background-color: #ebebeb;
} #toolbar { height: 50px; background-color: #444; width: 100%; color: #fff; line-height: 50px;
} #container { overflow: auto; position: absolute; bottom: 0; left: 0; right: 0; top: 50px;
} #editor-column, #preview-column { width: 49.5%; height: 100%; overflow: auto; position: relative; background-color: #fff;
} .pull-left { float: left;
}
.pull-right { float: right;
} </style>
</head>
<body>
<div id="toolbar"></div>
<div id="container">
<div id="editor-column" class="pull-left">
<div id="panel-editor">
</div>
</div>
<div id="preview-column" class="pull-right">
<div id="panel-preview">
</div>
</div>
</div>
</body></html>効果のプレビュー 2 番目のステップは、暫定的な結果を達成するためのリソースを導入することです: 1. プロジェクトの下に js フォルダーを作成します
2. ダウンロードした圧縮パッケージを解凍し、marked/lib の下にmarked.js を抽出します。
3. ダウンロードした圧縮パッケージを解凍します。 ace-builds/src を js フォルダーに解凍し、名前を ace に変更します。
4. js ファイルをインポートします。(注: markdown.css は、自分で作成することも、ダウンロードすることもできます)インターネットから (github-markdown-css など)
<!DOCTYPE html><html>
<head>
<meta charset='UTF-8'>
<title>markdown编辑器</title>
<script src="js/jquery-2.1.4.min.js"></script>
<script src="js/marked.js"></script>
<script src="js/ace/ace.js"></script>
<link href="markdown.css" rel="stylesheet" />
<!--略--> 5初期化プラグイン
<!--略-->#mdeditor,#preview,#panel-editor,#panel-preview{
height: 100%;
width: 100%;
} </style>
</head>
<body>
<div id='toolbar'></div>
<div id='container'><div id='editor-column' class='pull-left'>
<div id='panel-editor'>
<!--编辑区-->
<div class="editor-content" id="mdeditor" ></div>
</div>
</div>
<div id='preview-column' class='pull-right'>
<div id='panel-preview'>
<!--显示区-->
<div id="preview" class="markdown-body"></div>
</div>
</div>
<!--略-->(最初に初期化コードを追加します)
<!--略--><script>
var acen_edit = ace.edit('mdeditor');
acen_edit.setTheme('ace/theme/chrome');
acen_edit.getSession().setMode('ace/mode/markdown');
acen_edit.renderer.setShowPrintMargin(false);
$("#mdeditor").keyup(function() {
$("#preview").html(marked(acen_edit.getValue()));
}); </script>
</body></html>
効果のプレビュー
3番目のステップは、ツールバーにツールを追加することです 例:
1 .パブリックメソッドを作成します
(実際には、クリックツールは主に手動で入力されたシンボルをエディタに自動的に挿入します)function insertText(val){
acen_edit.insert(val);//光标位置插入
}
<div id='toolbar'>
<button onclick="insertText('**?**')">加粗</button>
<button onclick="insertText('_?_')">斜体</button>
<button onclick="insertText('>')">引用</button>
..... </div>4番目のステップエディタ設定機能を実装する ace.js API:
<div id='toolbar'>
<button onclick="insertText('**?**')">加粗</button>
<button onclick="insertText('_?_')">斜体</button>
<button onclick="insertText('>')">引用</button>設定:さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。
関連読書:
導入にnodejsを使用したウェブサイト
以上がリアルタイム プレビューのための純粋なフロントエンド テクノロジーを備えた Markdown エディターの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。