コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > ウェブフロントエンド > htmlチュートリアル > 本文

HTML+CSS を使用してリアルタイム プレビュー マークダウン エディターを作成する

php中世界最好的语言
リリース： 2018-03-08 09:27:50
オリジナル
6137 人が閲覧しました

今回はHTML+CSSを使ったリアルタイムプレビュー付きマークダウンエディターをお届けします HTML+CSSを使ってリアルタイムプレビュー付きマークダウンエディターを作る際の注意点は何ですか？ 。

レイアウトを構築する最初のステップ:

1. レイアウトを考えます(以下は全体的なレイアウトです)

HTML+CSS を使用してリアルタイム プレビュー マークダウン エディターを作成する


2. プロジェクトの下に新しいindex.htmlページを作成し、次のコードを記述します。 :

<!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 を js フォルダーに解凍します

3.ダウンロードした圧縮パッケージを解凍します。 ace-builds/src を js フォルダーに解凍し、名前を ace に変更します

4. js ファイルをインポートします

(注: markdown.css はマークダウン スタイルのファイルです。自分で作成することも、ダウンロードすることもできます)インターネットから (github-markdown-css など) 

<!DOCTYPE html><html> 
<head>
<meta charset=&#39;UTF-8&#39;>
<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=&#39;toolbar&#39;></div>
<div id=&#39;container&#39;><div id=&#39;editor-column&#39; class=&#39;pull-left&#39;>
<div id=&#39;panel-editor&#39;>
                                        <!--编辑区-->
<div class="editor-content" id="mdeditor" ></div>
</div> 
</div>
<div id=&#39;preview-column&#39; class=&#39;pull-right&#39;>
<div id=&#39;panel-preview&#39;>
                                       <!--显示区-->
<div id="preview" class="markdown-body"></div>
</div>
</div> 
 <!--略-->
ログイン後にコピー

(最初に初期化コードを追加します)

