Vue.js에서 Mardown을 해석하기 위해 vue-markdown의 소개와 그림 문자의 요약을 만들었다면

개시하다

Vue.js에서 Mardown 편집기를 만들고 싶을 때 vue-markdown처럼 편리한 구성 요소가 있어서 그걸 소개했는데 사용할 때 그림 문자에 대한 힌트가 있으면 즐거울 것 같아요.

vue-markdown

vue-markdown은 markdown-it라는 Markdown Parza로 싸서 Vue입니다.js에서 사용하기 편리하도록 구성된 간단한 프로그램 라이브러리입니다.소스의 내용을 보면 마크다운-it를 구성 부분으로만 하고 쓸데없는 일을 거의 하지 않았다는 것을 알 수 있다.
vue-markdown
markdown-it
사용 방법도 간단하다. 프롬프트의 소스에 Mardown이 쓴 문자열을 넣으면 Mardown 편집을 간단하게 할 수 있다.

<div id="app">
  <h1>Vue Markdown Editor</h1>
  <div class="editor-main">
    <div class="main">
      <textarea class="editor" v-model="source"></textarea>
      <div class="preview">
        <vue-markdown :source="source"></vue-markdown>
      </div>
    </div>
  </div>
</div>

import VueMarkdown from 'vue-markdown'
export default {
  name: 'app',
  data () {
    return {
      source: ""
    }
  },
  components: {
    VueMarkdown
  }
}

문자 힌트를 그리면...

그냥 그랬으면 만들 수 없는 편집기가 됐을 텐데 뭐라도 간을 해야 할 것 같아.그림문자가 제시되면 편리할 것 같아서 그림문자 제시 기능을 해봤습니다.
힌트를 만드는 기능이 상당히 어려워 이번에는'날씨'에서 마지막으로 입력한 단어를 대상으로 한다.
그림 문자를 입력하기 전에 공간이 없기 때문에 빈칸으로 단어를 구분하고 마지막으로 입력한 단어:라면 힌트를 표시하는 간단한 논리다.

<div>
    <span>{{ preConvertEmoji }}</span>
    <ul>
      <li v-for="key in suggest_filter()">
        {{ key }} : {{ emojiList[key] }}
      </li>
    </ul>
    <textarea class="editor" v-on:keyup="enter"></textarea>
</div>

//絵文字の一覧jsonを読み込む。
//絵文字一覧のJSONはmarkdown-it-emojiから拝借
//https://github.com/markdown-it/markdown-it-emoji
import emojiOrigin from '../data/light.json'

export default {
  name: 'suggest',
  data () {
    return {
      emojiList: emojiOrigin,
      preConvertEmoji: ""
    }
  },
  methods: {
    suggest_filter: function () {
      const emoji = this.preConvertEmoji.replace(/:/g, '')

      if (emoji == ""){
        return []
      }

      //読み込んだemojiOriginから前方一致で候補を5つ出す
      return Object.keys(emojiOrigin).filter(function (key) {
        return key.indexOf(emoji) == 0
      }).slice(0, 5)
    },
    enter: function(data){
      const words = data.target.value.split(/\s/)
      const lastWord = words.pop()
      //最後に入力している単語がコロンからはじまっていれば絵文字入力と見なして入力中の文字を保持する
      if(lastWord.indexOf(':') == 0){
        this.preConvertEmoji = lastWord
      } else {
        this.preConvertEmoji = ""
      }
      // 親コンポーネントに入力を渡すために$emitを使っている
      this.$emit('enter', data.target.value)
    }
  }
}

동작은 이런 느낌이에요.

소스 코드는 아래에 있습니다.
https://github.com/nasum/vue-markdown-editor
알림만 있으면 선택할 수 없지만, 입력에 도움이 될 것 같습니다.앞으로 잘 수정해서 입력을 선택하고 입력한 커서 부분에 표시하려면 마지막 단어뿐만 아니라 어느 곳에서든 힌트를 주어야 한다.

총결산

Vue.js로 Mardown 편집기를 만드는 데 편리한 vue-markdown을 소개했다.그림 문자에 대한 조언은 조금 작지만, 원하는 것에 조금 가까워졌기 때문에 앞으로 발전하고 싶다.
내일(12/05)의 책임자는@akifo이다.