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- 모델 바인딩을 사용할 수 있습니다
이름	끈	없음	컨트롤의 이름.
미리보기 클래스	끈	없음	사용자 정의 미리보기 스타일 클래스
자동	부울	진실	자동 초기화
힘자	부울	진실	매번 단순화에 값을 동기화하십시오
가장 밝은 부분	부울	거짓	강조하기 위해 열려 있습니까?
소독	부울	거짓	열린 후 입력을 렌더링하지 않는 HTML
구성	물체	{}	Simplemde의 구성
미리보기 렌더	기능	-	configs.previewrender

이벤트

이벤트	설명하다	논쟁
입력	입력 값이 변경 될 때 트리거됩니다	값
흐림	입력이 초점을 잃으면 트리거됩니다	값
초기화	초기화가 완료되면 트리거됩니다	단순화

행동 양식

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

• 예제/색인. 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 >

예를 들어

어두운 테마

구성

단순한 구성

• 中文
• 영어

예

• 간단한 예
• 핵무기 예
• 데모 페이지
• 데모 소스

의존성

• 단순화

특허

Vue-Simplemde는 오픈 소스이며 MIT 라이센스에 따라 릴리스됩니다.

저작권 (C) 2022 F-Loat