1583483520
How to Build a live markdown Editor with VueJS
Introduction
As developers, we sometimes love to conveniently create easy-to-read documentation so as to ease the stress that accompanies styling at the beginning. For this, you need an easy tool such as the Markdown editor. This enables you to create a H1 ( for example) by simply adding a # before the header.
Together in this tutorial we’ll build a simple, yet very effective realtime markdown editor application with Vue and powered by Pusher. This app will be used to convert raw markdown into proper HTML. It will have two separate sections:
- To the left, where you write and view raw markdown
- And the right, where you can easily view the converted markdown
A quick look at what we’ll build:
Prerequisites
Ensure that you have Node.js and npm installed on your machine. A quick overview of other core technologies we will be using in this tutorial include:
-
Vue: a progressive JavaScript framework for building applications
-
Pusher: a Node.js client to interact with the Pusher REST API
-
Marked: a low-level markdown compiler for parsing markdown without caching or blocking for long periods of time.
I am using @vue/cli 2.0 ****for this project
Setting up the project
We’ll use Vue-cli to setup our project, so run the command below to have it installed globally on your machine:
npm install -g @vue/cli
or
yarn global add @vue/cli
You can verify that Vue is properly installed by running:
vue --version
This will output the current version installed on your machine, just like this:
Now to generate our project, type the following command:
vue init webpack vue-markdown // version 2
or
vue create vue-markdown // version 3
Executing the command above will bring up a couple of questions, you can accept the default and proceed. Once the installation process is completed, you will now have a new project named vue-markdown installed in your project directory.
Running the application
Next, we’ll run the application:
npm start // version 2
or
npm run serve // version 3
This will start the application on the http://localhost:8080. Visit that link:
Installing server dependencies
Run the following commands to install the dependencies required for this project:
npm install --save pusher pusher-js marked
npm install --save body-parser cors dotenv express
Pusher account setup
Head over to Pusher and sign up for a free account, if you don’t already have one. Log in to create a new application by clicking on the Channels apps on the sidebar. Obtain your application credentials as we will need to use them later in this post.
A little more about how Pusher works
Pusher allows you communicate between different parts of your application in realtime. It can be a notification you wish to show your users or the price of a product which people are bidding on currently. Whatever it is that needs constant updating, you can (and maybe should) use pusher for it.
By default, Pusher allows you bind to events on the client-side (listen to events on your browser, app, etc) and then trigger events on the server-side (send broadcasts to all listeners from the server). However, pusher has this really cool super amazing feature called private channels that allows you trigger events from the client side. You have to turn it on and perform a few actions to use it.
- Your channel name on the client-side must be prefixed with
private- - All your event names on the client-side must be prefixed with
client- - You must authenticate the Pusher subscription before you can trigger events on the client-side.
So, from your Pusher app dashboard, go to App settings and enable client events before you continue with this guide.
Now you are ready. You can read more about private channels.
Environment variables
Create a file name .env in the root directory of your application and add your application credentials as obtained from your Pusher dashboard as follows:
PUSHER_APP_ID=YOUR_APP_ID
PUSHER_APP_KEY=YOUR_APP_KEY
PUSHER_APP_SECRET=YOUR_APP_SECRET
PUSHER_APP_CLUSTER=CLUSTER
Ensure that you replace YOUR_APP_ID, YOUR_APP_KEY, YOUR_APP_SECRET and CLUSTER placeholders with the appropriate credentials.
Setting up the server
The main objective of this application is to be able to process and convert a raw markdown to HTML in realtime from all browsers, to effectively achieve this, we’ll use Express to set up a simple server and use Pusher to broadcast the converted markdown to all the client on a specific channel.
So create a server.js file in the root directory of your application and add the following code snippet to it:
// server.js
const express = require('express');
const bodyParser = require('body-parser');
const cors = require('cors');
const Pusher = require('pusher');
require('dotenv').config();
const app = express();
app.use(cors());
app.use(bodyParser.urlencoded({ extended: false }));
app.use(bodyParser.json());
const pusher = new Pusher({
appId: process.env.PUSHER_APP_ID,
key: process.env.PUSHER_APP_KEY,
secret: process.env.PUSHER_APP_SECRET,
cluster: process.env.PUSHER_APP_CLUSTER,
encrypted: true
});
app.post('/pusher/auth', function(req, res) {
var socketId = req.body.socket_id;
var channel = req.body.channel_name;
var auth = pusher.authenticate(socketId, channel);
res.send(auth);
});
var port = process.env.PORT || 3000;
app.listen(port);
console.log("Listening on 3000")
First, we basically loaded all the necessary middlewares for the Express server and configured Pusher using the credentials we added to our environment variables earlier.
Our client application will need to make an API call to a specified endpoint in order to authenticate our pusher connection and ensure we can run a private channel on the frontend. Pusher has an authenticate() function that does that for us.
Open another terminal and start the server on http://localhost:3000 with:
node server
This will log a message to the console as shown below. This is to indicate that the server has been started successfully:
Creating the home component
For the purpose of this application we’ll create a new component, so navigate to ./src/components and create a new file named HomeComponent.vue within it. Once you are done, paste in the code below:
// ./src/components/HomeComponent.vue
<template>
<div>
<div class="title">
<h2>{{ title }}</h2>
</div>
<div>
<div class="row">
<div class="col-md-6">
<textarea v-model="markdown" name="" id="" cols="80" rows="15" @keyup="postMark"></textarea>
</div>
<div id="preview" class="col-md-6" v-html="compiledMarkdown"></div>
</div>
</div>
</div>
</template>
<script>
import axios from "axios";
import pusher from "pusher";
export default {
name: "Home",
data() {
return {
title: "Realtime Markdown Editor",
markdown: "",
channel : {}
};
},
};
</script>
<style>
.title {
margin-bottom: 40px;
}
#preview {
border: 2px solid;
text-align: left;
}
</style>
Here, within the template section of the component above, we created two separate columns: a textarea where the raw markdown will be written and a second column to preview the compiled markdown in realtime.
Furthermore, we proceeded to added a little bit of styling to the application.
Enabling realtime editing
We want to send updates to our document immediately the user makes them. This is the whole essence of adding realtime functionality to begin with. With private channels, we can skip the entire step of sending the update to the server and then triggering an event from the server. We can do all of that from the client now.
Open ./src/components/HomeComponent.vue and define the Pusher application:
// ./src/components/HomeComponent.vue
...
<script>
import marked from "marked";
import pusher from "pusher";
export default {
...
created() {
let pusher = new Pusher("YOUR_APP_KEY", {
cluster: "CLUSTER",
encrypted: true
authEndpoint: 'http://localhost:3000/pusher/auth',
});
this.channel = pusher.subscribe("private-markdown");
this.channel.bind("client-new-text", data => {
this.markdown = data;
});
},
// We will generate the markdown and trigger events here
...
};
</script>
...
In the created method, we have defined the Pusher application, subscribed to a private channel and bound the channel to the an event. Now, we are ready to listen to any data exchange that will happen across that channel.
Do ensure that you replace the
YOUR_APP_KEYandCLUSTERwith the appropriate credential. Also replace theauthEndpointwith the endpoint you defined for your application.
Generating markdown
To generate markdown from the input we make, add the following code to the file:
// ./src/components/HomeComponent.vue
...
<script>
...
export default {
...
computed : {
compiledMarkdown: function () {
return marked(this.markdown, { sanitize: true })
}
},
// We will listen for changes to the document here
...
};
</script>
...
The computed data attribute compiledMarkdown will always be updated as the content of markdown changes. This is good for us so we can see changes immediately.
Trigger event with changes
Now, let’s send the changes we make to the document to everyone following it
// ./src/components/HomeComponent.vue
...
<script>
...
export default {
...
methods: {
postMark: function(e) {
const text = e.target.value;
this.channel.trigger("client-new-text", text);
}
}
...
};
</script>
...
Wrapping up
Navigate to ./src/App.vue file and include the created HomeComponent.vue file within it:
// ./src/App.vue
<template>
<div id="app">
<homeComponent/>
</div>
</template>
<script>
import HomeComponent from "./components/HomeComponent";
export default {
name: "App",
components: {
HomeComponent
}
};
</script>
<style>
#app {
font-family: "Avenir", Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
And finally, open the index.html file and update as shown below:
// ./index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>Vue Realtime Markdown</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="#">Navbar</a>
</nav>
<div id="app"></div>
<!-- built files will be auto injected -->
<script src="https://js.pusher.com/4.1/pusher.min.js"></script>
</body>
</html>
We included the CDN file for bootstrap, added a navigation bar and also included the script file for Pusher.
Test the application
Restart the application by running npm start from the terminal and don’t forget to also start the server by opening another terminal within your project folder with node server.
Conclusion
In this tutorial, you have learned how to conveniently build a simple markdown editor application using Vue and Pusher to enhance the realtime functionality. I hope you found this helpful. You can find the source code for the demo here on GitHub.
#vuejs #javascript #vue-js
What is GEEK
Buddha Community
1593782362
Top Chat Software for Live Streaming & Broadcasting Web & Mobile Apps
Do you Increase your Website Engagment?
I analysed, ranked and reviewed best live video streaming chat APIs and SDKs for your web & mobile app based on client reviews and ratings. portfolio, usecases, cost, secure streaming, live chat features, cost, support, etc.
Turn your viewers into participatients with Live Streaming Chat Solutions. There are lot of Real-time chat apis & SDks Providers have in online market now. You can easily integrte and customize real time chat solutions into your new or existing live video streaming web and iOS & android applications. Below have mentioned best real time chat api & SDk Proivders.
Here are The Most Popular Live Video Streaming Chat APIs & SDKs to be Considered for your Mobile App
1. CONTUS Fly - Real-time Messaging Platform for Live Streaming Apps & Webs
CONTUS Fly is one of the leading real time messaging software providers in the market for a decade. Their messaging platforms are completely customizable since they provide Chat APIs and SDKs to integrate real time chat feasibility on your live streaming applications irrespective of audience base. Engage your audience like a live concert, stadium like experience through digitally. Create channels for every live streaming event, sports or anything that would create buzz. Enable audience to interact with each other over voice, video chats and real-time text chats with engaging emojis. CONTUS Fly enables users to add emojis and stickers to captivate each audience and create fun.
Highlight Features of CONTUS Fly Live Video Streaming Platform Includes:
- Chat for Live Video Streaming
- Video & Audio Recording
- Video Calling
- Drawing whitebord
- Screen Sharing
- End to End Encryption
2. Apphitect -Instant chat for Live Streaming Platforms
To make every live streaming and broadcasting videos more engaging and entertaining, Apphitect’s instant messaging comes with exciting Instant messaging chat APIs to add chat into streaming applications. Apphitect is built with multiple real time communication features like video chat, voice chat and real-time chat to your streaming apps. Their solution surprisingly has a wide range of features to communicate, engage and increase subscription benefits.
Highlight Features of Apphitect Live Insterative Broadcasting Software Includes:
- Live Video Streaming Chat
- Cross Platform Support
- Audio & Video Recording
- Live Video Calling
- Emoji & Stickers
3. MirrorFly - Enterprise Real Time Chat for Streaming Websites
One of the enterprise-grade real-time chat solutions built to create virtual chat experience for live streaming events and websites for big brands and startups. Irrespective of audience base, category, MirrorFly provides customizable real time chat APIs to add virtual communication mediums on live streaming and broadcasting applications. Their solution comes with absolute moderation tools and open channels to talk and listen with your audience. MirrorFly’s server infrastructure has the potential to handle concurrent messages and users and to achieve maximum sales conversion.
Highlight Features of MirrorFly Live Streaming Chat API Includes:
- Face to Face Video Calling
- Live Interactive Broadcasting
- Call Recording
- Digital Whiteboard
- Group Video Calling
4. Applozic - Real-time Chat Plugin for Live Broadcasting & Video Streaming apps
When it comes to building a live streaming chat app software that covers the entire platforms and demand All-in-One package (features, Customization to any extent) with a one-time payment for lifetime performance, then undoubtedly Contus Fly makes the right choice to partner with. The company offers live broadcasting SDK for Android/iOS and chat APIs for customization.
Highlight Features of Applozic Chat Live Streaming Platform Includes:
- Real time Communication
- Cross Platform Support
- Live Audio Broadcasting
- Push Notifications
- Secure Image Sharing
5. Sendbird - Top Real time Chat for Live Video Streams
Being a leading real time chat platform provider in the market, Sendbird has its own hallmark of communication features to the world’s most prominent live streaming applications. Their real time chat solution enables broadcasting and streaming platform’ owners to create a physical equivalent digital chat experience for the audience during any live event streaming to interact, collaborate and cheer together within the same streaming screen. By creating open channels and groups, you can enable the audience to interact with each other during any streaming, engage them with polls, stickers, multiple communication channels and more.
Highlight Features of Sendbird Live Streaming Chat API Includes:
- Chat for Streaming website
- Messaging Data
- Multi Platforms
- Push Notifications
- End to End Encryption
6. Agora - Interactive Live Chat for Live Video Streaming
Agora, a deep integratable API available in the market to deliver live interactive streaming experience for workplace, enterprises, gaming, retail, telehealth and social live streaming websites. With easy-to-embed SDKs, Agora empowers businesses to add HD and low latency video and voice chat features into any streaming platforms and channels. Their easy-to-embed real time chat features encourage higher levels of user engagement and opportunity to drive more audience.
7. Enablex - A Redefined Communication APIs for In-app Chat
Their smart and secure chat APIs deliver real-time chat feasibility for live and on-demand video streaming websites. The real time chat features provides users to communicate and engage within the same streaming platform irrespective of interaction medium and audience count. Enablex offers platform-as-a-service communication solutions for real time messaging integration with APIs hosting possibility on public, private and cloud deployment. Their APIs are enriched with multiple communication features and engagement tools like live-polls, stickers and more.
8. Pubnub - In-app Chat Platforms for Live Event Streaming Websites
In order to increase user engagement with live and remote audiences, Pubnub offers real time messaging chat functionality with interactive features to drive event-based engagement with mass chat. Their in-app chat feature enhances live programs, event streaming and blogging content with live polling, multiple chats and more. It also enables live streaming websites to build community, channels and super groups during live streaming to bring the entire audience base to one place.
9. Vonage - Communication APIs for In-app Messagings
Vonage is a prime provider of communication APIs for major industrial sectors and enterprise workplaces. With its API, businesses such as live streaming applications can integrate in-app messaging features into any streaming platforms on Android, iOS and Web to empower user engagement. Their APIs are powered with scalable infrastructure and provide multiple communication mediums such as in-app voice, video and chat proactively engaging the audience.
10. Firekast - Live Chat Widget for Video Streaming Player
Firekast provides a customizable live chat widget with HTML code for streaming players to enable chat within any streaming or on-demand videos. The chat widget gives the ability for brands and content owners to make the audience to interact with each other for better engagement and proactivity during streaming. The Firekast Live chat comes with moderator tools that will allow administrators to delete or ban abusive content and users from the channel or groups. Firekast’s live chat comes with a private chat widget to create public or private chat rooms to make effective collaboration and discussions.
Conclusion
And this is all the real time chat providers in the market to implement chat functionality in any live streaming or broadcasting platforms. More than delivering entertaining live content, creating a massive engagement and buzz for every live event is the smarter way to turn every audience into a protiable subscriber. Picking up the right software provider is more important than just handling the integration process.
#live #live-streaming-solutions #live-streaming-chat-api #live-streaming-chat-sdk #chat-api-for-live-broadcasting
1594024630
Hire Dedicated VueJS Developers
Want to Hire VueJS Developer to develop an amazing app?
Hire Dedicated VueJS Developers on the contract (time/project) basis providing regular reporting about your app. We, at HourlyDeveloper.io, implement the right strategic approach to offer a wide spectrum of vue.js development services to suit your requirements at most competitive prices.
Consult with us:- https://bit.ly/2C5M6cz
#hire dedicated vuejs developers #vuejs developer #vuejs development company #vuejs development services #vuejs development #vuejs developer
1583483520
How to Build a live markdown Editor with VueJS
Introduction
As developers, we sometimes love to conveniently create easy-to-read documentation so as to ease the stress that accompanies styling at the beginning. For this, you need an easy tool such as the Markdown editor. This enables you to create a H1 ( for example) by simply adding a # before the header.
Together in this tutorial we’ll build a simple, yet very effective realtime markdown editor application with Vue and powered by Pusher. This app will be used to convert raw markdown into proper HTML. It will have two separate sections:
- To the left, where you write and view raw markdown
- And the right, where you can easily view the converted markdown
A quick look at what we’ll build:
Prerequisites
Ensure that you have Node.js and npm installed on your machine. A quick overview of other core technologies we will be using in this tutorial include:
-
Vue: a progressive JavaScript framework for building applications
-
Pusher: a Node.js client to interact with the Pusher REST API
-
Marked: a low-level markdown compiler for parsing markdown without caching or blocking for long periods of time.
I am using @vue/cli 2.0 ****for this project
Setting up the project
We’ll use Vue-cli to setup our project, so run the command below to have it installed globally on your machine:
npm install -g @vue/cli
or
yarn global add @vue/cli
You can verify that Vue is properly installed by running:
vue --version
This will output the current version installed on your machine, just like this:
Now to generate our project, type the following command:
vue init webpack vue-markdown // version 2
or
vue create vue-markdown // version 3
Executing the command above will bring up a couple of questions, you can accept the default and proceed. Once the installation process is completed, you will now have a new project named vue-markdown installed in your project directory.
Running the application
Next, we’ll run the application:
npm start // version 2
or
npm run serve // version 3
This will start the application on the http://localhost:8080. Visit that link:
Installing server dependencies
Run the following commands to install the dependencies required for this project:
npm install --save pusher pusher-js marked
npm install --save body-parser cors dotenv express
Pusher account setup
Head over to Pusher and sign up for a free account, if you don’t already have one. Log in to create a new application by clicking on the Channels apps on the sidebar. Obtain your application credentials as we will need to use them later in this post.
A little more about how Pusher works
Pusher allows you communicate between different parts of your application in realtime. It can be a notification you wish to show your users or the price of a product which people are bidding on currently. Whatever it is that needs constant updating, you can (and maybe should) use pusher for it.
By default, Pusher allows you bind to events on the client-side (listen to events on your browser, app, etc) and then trigger events on the server-side (send broadcasts to all listeners from the server). However, pusher has this really cool super amazing feature called private channels that allows you trigger events from the client side. You have to turn it on and perform a few actions to use it.
- Your channel name on the client-side must be prefixed with
private- - All your event names on the client-side must be prefixed with
client- - You must authenticate the Pusher subscription before you can trigger events on the client-side.
So, from your Pusher app dashboard, go to App settings and enable client events before you continue with this guide.
Now you are ready. You can read more about private channels.
Environment variables
Create a file name .env in the root directory of your application and add your application credentials as obtained from your Pusher dashboard as follows:
PUSHER_APP_ID=YOUR_APP_ID
PUSHER_APP_KEY=YOUR_APP_KEY
PUSHER_APP_SECRET=YOUR_APP_SECRET
PUSHER_APP_CLUSTER=CLUSTER
Ensure that you replace YOUR_APP_ID, YOUR_APP_KEY, YOUR_APP_SECRET and CLUSTER placeholders with the appropriate credentials.
Setting up the server
The main objective of this application is to be able to process and convert a raw markdown to HTML in realtime from all browsers, to effectively achieve this, we’ll use Express to set up a simple server and use Pusher to broadcast the converted markdown to all the client on a specific channel.
So create a server.js file in the root directory of your application and add the following code snippet to it:
// server.js
const express = require('express');
const bodyParser = require('body-parser');
const cors = require('cors');
const Pusher = require('pusher');
require('dotenv').config();
const app = express();
app.use(cors());
app.use(bodyParser.urlencoded({ extended: false }));
app.use(bodyParser.json());
const pusher = new Pusher({
appId: process.env.PUSHER_APP_ID,
key: process.env.PUSHER_APP_KEY,
secret: process.env.PUSHER_APP_SECRET,
cluster: process.env.PUSHER_APP_CLUSTER,
encrypted: true
});
app.post('/pusher/auth', function(req, res) {
var socketId = req.body.socket_id;
var channel = req.body.channel_name;
var auth = pusher.authenticate(socketId, channel);
res.send(auth);
});
var port = process.env.PORT || 3000;
app.listen(port);
console.log("Listening on 3000")
First, we basically loaded all the necessary middlewares for the Express server and configured Pusher using the credentials we added to our environment variables earlier.
Our client application will need to make an API call to a specified endpoint in order to authenticate our pusher connection and ensure we can run a private channel on the frontend. Pusher has an authenticate() function that does that for us.
Open another terminal and start the server on http://localhost:3000 with:
node server
This will log a message to the console as shown below. This is to indicate that the server has been started successfully:
Creating the home component
For the purpose of this application we’ll create a new component, so navigate to ./src/components and create a new file named HomeComponent.vue within it. Once you are done, paste in the code below:
// ./src/components/HomeComponent.vue
<template>
<div>
<div class="title">
<h2>{{ title }}</h2>
</div>
<div>
<div class="row">
<div class="col-md-6">
<textarea v-model="markdown" name="" id="" cols="80" rows="15" @keyup="postMark"></textarea>
</div>
<div id="preview" class="col-md-6" v-html="compiledMarkdown"></div>
</div>
</div>
</div>
</template>
<script>
import axios from "axios";
import pusher from "pusher";
export default {
name: "Home",
data() {
return {
title: "Realtime Markdown Editor",
markdown: "",
channel : {}
};
},
};
</script>
<style>
.title {
margin-bottom: 40px;
}
#preview {
border: 2px solid;
text-align: left;
}
</style>
Here, within the template section of the component above, we created two separate columns: a textarea where the raw markdown will be written and a second column to preview the compiled markdown in realtime.
Furthermore, we proceeded to added a little bit of styling to the application.
Enabling realtime editing
We want to send updates to our document immediately the user makes them. This is the whole essence of adding realtime functionality to begin with. With private channels, we can skip the entire step of sending the update to the server and then triggering an event from the server. We can do all of that from the client now.
Open ./src/components/HomeComponent.vue and define the Pusher application:
// ./src/components/HomeComponent.vue
...
<script>
import marked from "marked";
import pusher from "pusher";
export default {
...
created() {
let pusher = new Pusher("YOUR_APP_KEY", {
cluster: "CLUSTER",
encrypted: true
authEndpoint: 'http://localhost:3000/pusher/auth',
});
this.channel = pusher.subscribe("private-markdown");
this.channel.bind("client-new-text", data => {
this.markdown = data;
});
},
// We will generate the markdown and trigger events here
...
};
</script>
...
In the created method, we have defined the Pusher application, subscribed to a private channel and bound the channel to the an event. Now, we are ready to listen to any data exchange that will happen across that channel.
Do ensure that you replace the
YOUR_APP_KEYandCLUSTERwith the appropriate credential. Also replace theauthEndpointwith the endpoint you defined for your application.
Generating markdown
To generate markdown from the input we make, add the following code to the file:
// ./src/components/HomeComponent.vue
...
<script>
...
export default {
...
computed : {
compiledMarkdown: function () {
return marked(this.markdown, { sanitize: true })
}
},
// We will listen for changes to the document here
...
};
</script>
...
The computed data attribute compiledMarkdown will always be updated as the content of markdown changes. This is good for us so we can see changes immediately.
Trigger event with changes
Now, let’s send the changes we make to the document to everyone following it
// ./src/components/HomeComponent.vue
...
<script>
...
export default {
...
methods: {
postMark: function(e) {
const text = e.target.value;
this.channel.trigger("client-new-text", text);
}
}
...
};
</script>
...
Wrapping up
Navigate to ./src/App.vue file and include the created HomeComponent.vue file within it:
// ./src/App.vue
<template>
<div id="app">
<homeComponent/>
</div>
</template>
<script>
import HomeComponent from "./components/HomeComponent";
export default {
name: "App",
components: {
HomeComponent
}
};
</script>
<style>
#app {
font-family: "Avenir", Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
And finally, open the index.html file and update as shown below:
// ./index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>Vue Realtime Markdown</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="#">Navbar</a>
</nav>
<div id="app"></div>
<!-- built files will be auto injected -->
<script src="https://js.pusher.com/4.1/pusher.min.js"></script>
</body>
</html>
We included the CDN file for bootstrap, added a navigation bar and also included the script file for Pusher.
Test the application
Restart the application by running npm start from the terminal and don’t forget to also start the server by opening another terminal within your project folder with node server.
Conclusion
In this tutorial, you have learned how to conveniently build a simple markdown editor application using Vue and Pusher to enhance the realtime functionality. I hope you found this helpful. You can find the source code for the demo here on GitHub.
#vuejs #javascript #vue-js
1627980950
A Simple Markdown Editor with VueJS
simple-m-editor
A markdown editor with Vue.js
Install
yarn add simple-m-editor
use npm
npm install --save simple-m-editor
Usage with Vue.js
// you can add class "m-editor-preview" to your element to
// use the same style as the editor shows
<template>
<div>
<m-editor
v-model="text"
@on-change="handleChange"
/>
<div class="m-editor-preview" v-html="markdownContent"></div>
</div>
</template>
import mEditor from 'simple-m-editor'
import 'simple-m-editor/dist/simple-m-editor.css'
export default {
component: {
mEditor
},
data () {
return {
text: '',
markdownContent: ''
}
},
methods: {
handleChange(data) {
this.markdownContent = data.htmlContent
}
}
}
Preview
Api
props
| name | type | defautl | description |
|---|---|---|---|
| value | String | value | |
| placeholder | String | 请输入…… | placehoder |
| mode | String | live | one of ['live', 'edit', 'preview'] |
| full-screen | Boolean | false | full screen or not |
| show-line-num | Boolean | true | show side line number or not |
| theme | String | light | light or dark |
| auto-scroll | Boolean | true | auto sroll or not |
event
| name | params | description |
|---|---|---|
| onChange | Object: { content, htmlContent } | change event |
Download Details:
Author: hellomrbigshot
The Demo/Documentation: View The Demo/Documentation
Download Link: Download The Source Code
Official Website: https://github.com/hellomrbigshot/simple-m-editor
License: MIT
#vue #vuejs #markdown
1642504008
7 Scripts To Develop Live Video Streaming Apps - Streambiz
7 Scripts That Will Help You Build A Live Video Streaming Application. Live Video Streaming App can Be for Live Events or Individuals to Use it for Fun and also Earn Money Online.
StreamBiz is one of the most exclusive offers for you who are looking for the best live stream video app builder. Are you looking for a video host app for your company, educator Institute, or events? Download Now. Click here! StreamBiz is a unique app presented by BSETEC to fulfill your requirement for any time of video streaming creative business plan online. Maybe you are the best marketer in your company who has got the opportunity to present your brand more lively on social media apps. However, if you want to excel now in these times with a personal video app for your business idea, then you should start without any worry. Take the free live streaming script app called StreamBiz available on Google playstore or the Apple store. Get the latest features and technology support for free!
Now Here are the 7 Best Scripts for Live Video Streaming Apps
1. StreamBiz Live Video Script
Build a Bigo live clone or a periscope clone, all you need is Streambiz free video app script to allow the creator to build an exclusive unique video app that can be used for a particular crowd or can be used by anyone to present online. The script is available on Google Play or Apple Store easily without any technology or sign-up interaction. Use this in media, technology, education, sports, corporate, or the government. The app itself is a proud technology provided by one of the excellent and leading technology companies BSETEC.
2. Zoom Clone Script
Live video streaming script apps have become more important than any other application, Zoom app is the most suitable for all just like StreamBiz high technology suite for video app development. Zoom video app, mostly used for live conferences, the scream script is now available on our website. It has some amazing features that you can apply while creating a video stream app for your company or business. The feature includes a user can start a video session on zoom and share with others, also anyone can have a personal chat room, group chat, recording of the meeting, and set an extra miles sample for others in the video app script clone business.
3. Periscope Clone Script Live Streaming App
Periscope is a broadcast live video sharing platform for the targeted audience who are logged in already and for everyone who wants to join and watch hosted videos on periscope. Also, it allows streaming a live moment that can be shared with anyone on any social media app. Periscope is a good app for speakers and educators, business professionals who cover a huge audience at one moment can easily use this, and similarly if you want to clone this app, we have a free live streaming script for video making apps.
Benefits of PERISCOPE CLONE SCRIPT FOR ALL INDUSTRIES – BSETEC
4. Live TV Stream Script
Interestingly this app script is famous and empowers the user to create a live stream video app. It Is compatible with any desktop and mobile app. The user can easily watch the stream and share it with others on social media. One can have a full panel control to edit, filter, and do lots more. The script can be cloned easily with a live stream script. It has transaction options for all the viewers. And this helps the businessman to earn money through the paid version of the video stream for various events.
5. Castasy Video Streaming App
The App is famous and can be used for multiple purposes, we can clone this type of template, and yes. It is very easy and convenient. Anyone can use cactasy so bring a huge new set of video streaming apps in the market with the best features that can be very unique and different for everyone. To clone this app contact our experts now BSETEC
6. Gentle Ninja Meerkat Turnkey App Script
This app script is making a special noise. Yet very interesting, it can be cloned with our free open source code online. The app has features that allow the user to log in via social media, live re-streaming, scheduling, follow up, get the entire management admin panel, and much more. One can just start using our free live streaming script and build the most exclusive video app in less time.
How Live Streaming has Helped Small Businesses to Grow?
7. Bigo Live App
The Bigo live app can be cloned easily with the help of a Streambiz, a very useful and smart option that allows the end-user to log in, like, follow and share. Play interesting games and get the best options to earn money online. This is way different than other applications like zoom or periscope. Contact our experts for more details.
Live Video Streaming App can Be for Live Events or Individuals to Use it for Fun and also Earn Money Online.
Conclusion:
Ask us all about live video streaming app cloning, free advice with 100% technical support, free download at https://www.bsetec.com/periscope-clone/
#bsetec #bigolive #clonescripts #livestreamingscript #live video #streaming #apps #live video streaming app #create a live streaming video #live streaming php script #periscopeclone #streambiz