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