CODEWITHSUNDEEP
vue.jsvuejs2redactorredactor.js
Clinton Green
Clinton Green

Reputation: 9977

Using Vue with Redactor

I am using a v-model on Redactor. When I do this it returns "Event" not the actual data I'm looking for. Any ideas on how to return the correct data?

HTML

<div id="question-create-form">
  <textarea class="form-control question-create-editor" id="question_description" rows="3"></textarea>
</div>

JS

$('#question-create-form .question-create-editor').redactor({
    imageUpload:'/urlGoesHereBro/',
    plugins: ['video', 'imagemanager', 'counter', 'limiter'],
    buttonsHide:['html', 'formatting', 'deleted', 'indent', 'outdent', 'alignment', 'horizontalrule']
  });
  $('#question-create-form .redactor-editor').attr('v-model', 'questionDescription');

Upvotes: 1

Views: 443

Answers (1)

Roy J
Roy J

Reputation: 43899

Redactor appears to be a jQuery widget, which means it works by manipulating the DOM. Vue expects to control the DOM, which means the two are going to step on each others' toes unless you confine your (Redactor's) DOM manipulations to the lifecycle hooks of a wrapper component.

To make your Redactor component work with v-model, it will need to:

  1. accept a value prop
  2. emit an input event with the new value

Upvotes: 3

Related Questions