Vue写一个Markdown编辑器

这是最近用Vue写的一个Markeddown编辑器, 主要目的是扩展Vue-Manager的编辑器功能。核心功能引入了Marked插件,将Markedown文档解析为html。样式基本沿用了vm-editor，并增加了多种主题选择的功能。

项目已经打包上传到npm，欢迎使用。

预览地址	https://luosijie.github.io/vm-markdown/
源码地址	https://github.com/luosijie/vm-markdown

安装

npm install --save vm-markdwon

使用

import VmMarkdown from 'vm-markdwon'
export default {
  ...
  components: {
      VmMarkdown
  },
  methods: {
      showHtml (data) {
      console.log(data)
    }
  }
  ...
}

<VmMarkdown :theme="theme" 
            width="1000px" 
            height="600px" 
            v-on:getHtml="showHtml"
            :defaultText="intro">
</VmMarkdown>

功能实现

vm-markdown作为一款 以简洁易用为目标 的编辑器, 核心解析功能由 Marked 来完成, 而其他功能主要为优化部分不熟悉Markdown语法用户的使用体验。
主要功能可以分为:

• 将Markdown文本插入编辑框
• 将Mardown文本解析为html，并实时预览
• 将Makdown解析的html加入自定义样式
• 实现表格的的快速输入功能
• 实现编辑区域的缩放功能

Markdown文本插入

兼容Firefox浏览器的文本插入函数

function insertText(dom,string) {
  if (document.execCommand('insertText', false, string)) {
    return
  }else{
    let start = dom.selectionStart
    let end = dom.selectionEnd
    dom.value = dom.value.substring(0, start) + string + dom.value.substring(end, dom.value.length)
    dom.selectionStart = start + string.length;
    dom.selectionEnd = start + string.length;
    dom.focus()
  }
}
export default insertText

  import insertText from '../assets/js/insertText.js'
  ...
  methods: {
    insertText(string){
      let content = document.querySelector('.vm-markdown-content')
      insertText(content, string)
      this.$emit('textChange', content.value)
    }
  }

按钮绑定 insertText(string) 事件

  ...
  <VmMarkdownButton icon="iconfont icon-bold" @click.native="insertText(' **Bold** ')"></VmMarkdownButton>
  <VmMarkdownButton icon="iconfont icon-italic" @click.native="insertText(' *Italic* ')"></VmMarkdownButton>
  ...

Markdown文本解析为html

Dom结构

  ...
  <div class="vm-markdown-edit" :style="{backgroundColor: themeValue.bgLeft}">
    // 输入部分
    <textarea v-focus class="content-markdown" v-model="markdString"></textarea>
  </div>
  // 实时预览部分
  <div class="vm-markdown-html" v-html="htmlString" :style="{backgroundColor: themeValue.bgRight}">
  </div>
  ...

引入 Marked 解析, 并实时预览

  import marked from 'marked'
  watch: {
    markdString(value){
      marked.setOptions({
        renderer: new marked.Renderer(),
        gfm: true,
        tables: true,
        breaks: true,
        pedantic: false,
        sanitize: false,
        smartLists: true,
        smartypants: false
      })
      this.htmlString = marked(value)
      ...
    }
  },

增加自定义样式

因为 Marked 解析出来的html，是不带任何样式的，所以需要自定义样式，并确保最后输出带样式的html字符串

  parseHtml: function () {
      let style = {
        ul: `
              margin: 10px 20px;
              list-style-type: square;
              padding: 0;
            `,
        ol: `
              margin: 10px 20px;
              list-style-type: decimal;
              padding: 0;
            `,
        li: `
              display: list-item;
              padding: 0;
            `,
        hr: `
              margin: 15px 0;
              border-top: 1px solid #eeeff1;
            `,
        pre: `
              display: block;
              margin: 10px 0;
              padding: 8px;
              border-radius: 4px;
              background-color: #f2f2f2;
              color: #656565;
              font-size: 14px;
             `,
        blockquote: `
                      display: block;
                      border-left: 4px solid #ddd;
                      margin: 15px 0;
                      padding: 0 15px;
                    `,
        img: `
               margin: 20px 0;
             `,
        a: `
            color: #41b883;
           `,
        table: `
                 border: 1px solid #eee;
                 border-collapse: collapse;
               `,
        tr: `
              border: 1px solid #eee;
            `,
        th: `
              padding: 8px 30px;
              border-right: 1px solid #eee;
              background-color: #f2f2f2;
            `,
        td: `
              padding: 8px 30px;
              border-right: 1px solid #eee;
            `
      }
      let html = document.getElementsByClassName('vm-markdown-html')[0]
      let tagNames = Object.keys(style)
      for (let i = 0; i < tagNames.length; i++) {
        let _tagNames = html.getElementsByTagName(tagNames[i])
        if (_tagNames.length > 0) {
          for (let j = 0; j < _tagNames.length; j++) {
            _tagNames[j].style = style[tagNames[i]]
          }
        }
      }
    },
    getHtml: function () {
      let html = document.querySelector('.vm-markdown-html')
      this.$emit('getHtml', html.innerHTML)
    }
  },

