Create a gist now

Instantly share code, notes, and snippets.

@nasum /file0.html
Last active Dec 4, 2016

Vue.jsでMarkdownをパースするためのvue-markdownの紹介と絵文字サジェストを作った話 ref: http://qiita.com/nasum/items/ec53060b8ec5a3534aa4
<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)
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment