markdown it editor 다운로드 -Skown markdown it editor 소스 코드 다운로드

markdown it editor

기타 리소스

1.1.2

다운로드

Markdown-it 편집자

vue.js 2.0 Markdown Rich Text 편집기 @github

설치하다

 npm i markdown - it - editor - S

빠른 시작

.Vue 템플릿을 사용하십시오

 < template >
< div id =" app " >
  < markdown-editor v-model =" content " > </ markdown-editor >
</ div >
</ template >

< script >
import { MarkdownEditor } from 'markdown-it-editor'
import hljs from 'highlightjs' // have to npm install highlight
import 'highlightjs/styles/github.css'  

export default {
  components : { MarkdownEditor } ,
  data ( ) {
    return {
      content : 'hello world' ,
      options : {
        highlight ( str , lang ) { // you can add highlightjs plugin to highlight your code
          if ( lang && hljs . getLanguage ( lang ) ) {
            try {
              return hljs . highlight ( lang , str ) . value
            } catch ( __ ) { }
          }
          return ''
        }
      }
    }
  }
}
</ script >

< style lang =" css " >
#app{
  width: 100vw;
  height: 100vh;
}
</ style >

기본 JavaScript에서도 사용할 수 있습니다. 이런 식으로 vuejs @demo를 포함해야합니다

 <!DOCTYPE html >
< html >
  < head >
    < meta charset =" utf-8 " >
    < title > </ title >
    <!-- markdown editor style -->
    < link rel =" stylesheet " href =" ../lib/index.css " >
  </ head >
  < body >
    < div id =" app " >
      < markdown-editor v-model =" content " > </ markdown-editor >
    </ div >
  </ body >
  <!-- vuejs -->
  < script src =" //cdn.bootcss.com/vue/2.1.4/vue.min.js " > </ script >
  <!-- markdown editor component -->
  < script src =" ../lib/index.js " > </ script >
  < script type =" text/javascript " >
    var vue = new Vue ( {
      el : '#app' ,
      data : { content : '# hello world' }
    } )
  </ script >
</ html >

구성 요소 속성

파라	설명	유형	기본
V- 모델	BIND-TEXTAREA의 값	끈	널
옵션	Markdown-IT 렌더 옵션	물체	세부 사항을 참조하십시오
업로드	이미지 업로드 구성	물체	세부 사항을 참조하십시오
z- 인덱스	전체 화면에서 편집기 z-index 스타일	숫자	1
키	편집기 높이 스타일	문자열, 숫자	Stirng : 50VH

이벤트

모든 이벤트가 return false 되면 기본 함수가 실행되지 않습니다.

이름	설명	파라
사용자 정의 업로드	defautl 업로드 기능 사용 html5의 `window.FormData` ubstance. 다른 구현을 교체 할 수 있습니다.	입력의 DOM을 업로드하십시오
업로드-억제	기본 업로드 기능 성공 이벤트	`xhr.responseText` 와 같은 서버를 반환합니다
업로드 오류	업로드가 실패 할 때 이벤트	`XMLHttpRequest` 객체
업로드	진행 상황에 업로드하십시오	`{ loaded: number, total: number }`

매개 변수 기본값

옵션

 {
    // markdown-it options @more-see
    // https://github.com/markdown-it/markdown-it#init-with-presets-and-options
    html :         true ,        // Enable HTML tags in source
    xhtmlOut :     false ,        // Use '/' to close single tags (<br />).
                                // This is only for full CommonMark compatibility.
    breaks :       true ,        // Convert 'n' in paragraphs into <br>
    langPrefix :   'language-' ,  // CSS language prefix for fenced blocks. Can be
                                // useful for external highlighters.
    linkify :      false ,        // Autoconvert URL-like text to links

    // Enable some language-neutral replacement + quotes beautification
    typographer :  false ,

    // Double + single quotes replacement pairs, when typographer enabled,
    // and smartquotes on. Could be either a String or an Array.
    //
    // For example, you can use '«»„“' for Russian, '„“‚‘' for German,
    // and ['«xA0', 'xA0»', '‹xA0', 'xA0›'] for French (including nbsp).
    quotes : '“”‘’' ,

    // Highlighter function. Should return escaped HTML,
    // or '' if the source string is not changed and should be escaped externaly.
    // If result starts with <pre... internal wrapper is skipped.
    highlight : function ( /*str, lang*/ ) { return '' ; } ,

    // Plugins. Should be an array of the plugin functions imported even if its just one plugin.
    plugins : [ require ( 'markdown-it-anchor' ) , require ( 'markdown-it-deflist' ) ]
}

업로드

이미지를 편집기에 붙여 넣을 수 있습니다

 {
    // defualt form upload name
    name : 'file' ,  
    // default upload accept  
    // @like <input type = 'file' accept='image/jpg,image/jpeg,image/png'/>
    accept : 'image/jpg,image/jpeg,image/png' ,

    // your  file upload url
    //if url == null or other params 'false' the upload button will hidden
    url : null , // your upload url

    header : { 'Authorization' : 'you code' }
}