为什么这个 Javascript 函数会重写一个 div 而不是另一个的 innerHTML？

Question

我正在使用 NodeJS 查询 MySQL 数据库以获取日记的单个条目，但结果不会同时发送到分配的 div 中。我的中心栏中有一个 iFrame，专用于两个 div（一个在任何给定时间隐藏）。一个 div 是日记条目的只读页面，另一个包含 TinyMCE 富文本编辑器。我在左栏中有用于在视图之间切换的按钮。

富文本编辑器在页面初始加载时正确加载，但在我使用日历导航时不会更新；只读的 innerHTML 在我导航时会正确更新。 calDt[] 是一个保存日期的数组。 calDt[0] 是活动日期，而 calDt[1] 包含用于在不更改条目的情况下导航日历的虚拟日期。

app.js:

    app.get('/getdata/:dateday', (req, res) => {
        let sql = `SELECT entry FROM main where dateID ='${req.params.dateday}'`
        let query = db.query(sql, (err, results) => {
            if(err) {
                throw err 
            }
            res.send(JSON.stringify(results));
        })
    })

中-left.ejs

   <button style= "height:22px"; type="button" onclick="readDivHere()">Lock</button>
   <button style= "height:22px"; type="button" onclick="editDivHere()">Edit</button></div>

    <script> // the Lock button brings us back to the completed entry in the middle stuff
        function readDivHere() {
        document.getElementById('frame1').contentWindow.readDivHere();
        document.getElementById('frame1').scrolling = "yes";
    }
    </script>

    <script> // the Edit button will bring tinymce rich-text editor to the middle stuff
        function editDivHere() {
        document.getElementById('frame1').contentWindow.editDivHere();
        document.getElementById('frame1').scrolling = "no";
    }
    </script>

中-center.ejs

<iframe id="frame1" class="entryon" src="" frameborder="0px"></iframe>
<script>
    document.getElementById("frame1").src = "iframe";
</script>

iframe.ejs


    <div id="readDiv" class="here" style="display: block; background: white; padding-top: 0px; padding-left: 10px; padding-right: 8px; min-height: 810px; width: 967px;"><%- include ('entry'); %></div>
    <div id="editDiv" class="here" style="display: none; padding: 0px;" ><%- include ('editPage'); %></div>


    <script> //function that switches from rich-text editor back to real entry
        function readDivHere() { // here we run a function to update text of read-only entry
        document.getElementById("readDiv").style.display="block";
        document.getElementById("editDiv").style.display="none";
        }
    </script>
    <script> //function that switches from read-only entry to rich-text editor
        function editDivHere() {
        document.getElementById("readDiv").style.display="none";
        document.getElementById("editDiv").style.display="block";
        }
    </script>

entry.ejs

<div id="readOnlyEntry"></div>

<script>
        // load the active entry into the middle column for proper reading
        function loadEntry(p) {
                var x = parent.calDt[1].getFullYear();
                var y = parent.calDt[1].getMonth();
                y = y + 1;
                if (y < 10) {
                    y = "0" + y;
                };
                if (p < 10) {
                    p = "0" + p;
                }
                var newDate = x + "" + y + "" + p;     // p is a date formatted like 20210808
                var xhttp = new XMLHttpRequest();
                xhttp.onreadystatechange = function() {
                    const text = this.responseText;
                    const obj = JSON.parse(text);
                    document.getElementById("readOnlyEntry").innerHTML = obj[0].entry;
                    document.getElementById("richTextEd").innerHTML = obj[0].entry; // doesn't work!
                }
            xhttp.open("GET", "../getdata/" + newDate, true);
            xhttp.send();
        }
</script> 
    
<script>
    // rich-text editor populates correctly on load
    loadEntry(parent.calDt[0].getDate());
</script>

editPage.ejs

<%- include ('tinymce'); %>

<form method="POST" action="../result" enctype="multipart/form-data">
        <textarea name="content" id="richTextEd">Here's the default text.</textarea>
</form>

日历-clicker.ejs

var p = x.innerHTML; // get the value of the calendar cell text (i.e. day of the month)
p = p.match(/\>(.*)\</)[1];
var d = calDt[1].getFullYear(); // what year is the calendar referencing?
var q = calDt[1].getMonth();  // what month is the calendar referencing? 
q = q + 1; // compensate for javascript's weird month offset
calDt[0] = new Date(q + "/" + p + "/" + d); // assign a new global date variable
calDt[1] = calDt[0]; // temporarily reset navigation date to active date
document.getElementById('frame1').contentWindow.loadEntry(p);

失败是否与将 innerHTML 分配给不同的 .ejs 有关？如果我将表单放入与只读条目相同的 div，当我导航时表单仍然无法更新。

Answer 1

解决了。在 entry.ejs 中，我替换了...

document.getElementById("richTextEd").innerHTML = obj[0].entry;

与

tinymce.get("richTextEd").setContent(obj[0].entry);

https://www.tiny.cloud/blog/how-to-get-content-and-set-content-in-tinymce/

为什么这个 Javascript 函数会重写一个 div 而不是另一个的 innerHTML？

Why does this Javascript function rewrite the innerHTML of one div but not the other?

mysql

iframe

tinymce

innerhtml

node.js