如何将数据从 WYSIWYG 发送到数据库 (Vue.js)

Posted 2023-02-16

【中文标题】如何将数据从 WYSIWYG 发送到数据库 (Vue.js)

【英文标题】：How do I send data from a WYSIWYG to a database (Vue.js)

【发布时间】：2021-05-07 21:58:16

【问题描述】：

我刚开始使用 Vue2Editor，目的是替换我用来将文本和图像数据发送到 Firebase 数据库的许多表单。 我的问题是我无法让它添加在编辑器中输入的数据。

使用表单时，我只需将事件处理程序附加到表单本身并创建一个允许传输的函数。

例子：

<form @submit.prevent="addText">
  <label for="fname">First name:</label>
  <input type="text" id="fname" name="fname" v-model="fname">
</form>
<button type="submit" variant="success">Save</button>

但是当使用 Vue2Editor 时，我没有得到任何表单标签。 我刚刚得到一个“vue-editor”标签。我尝试在此标记内添加事件处理程序，但没有任何反应。 我没有收到任何错误，但数据在提交时并未传输到数据库。

这是代码：

<template>

<div class="container">

  <div class="text_editor">

  <h2>Add new content</h2>

  <vue-editor @submit.prevent="addText" v-model="textblock" />

  <button type="submit" class="textblock_btn" variant="success">Save</button>

  </div>

</div>

</template>


<script>

import db from '@/firebase/init'

import Vue from "vue";

import Vue2Editor from "vue2-editor";

Vue.use(Vue2Editor);

export default 

  name: 'textblock',

  data () 

    return 

      textblock: null

    

  ,

      methods: 

        addText()

            db.collection('textblock').add(

                textblock: this.textblock

            ).then(() => 

                this.$router.push( name: 'Index' )

            ).catch(err => 

                console.log(err)

            )

        

    



</script>

【参考方案1】：

由于所见即所得编辑器的数据绑定到v-model 属性，因此您仍然可以将组件包装在表单中。

<form @submit.prevent="addText">
    <div class="text_editor">

        <h2>Add new content</h2>

        <vue-editor v-model="textblock" />

        <button type="submit" class="textblock_btn" variant="success">Save</button>

    </div>
</form>

在addText 方法中，您现在拥有this.textblock，其中包含有关表单提交的适当数据。