vuemarkdown

vue中使用markdown

参考资料：

• https://github.com/hinesboy/mavonEditor
• https://www.jianshu.com/p/aca26ec75ec3

示例：

<template>
<div>
  <!--markdown编辑-->
  <no-ssr>
    <mavon-editor :toolbars="toolbars" v-model="value"/>
  </no-ssr>
  <!--markdown展示-->
  <!--在 mavon-editor 标签中添加class="md" 和在上一层嵌套<no-ssr>都可以达到解析markdown语法的效果 -->
  <mavon-editor class="md" previewBackground="white" 
                :toolbarsFlag="false" defaultOpen='preview' :subfield="false"
                :editable="false" :scrollStyle="true" :toolbars="toolbars" 
                :value="value"/>
  </div>
</template>

<script>
  export default {
    name: 'login',
    data () {
      return {
        value: '',
        toolbars: {
          bold: true, // 粗体
          italic: true, // 斜体
          header: true, // 标题
          underline: true, // 下划线
          strikethrough: true, // 中划线
          mark: true, // 标记
          superscript: true, // 上角标
          subscript: true, // 下角标
          quote: true, // 引用
          ol: true, // 有序列表
          ul: true, // 无序列表
          link: true, // 链接
          imagelink: true, // 图片链接
          code: true, // code
          table: true, // 表格
          fullscreen: true, // 全屏编辑
          readmodel: true, // 沉浸式阅读
          htmlcode: true, // 展示html源码
          help: true, // 帮助
          /* 1.3.5 */
          undo: true, // 上一步
          redo: true, // 下一步
          trash: true, // 清空
          save: true, // 保存（触发events中的save事件）
          /* 1.4.2 */
          navigation: true, // 导航目录
          /* 2.1.8 */
          alignleft: true, // 左对齐
          aligncenter: true, // 居中
          alignright: true, // 右对齐
          /* 2.2.1 */
          subfield: true, // 单双栏模式
          preview: true, // 预览
        }
      }
    },
  }
</script>

本文由 创作，采用 知识共享署名4.0 国际许可协议进行许可。本站文章除注明转载/出处外，均为本站原创或翻译，转载前请务必署名。最后编辑时间为: 2022/01/14 09:55