vue.js - 将 Vue 与编辑器一起使用

标签 vue.js vuejs2 redactor redactor.js

<分区>

我在 Redactor 上使用 v-model。当我这样做时,它返回“事件”而不是我正在寻找的实际数据。关于如何返回正确数据的任何想法?

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');

最佳答案

Redactor 似乎是一个 jQuery 小部件,这意味着它通过操纵 DOM 来工作。 Vue 期望控制 DOM,这意味着两者将踩到对方的脚趾除非您将(Redactor 的)DOM 操作限制在 wrapper component 的生命周期钩子(Hook)中。 .

制作您的 Redactor 组件 work with v-model ,它将需要:

  1. 接受一个属性
  2. 使用新值发出一个 input 事件

关于vue.js - 将 Vue 与编辑器一起使用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42986607/

相关文章:

javascript - Vue i18n - 如何在 i18n 组件选项中获取当前语言环境?

javascript - .html() 函数的 Jquery 替换不会尝试在 Redactor imperavi - Xss 漏洞上重写 html

jquery - 如何在单击时禁用图像编辑模式 - Redactor

javascript - vue中如何在localstorage中添加值

json - 如何使用 redactor.js 插入单引号?

javascript - 移动设备上的 MS Teams 选项卡中的身份验证

vue.js - vue js导航到带有问号的url

typescript - ` ' $props ' is declared but its value is never read.` 错误发生在 Vue3/TypeScript 项目中,而 '$props' 没有被显式使用

javascript - Nativescript-Vue MobileApp : Axios return status:null and data :""

javascript - 如何解决[Vue warn] : Avoid mutating a prop directly since the value will be overwritten on vue. js 2?