表格的的快速输入

Markdown的表格是相对繁琐的输入，vm-markown借用图形化的操作实现快捷输入

  <ul class="vm-markdown-table" v-insertTable:color="filterColor">
  </ul>

  directives:{
    insertTable: {
      inserted: function(el,binding){
          // 定义总单元格数目 4*6 = 24
          let length = 24
          // 鼠标所在的单元格的坐标
          let x = 0, y = 0
          // 每个单元格赋值：行和列的坐标
          for(let i=0; i<length; i++){
            let setx = i%6 + 1
            let sety = parseInt(i/6) + 1
            let li = document.createElement('li')
            li.setAttribute('data-x', setx)
            li.setAttribute('data-y', sety)
            el.appendChild(li)
          }
          // 鼠标滑过改变颜色
          el.addEventListener('mouseover', function(evt){
            if (evt.target.tagName === 'LI') {
              x= evt.target.getAttribute('data-x')
              y= evt.target.getAttribute('data-y')
              let lis = el.querySelectorAll('li')
              for(let i=0; i<lis.length; i++){
                lis[i].style.backgroundColor = '#e0e0e0'
                if(lis[i].dataset.x <= x && lis[i].dataset.y <= y){
                  lis[i].style.backgroundColor = binding.value
                }
              }
            }
          })
          // 单击插入表格字符串
          el.addEventListener('click', function(evt){
            if(x && y){
              let th = '| Head '
              let td = '| Data '
              let tl = '| ---  '
              let str = ''
              let ths = '', tls = '', tds = ''
              for(let i=0; i<x; i++){
                ths = ths.concat(th)
                tls = tls.concat(tl)
              }
              for(let j=0; j<y; j++){
                for(let k=0; k<x; k++){
                  tds = tds.concat(td)
                }
                tds += ' |\n'
              }
              ths += ' |\n'
              tls += ' |\n'
              str += ths + tls + tds
              document.execCommand('insertText', false, str)
            }         
          })
       }
    }
  }

编辑区的缩放功能

实现缩放的layout函数

  layout: function (event) {
      let VmMarkdown = document.querySelector('.vm-markdown')
      let VmMarkdownEdit = document.querySelector('.vm-markdown-edit')    
      function classHas(str){
        return event.target.classList.contains(str)
      }
      if(classHas('icon-layout-zoom')){
        
        if (VmMarkdown.style.position === 'fixed') {
          VmMarkdown.style = 'width:' + this.width + ';' +
                             'height:' + this.height + ';'
        }else{
          VmMarkdown.style.position = 'fixed'
          VmMarkdown.style.left = '0'
          VmMarkdown.style.top = '0'
          VmMarkdown.style.margin = '0'
          VmMarkdown.style.width = '100%'
          VmMarkdown.style.height = '100%'
        }   
      }else if (classHas('icon-layout-left')) {
        VmMarkdownEdit.style.width = '0'
      }else if (classHas('icon-layout-right')) {
        VmMarkdownEdit.style.width = '100%'
      }else if (classHas('icon-layout-default')) {
        VmMarkdownEdit.style.width = '50%'
      }
    },

将layout绑定到顶部菜单的点击事件中

<VmMarkdownMenu  @click.native="layout"></VmMarkdownMenu>

先这样了 欢迎star