vue simplemde

vue-simplemde

vue.js的Markdown编辑器组件仅支持vue2.x。

使用设置

不再支持vue1.x，您可以修改以使用

安装

npm install vue-simplemde --save

使用

• 单个组件中的内部参考

< template >
  < vue-simplemde v-model = " content " ref = " markdownEditor " />
</ template >

< script >
  import VueSimplemde from ' vue-simplemde '

  export default {
    components : {
      VueSimplemde
    }
  }
</ script >

< style >
  @import ' ~simplemde/dist/simplemde.min.css ' ;
</ style >

• 全球参考

 import Vue from 'vue'
import VueSimplemde from 'vue-simplemde'
import 'simplemde/dist/simplemde.min.css'

Vue . component ( 'vue-simplemde' , VueSimplemde ) 

道具

财产	类型	默认	描述
价值	细绳	没有任何	初始值，可以使用V模型绑定
姓名	细绳	没有任何	控件的名称。
预览级	细绳	没有任何	自定义预览样式类
自动	布尔	真的	自动初始化
Forcessync	布尔	真的	每次同步值
强调	布尔	错误的	它开放以突出显示吗
消毒	布尔	错误的	打开后不渲染输入的HTML
配置	目的	{}	Simplemde的配置
预览剥落者	功能	-	configs.previewrender

事件

事件	描述	争论
输入	当输入值更改时触发	价值
模糊	当输入失去焦点时触发	价值
初始化	初始化完成后触发	简单

方法

 this . $refs . markdownEditor . simplemde . togglePreview ( ) ;

• 示例/index.vue

• simplemde.js

降价样式

例如，使用GitHub的Markdown样式

Github-Markdown-CSS

安装

$ npm install --save github-markdown-css

使用

< template >
  < vue-simplemde preview-class = " markdown-body " />
</ template >

< style >
  @import ' ~simplemde/dist/simplemde.min.css ' ;
  @import ' ~github-markdown-css ' ;
</ style >

强调

安装

 $ npm install --save highlight.js

使用

< template >
  < vue-simplemde :highlight = " true " />
</ template >

< script >
  import hljs from ' highlight.js ' ;

  window . hljs = hljs;
</ script >

< style >
  @import ' ~simplemde/dist/simplemde.min.css ' ;
  @import ' ~highlight.js/styles/atom-one-dark.css ' ;
  /* Highlight theme list: https://github.com/isagalaev/highlight.js/tree/master/src/styles */
</ style >

编辑主题（Simplemde-theme-base）

例如，使用Simplemde-theme-base主题

安装

 $ npm install --save simplemde-theme-base

使用

< style >
  @import ' ~simplemde-theme-base/dist/simplemde-theme-base.min.css ' ;
  /* no need import simplemde.min.css */
</ style >

例如

黑暗主题

配置

Simplemd的配置

• 中文
• 英语

例子

• 简单示例
• NUXT示例
• 演示页面
• 演示来源

依赖性

• 简单

执照

Vue-Simplemde是开源的，并根据MIT许可发布。

版权（C）2022 F-Loat