リアルタイムプレビューのための純粋なフロントエンドテクノロジーを備えた Markdown エディター-jsチュートリアル-php.cn

リアルタイムプレビューのための純粋なフロントエンドテクノロジーを備えた Markdown エディター

php中世界最好的语言

リリース： 2018-03-10 15:39:47

オリジナル

3303 人が閲覧しました

今回は、リアルタイムプレビューに純粋なフロントエンドテクノロジーを使用するマークダウンエディターについて説明します。リアルタイムプレビューに純粋なフロントエンドテクノロジーを使用するマークダウンエディターの注意事項は何ですか?見てみましょう。

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

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

リアルタイムプレビューのための純粋なフロントエンドテクノロジーを備えた Markdown エディター

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 を抽出します。
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" />
                <!--略-->

ログイン後にコピー

初期化プラグイン

(最初に編集領域と表示領域コードを追加します)

<!--略-->#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> 
 <!--略-->

ログイン後にコピー

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

<!--略--><script>
            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()));
            });        </script>
    </body></html>

ログイン後にコピー

効果のプレビュー

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>

ログイン後にコピー

設定:さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。