Vue.js Trumbowyg WYSIWYG Editor: A Lightweight and Flexible Tool

There are the Following The simple About Vue JS Lightweight Trumbowyg WYSIWYG editor component Full Information With Example and source code.

As I will cover this Post with live Working example to develop trumbowyg cleanpaste Examples, so the Vuejs bootstrap textarea for this example is following below.

Step 1: Include JS libs

https://unpkg.com/jquery@3.2.1/dist/jquery.min.js
https://cdn.jsdelivr.net/npm/vue-trumbowyg
https://cdn.jsdelivr.net/npm/vue@2
https://unpkg.com/trumbowyg@2.15.2/dist/ui/trumbowyg.min.css
https://unpkg.com/trumbowyg@2.15.2/dist/trumbowyg.min.js

HTML Part

<div id="app">
<h3>
Vue Trumbowyg demo
</h3>
<trumbowyg v-model="content" :config="config" class="editor" @tbw-blur="onBlur"></trumbowyg>
<pre>
{{content}}
</pre>
</div>

javascript Part

Vue.component('Trumbowyg', VueTrumbowyg.default);

new Vue({
el: '#app',
data: {
content: '<h1>YEAH It works!!!</h1>',
config: {
}
},
mounted() {
console.log('app mounted')
},
methods: {
onBlur(e) {
console.log("blur", e)
}
}
});

style CSS Part

body {
font-family: Verdana, Arial, sans-sarif;
background: #f8f8f8
}

pre {
background: #ddd;
padding: 10px
}

I hope you get an idea about Vue JS Lightweight Trumbowyg WYSIWYG editor component.

• This blog post was originally published at: https://www.pakainfo.com

#vue #vuejs