markdown it editor下载markdown it editor源代码下载

markdown it editor

其他资源

1.1.2

下载

Markdown-IT编辑

vue.js 2.0降压文本编辑器@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索引样式时	数字	1
高度	编辑身高样式	字符串，数字	搅动：50VH

事件

所有事件如果return false ，则默认函数将不会执行

姓名	描述	参数
定制的UPLOAD	defautl上传函数使用html5的`window.FormData` empart.you可以替换其他实施	上传输入的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' }
}