markdown it editorダウンロード-MarkdownIT markdown it editorソースコードのダウンロード

markdown it editor

その他のリソース

1.1.2

ダウンロード

Markdown-it-Editor

Vue.js 2.0 Markdown Rich Text Editor @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モデル	バインドテキストアレアの値	弦	ヌル
オプション	マークダウンイットレンダリングオプション	物体	詳細を参照してください
アップロード	画像アップロードconfig	物体	詳細を参照してください
z-index	フルスクリーンの場合、エディターZ-Indexスタイル	番号	1
身長	編集者の高さスタイル	文字列、番号	Stirng：50VH

イベント

return false場合、すべてのイベント、デフォルト関数は実行されません

名前	説明	パラメーション
カスタムアプロード	defautlアップロード関数html5の`window.FormData` exommixを使用します。他の実装を置き換えることができます	入力のDOMをアップロードします
アップロードサクセス	デフォルトのアップロード機能成功イベント	サーバーは`xhr.responseText`のような値を返します
アップロードエラー	アップロードfaildイベントの場合	`XMLHttpRequest`オブジェクト
アップロード	Progressイベントにアップロードします	`{ 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' }
}