Converting the Vue.js Markdown Editor Demo to Vanilla JS

Converting the Vue.js Markdown Editor Demo to Vanilla JS

A few weeks ago, I created a few videos of me converting jQuery plugins to vanilla JS. Today, I’m converting the Vue.js markdown editor demo into vanilla JS.

A few weeks ago, I created a few videos of me converting jQuery plugins to vanilla JS. I thought it would be fun to do the same thing with the demo projects from a few popular frameworks.

Today, I’m converting the Vue.js markdown editor demo into vanilla JS. Let’s dig in.

Watch me code

If you want, you can watch me code this project.

You can also download the source code on GitHub.

How I approached this project

The first thing I did was rip out Vue and lodash from the source code. We’re not going to need either of them. I left in the marked.js library, however, because converting markdown to HTML is something I’m happy to let a library handle for me.

I also stripped out all of the Vue syntax and properties from the elements in the HTML.

<div id="editor">
    <textarea></textarea>
    <div></div>
</div>

Next, I used the querySelector() method to get the textarea element, and the div that the compiled HTML is getting rendered into.

// Variables
var text = document.querySelector('#editor textarea');
var compiled = document.querySelector('#editor div');

Converting markdown to HTML #

Whenever the value of the textarea changes, we want to parse it into markdown and render it into the UI.

The Vue demo uses lodash to debounce this event so that it only runs after the user has stopped typing for 300 milliseconds. The thing is, we don’t need a whole 30kb library for that!

First, I attached an input event handler to the text element with the addEventListener() method. I passed in a named function, changeHandler(), as my callback.

text.addEventListener('input', changeHandler);

In the changeHandler() function, I pass the text.value, the text in the textarea element, into the global marked() function that marked.js creates. I also kept the {sanitize:true} option that was in the Vue.js demo.

Then, I use the innerHTML property to inject the resulting HTML into the compiled element.

// On change event, process text into markdown and render
var changeHandler = function () {
    compiled.innerHTML = marked(text.value, {sanitize: true});
};

You typically want to sanitize third-party content like user-generated inputs, but the older version of marked.js that the demo uses appears to do this for you.

vue javascript programming developer web-development

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

Vue.js Web App Development | Skenix Infotech

Our expert Vue.js developers follows Agile methodology that delivers high-quality & affordable Vue.js services. Hire Vue.js Developer from Skenix Infotech.

Useful Tools In Vue.js Web Development

Useful Tools In Vue.js Web Development. There are some tools that developers that are just getting started with Vue or sometimes, have experience building with Vue sometimes do not know exist to make development in Vue a lot easier.

Why Web Development is Important for your Business

With the rapid development in technology, the old ways to do business have changed completely. A lot more advanced and developed ways are ...

Important Reasons to Hire a Professional Web Development Company

    You name the business and I will tell you how web development can help you promote your business. If it is a startup or you seeking some...

Learn VUE 3 by Making a Web App ~ Composition API, Vue JS Hooks?

Learn how the new Vue JS 3 works by making a simple and easy web application to increment and decrement a numerical value using the Composition API, including Vue Ref, Vue Reactive and Vue Computed.