Thinkpphp 5 프레임 워 크 에 Markdown 편집기 작업 예제 도입

이 사례 는 Thinkpp 5 프레임 워 크 에 Markdown 편집기 작업 을 도입 하 는 것 을 보 여 줍 니 다.여러분 께 참고 하도록 공유 하 겠 습 니 다.구체 적 으로 는 다음 과 같 습 니 다.
편집기 다운로드 주소 및 프레젠테이션:https://pandao.github.io/editor.md/
1.다운로드 한 항목 을 Public 디 렉 터 리 아래 에 두 기
2.페이지 에 jquery.js,editormd.js,editormd.css 도입
demo


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>markdown  </title>
  <link rel="stylesheet" href="/public/markdown/css/editormd.css" rel="external nofollow" />
  <script src="__JS__/jquery.min.js"></script>
  <script src="/public/markdown/editormd.js"></script>
</head>
<body>
  <form action="{:url('test')}" enctype="multipart/form-data" method='post'>
    <div id="content-editormd" class="form-group">
      <textarea style="display:none;" class="form-control" id="content-editormd-markdown-doc" name="content-editormd-markdown-doc"></textarea>
    </div>
    <button>  </button>
  </form>
<script type="text/javascript">
  $(function() {
    editormd("content-editormd", {
      placeholder : '      ...',
      width  : "100%",
      height : 1000,
      syncScrolling : "single",
      path  : "/public/markdown/lib/",
      watch  : true,
      previewTheme : "white",//  
      theme : 'white',//   
      saveHTMLToTextarea : true, //   HTML Textarea
      //     
      imageUpload : true,
      imageFormats: ["jpg","jpeg","gif","png","bmp","webp"],
      imageUploadURL: "/api/Upload/markdownUpload",
        toolbarIcons : function() { //      ，       
     return editormd.toolbarModes['full']; // full, simple, mini
   },
    });
  });
//  
/*
{
  success : 0 | 1,      // 0       ，1       
  message : "     ，               。",
  url   : "    "    //         
}
*/
</script>
</body>
</html>

사진 업로드


  public function markdownUpload(){
    $config = [
      'size' => 2097152,
      'ext' => 'jpg,gif,png,bmp'
    ];
 
    $file = $this->request->file('editormd-image-file');
    $upload_path = str_replace('\\', '/', ROOT_PATH . 'public/uploads');
    $save_path  = '/uploads/';
    $info    = $file->validate($config)->move($upload_path);
    if ($info) {
      $result = [
        'success' => 1,
        'message' => '    ',
        'url'  => str_replace('\\', '/', '/public/'.$save_path . $info->getSaveName())
      ];
    } else {
      $result = [
        'success'  => 0,
        'message' => $file->getError(),
        'url'  => str_replace('\\', '/', '/public/'.$save_path . $info->getSaveName())
      ];
    }
    return json($result);
  }

3.페이지 에 markdown 형식 내용 불 러 오기


<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>    markdown    </title>
 <link href="/public/markdown/css/editormd.min.css" rel="external nofollow" rel="external nofollow" rel="stylesheet" />
 <script src="__JS__/jquery.min.js"></script>
 <script src="/public/markdown/lib/marked.min.js"></script>
 <script src="/public/markdown/lib/prettify.min.js"></script>
 <script src="/public/markdown/lib/raphael.min.js"></script>
 <script src="/public/markdown/lib/underscore.min.js"></script>
 <script src="/public/markdown/lib/sequence-diagram.min.js"></script>
 <script src="/public/markdown/lib/flowchart.min.js"></script>
 <script src="/public/markdown/lib/jquery.flowchart.min.js"></script>
 <script src="/public/markdown/editormd.js"></script>
</head>
<body>
 <div id="doc-content">
 <textarea style="display:none;">
```php
 &lt;?php
 
 echo 1;
 ?&gt;
```
</textarea>
</div>
 
<script type="text/javascript">
  var testEditor;
  $(function () {
    testEditor = editormd.markdownToHTML("doc-content", {//  ：     div id
      htmlDecode: "style,script,iframe",
      emoji: true,
      taskList: true,
      tocm: true,
      tex: true, //      
      flowChart: true, //      
      sequenceDiagram: true, //      
      codeFold: true
    });});
 
</script>
</body>
</html>

4.html 형식의 내용 을 직접 보 여 줍 니 다.


<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>    </title>
 <link href="/public/markdown/css/editormd.min.css" rel="external nofollow" rel="external nofollow" rel="stylesheet" />
 <script src="__JS__/jquery.min.js"></script>
 <script src="/public/markdown/lib/marked.min.js"></script>
 <script src="/public/markdown/lib/prettify.min.js"></script>
 <script src="/public/markdown/editormd.min.js"></script>
 
</head>
<body>
 <div id="doc-content">
 {:htmlspecialchars_decode($data)}
 </div>
<script type="text/javascript">
  $(function () {
    editormd.markdownToHTML("doc-content");
  })
</script>
</body>
</html>

thinkpHP 와 관련 된 내용 에 관심 이 있 는 독자 들 은 본 사이트 의 주 제 를 볼 수 있 습 니 다.,,,,,ThinkpHP 입문 강좌,thinkpHP 템 플 릿 조작 기법 요약,ThinkPHP 상용 방법 총화,codeigniter 입문 강좌,CI(CodeIgniter)프레임 워 크 진급 강좌과Zend FrameWork 프레임 워 크 입문 강좌.
본 고 는 ThinkPHP 프레임 워 크 를 기반 으로 한 PHP 프로 그래 밍 에 도움 이 되 기 를 바 랍 니 다.

이 내용에 흥미가 있습니까?

현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:

Thinkpop 5.0 입구 파일 숨 기기

초기 URL 스타일 http://localhost/tp5/public/index.php/index 1. index. php 와 .htacess 파일 을 Public 파일 과 같은 디 렉 터 리 로 이동 합 니 다....

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.

Thinkpphp 5 프레임 워 크 에 Markdown 편집기 작업 예제 도입

좋은 웹페이지 즐겨찾기