ankurk91 / vue-trumbowyg

Vue.js component for Trumbowyg WYSIWYG editor :memo:
https://ankurk91.github.io/vue-trumbowyg/
MIT License
236 stars 35 forks source link

How to set the html form name attribute to the textarea for Backend processing #10

Closed hasentopf closed 6 years ago

hasentopf commented 6 years ago

I'm submitting a ... (check one with "x")

[ ] Bug report => search github for a similar issue or PR before submitting
[ ] Feature request
[ X ] Other, please describe

Tell about your platform

Current behavior I'm using your Component in a Laravel PHP app and struggling with the name attribute for the submitted textarea.

Minimal reproduction of the problem with instructions In my current component I use a prop to set the textarea[name] and the v-model to sync the trumbowyg content:

<template>
    <div class="trumbowygComponent">
        <trumbowyg :config="config" v-model="content" class="form-control"></trumbowyg>
        <textarea :name="targetInput" v-model="content" class="hidden"></textarea>
    </div>
</template>

<script>
    // Import this component
    import trumbowyg from 'vue-trumbowyg';

    // Import editor css
    import 'trumbowyg/dist/ui/trumbowyg.css';

    export default {
        props: {
            targetInput: {
                type: String,
                default: 'content'
            }
        },
        data () {
            return {
                content: '',
                config:{
                    lang: 'de'
                }
            }
        },
        components: {
            trumbowyg
        }
    }
</script>

Expected behavior A "name" parameter for your component, which add this to the trumbowyg-textarea: <trumbowyg :config="config" v-model="content" class="form-control" :name="targetInput"></trumbowyg> <textarea name="content_for_laravel" class="form-control trumbowyg-textarea" tabindex="-1" style="height: 260px;"></textarea>

ankurk91 commented 6 years ago

You can check this JSFiddle https://jsfiddle.net/d6pr6fop/1/

Actually the component will render textarea for you. You no need to add this in your html.

<trumbowyg name="textarea-name-goes-here" v-model="content" :config="config" class="editor"></trumbowyg>
hasentopf commented 6 years ago

Thanks! So simple! Great!