How do you use Elrte Rich Text Area with Vue

185 views Asked by At

Note: I am new to Learning Vue

I am trying to use the html text area with Vue. All of the other input fields are working, but I am unable to make this work.

<!--Description begin-->
<div id="WYSIWYG_Editor_-_Full_Options" class="control-group row-fluid">
<div class="span3">
    <label class="control-label">Description</label>
</div>
<div class="span9">
    <div class="controls elrte-wrapper">
        <textarea id="description" rows="2" name="description" class="auto-resize" v-model="form.description"></textarea>
        <script>
            $('#descrtipion').elrte({
                lang: "en",
                styleWithCSS: false,
                height: 200,
                toolbar: 'maxi'
            });
        </script>
    </div>
   </div>
</div>
<!--Description end--> 

This is my Vue file:

new Vue({
    el: '#news',
    data: {
    form: new Form({
        heading: '',
        description: '',
    }),
    imageclass: '',
    errors: new Errors()
},

methods: {
    onSubmit() {
        this.form.submit('post', '/news/'+id);
    }
},

created(){
    axios.get('/news/'+id).then(response => [
        form.heading            = response.data.heading,
        form.description        = response.data.description,
    ]);
  }
});

I found several solutions online but nothing is working for me. Can someone help me to make this work.

0

There are 0 answers