Vue.js로 고성능 MarkdownEditor를 쉽게 구현하는 【mavonEditor】

먼저

본래는 React의 Hooks에 대해 쓰려고 했습니다만, 자신이 알고 있는 지식이라면 거의 기존의 기사와 쓰여져 버리므로, 이번은 하카손등에서 개인적으로 애용하고 있는 편리한 라이브러리의 소개 하고 싶습니다. 내부의 구조 등의 고도의 이야기 등은 전혀 하고 있지 않으므로, 기술적으로 에모인 내용을 기대하고 있던 사람은 미안해.

이번에는 NitKit 컴퓨터 연구부이 홍보의 일환으로하고있다 Advent Calendar 용으로이 기사를 썼습니다!

어떤 라이브러리?

이러한 고성능 MarkdownEditor을 쉽게 구현할 수있는 라이브러리입니다.

링크

영어 문서

중국어 문서

소개

자신은 yarn를 통해 도입했습니다.

$ yarn add mavon-editor

npm 로 넣는 경우는 이쪽입니다.

$ npm install mavon-editor --save 

기본 사용법

이와 같이 적절한 vue 파일에 기재하면 움직입니다.

<template>
  <div id="app">
    <mavon-editor v-model="value" />
  </div>
</template>

<script>
import Vue from "vue";
import mavonEditor from "mavon-editor";
import "mavon-editor/dist/css/index.css";
Vue.use(mavonEditor);

export default {
  data() {
    return { value: "" }; 
  }
};
</script>

도입으로 특별히 어려운 부분은 존재하지 않지만, 주의점으로서 보통의 라이브러리와 달리 import 할 뿐만 아니라,

import Vue from "vue";
import mavonEditor from "mavon-editor";
import "mavon-editor/dist/css/index.css";
Vue.use(mavonEditor);

를 모두 기재하지 않으면 mavon-editor가 읽히지 않도록 주의해 주세요.
이를 구현하면 다음 이미지와 같은 MarkdownEditor가 표시됩니다.



이 좌측에 있는 에디터에 MarkDown 기법으로 문장을 입력해 가면 이런 느낌이 됩니다.


또, 여기에 입력한 캐릭터 라인을 취득하고 싶은 경우는, 바인딩 되고 있는 value 의 값을 참조하는 것으로 가능합니다.

"문장을 Markdown 형식으로 표시"만 수행

MarkdownEditor가 아닌 임의의 문자열을 Markdown로 읽고, 그 표시만을하고 싶다는 경우도 있다고 생각합니다.
이 경우 다음과 같이 작성하여 작성할 수 있습니다.

<template>
  <div id="app">
    <mavon-editor
      v-model="value"
      language="ja"
      :subfield="false"
      defaultOpen="preview"
      :toolbars="false"
    />
  </div>
</template>

<script>
import Vue from "vue";
import mavonEditor from "mavon-editor";
import "mavon-editor/dist/css/index.css";
Vue.use(mavonEditor);

export default {
  data() {
    return { value: "# test \n こん感じで `MarkDown` も書けます．\n\n $$ \n f(x) = a_xb_x \n $$ \n" }; 
  }
};
</script>

이렇게하면 다음과 같이 표시됩니다.

Mavon-Editor의 props의 설정으로 이것을 실현하고 있습니다만, 각각의 props로 무엇을 하고 있는지를 설명합니다.

    <mavon-editor
      v-model="value"
      :subfield="false"
      defaultOpen="preview"
      :toolbars="false"
    />

디폴트에서는 「편집 화면」과 「MardDown」으로 표시한 결과의 2개의 화면이 표시됩니다만, :subfield를 false로 지정하는 것으로 표시하는 화면의 수는 하나가 됩니다 .

defaultOpen에서는 메인으로 표시할 화면을 선택할 수 있습니다. 디폴트에서는 마크다운 에디터가 표시됩니다만, 이번은 캐릭터 라인을 Markdown 기법으로 읽은 결과만을 표시하고 싶기 때문에 "preview"를 지정하고 있습니다.

이대로라면 결국 Markdown 의 상부에 있는 툴바로부터 전환이 생겨 버리기 때문에 툴바 자체를 삭제하는 처리로서 :toolbars="false" 라는 처리를 기재하고 있습니다.

요약

이 라이브러리는 매우 고성능 마크 다운 편집기입니다.
실무로 사용하는 것은 어려울지도 모릅니다만 개인개발이나 콘테스트로 아빠와 만드는 레벨 있으면 충분히 사용을 검토하는 레벨의 라이브러리라고 생각합니다.
그 밖에도 props를 만지면 오리지널 티가 있는 마크다운 에디터를 구현하는 것이 가능합니다.
더 자세히 알고 싶은 사람은 여기를 참고하십시오.

마지막으로

내일 기사는 UIPageViewController 및 버튼을 사용한 연습 구현입니다!
꼭 이쪽도 봐 주세요! !