markdown

公司项目需要在网页上面加一个文档编辑和显示像网上笔记本一样

首选markdown

安装

npm i marked --save

使用

import marked from 'marked'

需求要代码高亮，用了highlight

require('../css/monokai-sublime.css')
require('./highlight.pack')

因为用的是vue写的，所以把插件放到了commom下,如果要用纯h5做

<link href= "http://cdn.bootcss.com/highlight.js/8.0/styles/monokai_sublime.min.css" rel= "stylesheet"> <script src="http://cdn.bootcss.com/highlight.js/8.0/highlight.min.js"></script>

//markdown和代码高亮
inputMarkdown: function() {
  var rendererMD = new marked.Renderer();
  marked.setOptions({
    renderer: rendererMD,
    gfm: true,
    tables: true,
    breaks: false,
    pedantic: false,
    sanitize: false,
    smartLists: true,
    smartypants: false
  });
  marked.setOptions({
    highlight: function (code) {
      return hljs.highlightAuto(code).value;//代码高亮，需要highlight插件
    }
  });
  this.html = marked(this.md);

渲染参数

gfm

它是一个布尔值，默认为true。

允许 Git Hub标准的markdown.

tables

它是一个布尔值，默认为true。

允许支持表格语法。该选项要求 gfm 为true。

breaks

它是一个布尔值，默认为false。

允许回车换行。该选项要求 gfm 为true。

pedantic

它是一个布尔值，默认为false。

尽可能地兼容 markdown.pl的晦涩部分。不纠正原始模型任何的不良行为和错误。

sanitize

它是一个布尔值，默认为false。

对输出进行过滤（清理），将忽略任何已经输入的html代码（标签）

smartLists

它是一个布尔值，默认为false。

使用比原生markdown更时髦的列表。 旧的列表将可能被作为pedantic的处理内容过滤掉.

smartypants

它是一个布尔值，默认为false。

使用更为时髦的标点，比如在引用语法中加入破折号

编辑代码的时候公司要加一个截图右键粘贴到文档上

做了一个demo，具体代码

html

<div><input type="text" id="testInput" placeholder="截屏后粘贴到输入框中" size="30" /></div>

js

<script type="text/javascript">
(function(){
    var imgReader = function( item ){
        var blob = item.getAsFile(),
            reader = new FileReader();
        // 读取文件后将其显示在网页中
        reader.onload = function( e ){
            var img = new Image();
             console.log(e.target.result)//拿到粘贴的图片的base64编码 
img.src = e.target.result; document.body.appendChild( img );
 }; // 读取文件
reader.readAsDataURL( blob );
 };
 document.getElementById( 'testInput' ).addEventListener( 'paste', function( e ){ // 添加到事件对象中的访问系统剪贴板的接口
 var clipboardData = e.clipboardData, i = 0, items, item, types; 
if( clipboardData ){ 
items = clipboardData.items;
 if( !items )
{ return; } 
item = items[0]; // 保存在剪贴板中的数据类型
 types = clipboardData.types || []; 
for( ; i < types.length; i++ ){ 
if( types[i] === 'Files' ){
 item = items[i]; break;
 } 
} // 判断是否为图片数据 
if( item && item.kind === 'file' && item.type.match(/^image\//i) ){ imgReader( item ); 
} 
} 
});
})(); </script>

文档编辑的功能公司还未要求实现，现在只是实现了文档显示，后期做好文档编辑回添加