집 > 기사 > 웹 프론트엔드 > 실시간 미리보기를 위한 순수 프런트엔드 기술을 갖춘 마크다운 편집기

실시간 미리보기를 위한 순수 프런트엔드 기술을 갖춘 마크다운 편집기

php中世界最好的语言원래의: 2018-03-10 15:39:473258검색

이번에는 순수 프런트엔드 기술을 사용한 실시간 미리보기 마크다운 에디터를 가져왔습니다. 순수 프런트엔드 기술을 사용하여 실시간 미리보기를 하는 마크다운 에디터의 주의사항은 무엇인가요? 살펴보자.

레이아웃 구축의 첫 번째 단계:
1. 레이아웃 구상(전체 레이아웃은 다음과 같습니다)

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>

효과 미리보기

두 번째 단계는 예비 결과를 얻기 위한 리소스를 소개하는 것입니다.
1. 프로젝트 아래에 js 폴더를 만듭니다.
2. 다운로드한 압축 패키지의 압축을 풀고 표시/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> 
 <!--略-->

(초기화 코드를 먼저 추가하세요)

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

효과 미리보기

세 번째 단계는 도구 모음에 도구를 추가하는 것입니다. 예:

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>

네 번째 단계 편집기 설정 기능을 구현하는 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 중국어 웹사이트의 다른 관련 기사에 주목하세요!