<!--略--> 
var acen_edit = ace.edit(&#39;mdeditor&#39;); 
acen_edit.setTheme(&#39;ace/theme/chrome&#39;);
acen_edit.getSession().setMode(&#39;ace/mode/markdown&#39;);
acen_edit.renderer.setShowPrintMargin(false);
$("#mdeditor").keyup(function() {
$("#preview").html(marked(acen_edit.getValue()));
});
ログイン後にコピー


3 番目のステップはツールバーにツールを追加することです 例:

1. パブリック メソッドを作成します

(実際、クリック ツールは主にエディターに手入力されたシンボルを自動的に挿入するために使用されます) 

function insertText(val){
acen_edit.insert(val);//光标位置插入
}
<div id=&#39;toolbar&#39;>
<button onclick="insertText(&#39;**?**&#39;)">加粗</button>
<button onclick="insertText(&#39;_?_&#39;)">斜体</button>
<button onclick="insertText(&#39;>&#39;)">引用</button>
.....</div>
ログイン後にコピー

4 番目のステップは ace です。エディター設定機能を実装するための .js API:

<div id=&#39;toolbar&#39;>
   <button onclick="insertText(&#39;**?**&#39;)">加粗</button>
   <button onclick="insertText(&#39;_?_&#39;)">斜体</button>
   <button onclick="insertText(&#39;>&#39;)">引用</button>..... 设置:   <select id="theme" size="1">
       <optgroup label="Bright">
           <option value="ace/theme/chrome">Chrome</option>
           <option value="ace/theme/clouds">Clouds</option>
           <option value="ace/theme/crimson_editor">Crimson Editor</option>
           <option value="ace/theme/dawn">Dawn</option>
           <option value="ace/theme/dreamweaver">Dreamweaver</option>
           <option value="ace/theme/eclipse">Eclipse</option>
           <option value="ace/theme/github">GitHub</option>
           <option value="ace/theme/iplastic">IPlastic</option>
           <option value="ace/theme/solarized_light">Solarized Light</option>
           <option value="ace/theme/textmate">TextMate</option>
           <option value="ace/theme/tomorrow">Tomorrow</option>
           <option value="ace/theme/xcode">XCode</option>
           <option value="ace/theme/kuroir">Kuroir</option>
           <option value="ace/theme/katzenmilch">KatzenMilch</option>
           <option value="ace/theme/sqlserver">SQL Server</option>
       </optgroup>
       <optgroup label="Dark">
           <option value="ace/theme/ambiance">Ambiance</option>
           <option value="ace/theme/chaos">Chaos</option>
           <option value="ace/theme/clouds_midnight">Clouds Midnight</option>
           <option value="ace/theme/cobalt">Cobalt</option>
           <option value="ace/theme/gruvbox">Gruvbox</option>
           <option value="ace/theme/idle_fingers">idle Fingers</option>
           <option value="ace/theme/kr_theme">krTheme</option>
           <option value="ace/theme/merbivore">Merbivore</option>
           <option value="ace/theme/merbivore_soft">Merbivore Soft</option>
           <option value="ace/theme/mono_industrial">Mono Industrial</option>
           <option value="ace/theme/monokai">Monokai</option>
           <option value="ace/theme/pastel_on_dark">Pastel on dark</option>
           <option value="ace/theme/solarized_dark">Solarized Dark</option>
           <option value="ace/theme/terminal">Terminal</option>
           <option value="ace/theme/tomorrow_night">Tomorrow Night</option>
           <option value="ace/theme/tomorrow_night_blue">Tomorrow Night Blue</option>
           <option value="ace/theme/tomorrow_night_bright">Tomorrow Night Bright</option>
           <option value="ace/theme/tomorrow_night_eighties">Tomorrow Night 80s</option>
           <option value="ace/theme/twilight">Twilight</option>
           <option value="ace/theme/vibrant_ink">Vibrant Ink</option>
       </optgroup>
   </select>字体大小   <select id="fontsize" size="1">
       <option value="10px">10px</option>
       <option value="11px">11px</option>
       <option value="12px" selected="selected">12px</option>
       <option value="13px">13px</option>
       <option value="14px">14px</option>
       <option value="16px">16px</option>
       <option value="18px">18px</option>
       <option value="20px">20px</option>
       <option value="24px">24px</option>
   </select>代码折行   <select id="folding" size="1">
       <option value="manual">manual</option>
       <option value="markbegin" selected="selected">mark begin</option>
       <option value="markbeginend">mark begin and end</option>
   </select>自动换行   <select id="soft_wrap" size="1">
       <option value="off">Off</option>
       <option value="40">40 Chars</option>
       <option value="80">80 Chars</option>
       <option value="free">Free</option>
   </select>全选样式   <input type="checkbox" name="select_style" id="select_style" checked="">光标行高光   <input type="checkbox" name="highlight_active" id="highlight_active" checked="">显示行号   <input type="checkbox" id="show_gutter" checked="">打印边距   <input type="checkbox" id="show_print_margin" checked=""></div>
ログイン後にコピー
<!---略--->
......
            $("#theme").change(function() {
acen_edit.setTheme($(this).val());
})
$("#fontsize").change(function() {
acen_edit.setFontSize($(this).val());
}) 
$("#folding").change(function() {
session.setFoldStyle($(this).val());
})
$("#select_style").change(function() {
acen_edit.setOption("selectionStyle", this.checked ? "line" : "text");
})
$("#highlight_active").change(function() {
acen_edit.setHighlightActiveLine(this.checked);
})
$("#soft_wrap").change(function() {
acen_edit.setOption("wrap", $(this).val());
})
$("#show_print_margin").change(function() {
acen_edit.renderer.setShowPrintMargin(this.checked);
})
ログイン後にコピー

HTML+CSS を使用してリアルタイム プレビュー マークダウン エディターを作成する

この記事の事例を読んだ後、あなたはそれをマスターしたと思います方法、よりエキサイティングな情報については、php 中国語 Web サイトの他の関連記事に注意してください。

関連書籍:

js 正規表現の 10 の応用例

Vue.js 2.0 バックグラウンド システムの実用例

以上がHTML+CSS を使用してリアルタイム プレビュー マークダウン エディターを作成するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル：
html+css markdown
ソース：php.cn
前の記事：高解像度画像を div に保存するための html2canvas メソッド コード 次の記事：WEBインターフェース管理ツール
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
function_exists() はカスタム関数を決定できません Function test () {return true;} if (function_exists ('test')) {echo "テストは関数です";
から 2024-04-29 11:01:01
0
2
1976
Google Chromeのモバイル版を表示する方法 こんにちは、先生、Google Chrome をモバイル版に変更するにはどうすればよいですか?
から 2024-04-23 00:22:19
0
10
2133
子ウィンドウは親ウィンドウを操作しますが、出力は応答しません。 最初の 2 つの文は実行可能ですが、最後の文は実装できません。
から 2024-04-19 15:37:47
0
1
1802
親ウィンドウには出力がありません document.onclick = function(){ window.opener.document.write('私は子ウィンドウの出力です');
から 2024-04-18 23:52:34
0
1
1700
CSS マインド マッピングに関するコースウェアはどこにありますか? コースウェア
から 2024-04-16 10:10:18
0
0
1709
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート