Sunday, 13 August, 2017 UTC

Simple Markdown Editor Using Vue.js – Exploring computed values & events

Simple Markdown Editor Using Vue.js – Exploring computed values & events

Summary

Markdown Editor using Vue.js
In this article, we will deep dive into creating a simple markdown editor and use the same concept as we used while creating Raw HTML. The HTML editor which we made used the simple binding as well as use the Vue.js v-html directive. We have also explored the ways in which we can incorporate the events and the methods. We did also have a look at the computed methods. Now let’s put these things together in order to use a third party library in order to create a simple markdown editor with few lines of code.

We will be using a library called marked. This will help us in parsing the code in order to make things run with ease. This will also help us directly convert the markup to HTML code.

Implementation of Markdown Editor using Vue.js
The HTML remains very small and straight forward. As we move ahead we will be explaining what each and everything means and how we make it work. Let’s have a look at the HTML code.
<div id="app">
  <textarea :value="input" @input="update"></textarea>
  <div v-html="resultantMarkdown"></div>
</div>
Note in the above code there are two things that you might have to look at
  1. The @ takes an important role while defining the events this helps you to avoid v-on each time you declare an event handler.
  2. The :value represents a short form of v-bind:value, learning these things out can help you to write less code and get around with the implementation fast.
  3. The v-html as you all are familiar we have already used in the Simple HTML Editor.
Now let’s have a look at the JavaScript that propels this application. The JavaScript is pretty simple and actually makes a lot of sense while users see how powerful Vue.js itself is.
new Vue({
  el: '#app',
  data: {
    input: '# Make a Markup Editor using Vue.js'
  },
  computed: {
    resultantMarkdown: function () {
      return marked(this.input, { sanitize: true })
    }
  },
  methods: {
    update:function (e) {
    console.log(e)
      this.input = e.target.value
    }
  }
});
We create a simple app using the regular Vue.js syntax and then get along with the taking in the input from the textarea. While this is being done we also manipulate the computed value. This leads to resultant markup being generated from markdown and then being consumed using v-html. Seems pretty simple right. We can add some CSS to make it presentable which we have already done in the Codepen.
See the Pen Vue.js Markdown Editor. Exploring Computed properties and Methods in Vue.js by Shiv Kumar Ganesh (@shivkumarganesh) on CodePen.

This might have given you an idea of how simple things can be integrated in order to make it easy for you to create a Markdown Editor.
Vue 2.x
 
 
The post Simple Markdown Editor Using Vue.js – Exploring computed values & events appeared first on The Web Juice.

... more @ thewebjuice.com

thewebjuice.com