Created
May 10, 2018 22:23
-
-
Save revelt/cb66c852bb41a289af3c6c3281cd85c1 to your computer and use it in GitHub Desktop.
string-strip-html tester web app on VUE.JS
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en" dir="ltr"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>strip HTML</title> | |
| <style type="text/css"> | |
| * { | |
| padding: 0; | |
| margin: 0; | |
| } | |
| .w50p { | |
| width: 49%; | |
| height: 100%; | |
| } | |
| .fl { | |
| float: left; | |
| } | |
| .fr { | |
| float: right; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div id="app"> | |
| <my-textarea class="w50p fl" rows="50" v-model="text1" placeholder="Type Foo here"></my-textarea> | |
| <my-textarea class="w50p fr" rows="50" v-model="text2"></my-textarea> | |
| </div> | |
| <script src="https://npmcdn.com/vue/dist/vue.js"></script> | |
| <script src="https://unpkg.com/string-strip-html"></script> | |
| <script> | |
| window.Event = new Vue(); | |
| Vue.component('my-textarea', { | |
| template: ` | |
| <textarea :value="value" | |
| @input="updateValue($event.target.value)" | |
| :placeholder="placeholder" | |
| ref="input" | |
| > | |
| </textarea>`, | |
| props: { | |
| value: { default: '' }, | |
| placeholder: { default: '' } | |
| }, | |
| methods: { | |
| updateValue(value) { | |
| // adding v-model support to this reusable component | |
| this.$refs.input.value = value; | |
| this.$emit('input', value); | |
| // Firing an event via Event bus to notify sibling reusable component | |
| Event.$emit('valueChanged', this._uid, value); | |
| } | |
| }, | |
| mounted() { | |
| Event.$on('valueChanged', (id, value) => { | |
| if (id != this._uid) { | |
| // if (value === 'Foo') { | |
| // this.$refs.input.value = 'Bar'; | |
| // } | |
| this.$refs.input.value = stripHtml(value) | |
| } | |
| }); | |
| } | |
| }); | |
| new Vue({ | |
| el: '#app', | |
| data() { | |
| return { | |
| text1: '', | |
| text2: '' | |
| } | |
| } | |
| }); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment