vue-simplemde

SimpleMDE 配置

// 以下大多数选项为非默认行为
export default {
  data () {
    return {
      configs: {
        autofocus: true,
        autosave: {
          enabled: true,
          uniqueId: 'MyUniqueID',
          delay: 1000
        },
        blockStyles: {
          bold: '__',
          italic: '_'
        },
        element: document.getElementById('MyID'),
        forceSync: true,
        hideIcons: ['guide', 'heading'],
        indentWithTabs: false,
        initialValue: 'Hello world!',
        insertTexts: {
          horizontalRule: ['', '\n\n-----\n\n'],
          image: ['![](http://', ')'],
          link: ['[', '](http://)'],
          table: ['', '\n\n| Column 1 | Column 2 | Column 3 |\n| -------- | -------- | -------- |\n| Text     | Text      | Text     |\n\n']
        },
        lineWrapping: false,
        parsingConfig: {
          allowAtxHeaderWithoutSpace: true,
          strikethrough: false,
          underscoresBreakWords: true
        },
        placeholder: 'Type here...',
        previewRender: function(plainText) {
          return customMarkdownParser(plainText) // 返回HTML自定义解析器
        },
        previewRender: function(plainText, preview) { // 异步方法
          setTimeout(function () {
            preview.innerHTML = customMarkdownParser(plainText)
          }, 250)
          return '加载中...'
        },
        promptURLs: true,
        renderingConfig: {
          singleLineBreaks: false,
          codeSyntaxHighlighting: true
        },
        shortcuts: {
          drawTable: 'Cmd-Alt-T'
        },
        showIcons: ['code', 'table'],
        spellChecker: false,
        status: false,
        status: ['autosave', 'lines', 'words', 'cursor'], // Optional usage
        status: ['autosave', 'lines', 'words', 'cursor', {
          className: 'keystrokes',
          defaultValue: function(el) {
            this.keystrokes = 0
            el.innerHTML = '0 Keystrokes'
          },
          onUpdate: function(el) {
            el.innerHTML = ++this.keystrokes + ' Keystrokes'
          }
        }], // Another optional usage, with a custom status bar item that counts keystrokes
        styleSelectedText: false,
        tabSize: 4,
        toolbar: false,
        toolbarTips: false
      }
    }
  }
}

工具栏

下面是内置的工具栏图标（只有一些默认启用），你可以根据喜好重新排列。如果按钮有快捷键，将自动显示提示（即如果把action设置为toggleBold，title设置加粗，最终的提示文本将为加粗（Ctrl-B））。

此外，你可以在工具栏数组中任意两个图标之间添加一个分离线'|'。

name action title
className
bold toggleBold 加粗
fa fa-bold
italic toggleItalic 斜体
fa fa-italic
strikethrough toggleStrikethrough 删除线
fa fa-strikethrough
heading toggleHeadingSmaller 标题
fa fa-header
heading-smaller toggleHeadingSmaller 缩小标题
fa fa-header
heading-bigger toggleHeadingBigger 增大标题
fa fa-lg fa-header
heading-1 toggleHeading1 大标题
fa fa-header fa-header-x fa-header-1
heading-2 toggleHeading2 中等标题
fa fa-header fa-header-x fa-header-2
heading-3 toggleHeading3 小标题
fa fa-header fa-header-x fa-header-3
code toggleCodeBlock 代码块
fa fa-code
quote toggleBlockquote 引用
fa fa-quote-left
unordered-list toggleUnorderedList 无序列表
fa fa-list-ul
ordered-list toggleOrderedList 有序列表
fa fa-list-ol
clean-block cleanBlock 清除格式
fa fa-eraser fa-clean-block
link drawLink 插入链接
fa fa-link
image drawImage 插入图片
fa fa-picture-o
table drawTable 插入表格
fa fa-table
horizontal-rule drawHorizontalRule 插入水平线
fa fa-minus
preview togglePreview 预览
fa fa-eye no-disable
side-by-side toggleSideBySide 全屏预览
fa fa-columns no-disable no-mobile
fullscreen toggleFullScreen 全屏
fa fa-arrows-alt no-disable no-mobile
guide 跳转链接 Markdown引导
fa fa-question-circle

使用toolbar选项自定义工具栏：

// 仅自定义现有按钮的顺序
export default {
  data () {
    return {
      configs: {
        toolbar: ['bold', 'italic', 'heading', '|', 'quote']
      }
    }
  }
}

// 自定义所有信息和/或添加你的图标
export default {
  data () {
    return {
      configs: {
        toolbar: [{
            name: 'bold',
            action: SimpleMDE.toggleBold,
            className: 'fa fa-bold',
            title: '加粗'
          },
          {
            name: 'custom',
            action: function customFunction (editor) {
              // 添加你的代码
            },
            className: 'fa fa-star',
            title: '自定义按钮'
          },
          '|' // 分隔符
          ...
        ]
      }
    }
  }
}

快捷键

SimpleMDE带有预定义键盘快捷键的数组，可以用一个配置选项改变。默认的列表如下：

快捷键 操作
Cmd-‘ ‘引用’
Cmd-B ‘加粗’
Cmd-E ‘清除格式’
Cmd-H ‘缩小标题’
Cmd-I ‘斜体’
Cmd-K ‘插入链接’
Cmd-L ‘插入无序列表’
Cmd-P ‘预览’
Cmd-Alt-C ‘插入代码块’
Cmd-Alt-I ‘插入图片’
Cmd-Alt-L ‘插入有序列表’
Shift-Cmd-H ‘增大标题’
F9 ‘全屏预览’
F11 ‘全屏’

可以只修改部分快捷键，其他保持不变：

export default {
  data () {
    return {
      configs: {
        shortcuts: {
          'toggleOrderedList': 'Ctrl-Alt-K', // 改变插入有序列表的快捷
          'toggleCodeBlock': null, // 不绑定插入代码块的快捷键
          'drawTable': 'Cmd-Alt-T' // 绑定没有预设快捷键的操作，插入表格
        }
      }
    }
  }
}

快捷键会在平台之间自动转换。如果你定义一个快捷键为“Cmd-B”，在PC机上的快捷键将更改为“Ctrl-B”。反之亦然。

可以绑定的操作列表与工具栏按钮的内置操作列表相同。

高度

改变最小高度:

.markdown-editor .CodeMirror, .markdown-editor .CodeMirror-scroll {
  min-height: 200px;
}

设置高度为一个固定值:

.markdown-editor .CodeMirror {
  height: 300px;
}
This site is open source. Improve this page.