CK 编辑器不会将数据发送到 Firebase 数据库（空字段）

Question

I have created a Web Form to upload data(Rich Text) to Firebase Database,我创建了一个 Web 表单来将数据（富文本）上传到 Firebase 数据库，

But sometimes data is entered to Database and other Times the Fields in the Database is completely Empty.但有时数据被输入到数据库中，有时数据库中的字段是完全空的。 Can Anyone suggest me the solution as I am new to Web Dev.任何人都可以向我建议解决方案，因为我是 Web Dev 的新手。

Here is my WebForm Code (Rich Text is only in Description):这是我的 WebForm 代码（富文本仅在描述中）：

  <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Firebase</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<body>
    <div class="row">
        <div class="container">
            <h2>Job Adder</h2>
            <div class="alert alert-success success-message" style="display:none;">Form submitted successfully.</div>
            <form id="contactForm">

                <div class="form-group">
                    <label for="exampleFullName">Enter Date :</label>
                    <input type="text" class="form-control fullname" id="exampleFullName" placeholder="Enter Date here" required>
                </div>

                 <div class="form-group">
                    <label for="post">Enter Post :</label>
                    <input type="text" class="form-control post" id="post" placeholder="Enter Job Post here" required>
                </div>


                <div class="form-group">
                    <label for="exampleEmail">Title :</label>
                    <input type="text" class="form-control email" id="exampleEmail" placeholder="Enter Title here" required>
                </div>


                <div class="form-group">
                 <script src="ckeditor/ckeditor.js" type="text/javascript"></script>
                    <label for="exampleSubject">Description :</label>


                    <textarea type="text" class="ckeditor" id="exampleSubject" placeholder="Enter description here" cols="0" rows="10" required>
                      </textarea>
                </div>

                <div class="form-group">
                    <label for="salary">Salary :</label>
                    <input type = "text" class="form-control salary" id="salary" placeholder="Enter salary here"  required>
                </div>






                <div class="form-group">
                    <label for="exampleMessage">Apply here:</label>
                    <input type = "text" class="form-control message" id="exampleMessage" placeholder="Enter direct link here"  required>
                </div>
                <button type="submit" class="btn btn-primary">Submit</button>
            </form>
        </div>  
    </div>
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
    <script src="https://www.gstatic.com/firebasejs/7.6.1/firebase-app.js"></script>
    <script src="https://www.gstatic.com/firebasejs/7.6.1/firebase-database.js"></script>
    <script src="js/main.js"></script>
</body>
</html>

Here is my Javascript code :这是我的 Javascript 代码：

     var firebaseConfig = {
    apiKey: "AIzaoYRpaXDGoM",
    authDomain: "web-adder.firebaseapp.com",
    databaseURL: "https://web-adder.firebaseio.com",
    projectId: "web-adder",
    storageBucket: "web-adder.appspot.com",
    messagingSenderId: "1049",
    appId: "1:1066659099549:web:2162a723574",
    measurementId: "G-4PFY"
  };
  // Initialize Firebase
  firebase.initializeApp(firebaseConfig);


 // Reference messages collection
var messagesRef = firebase.database().ref('WebView Test');

// .child("Categories").child("Academic Jobs");

$('#contactForm').submit(function(e) {
    e.preventDefault();

    var newMessageRef = messagesRef.push();
    newMessageRef.set({
        date: $('.fullname').val(),
        post: $('.post').val(),
        title: $('.email').val(),
        description: $('.ckeditor').val(),
        salary: $('.salary').val(),
        link: $('.message').val()
    });

    $('.success-message').show();

    $('#contactForm')[0].reset();


// CKEDITOR.instances.msg.setData('');

    window.location.reload();
});

Answer 1

For other people who come to this page, I found a solution: the editor (CK, or Quill) do not behave the same way as other inputs, so the change cannot be handled on the same way.对于访问此页面的其他人，我找到了一个解决方案：编辑器（CK 或 Quill）的行为方式与其他输入不同，因此无法以相同方式处理更改。

For any input (input field or select) I used :对于我使用的任何输入（输入字段或选择）：

onChange = (e) => {
    this.setState({
        [e.target.name]: e.target.value
    });
};

For the editor, I added:对于编辑器，我补充说：

onHandleChange = (e) => {
    this.setState({
        profile : e
    });
};

"profile" is the name of my state, replace by "body" or "description" if it is your case. “profile”是我所在州的名称，如果是您的情况，请替换为“body”或“description”。

CK 编辑器不会将数据发送到 Firebase 数据库（空字段）

问题描述

1 个解决方案

解决方案1
1 2020-08-26 09:48:39

CK 编辑器不会将数据发送到 Firebase 数据库（空字段）

问题描述

1 个解决方案

解决方案1 1 2020-08-26 09:48:39

解决方案1
1 2020-08-26 09:48:39