在 ASP.Net 中使用 tinymce 内联 div InnerHtml

Posted 2023-05-07

【中文标题】在 ASP.Net 中使用 tinymce 内联 div InnerHtml

【英文标题】：Using tinymce inline div InnerHtml in ASP.Net

【发布时间】：2014-09-02 02:54:58

【问题描述】：

我正在尝试在 .net 页面中设置 tinymce 内联编辑，但我正在努力从 div 的 Innerhtml 中获取编辑后的文本。

<script src="../Scripts/Tiny4/tinymce.min.js"></script>
<script>
    tinymce.init(
        selector: "div.edit",
        theme: "modern",
        plugins: [
            ["advlist autolink link image lists charmap print preview hr anchor pagebreak spellchecker"],
            ["searchreplace wordcount visualblocks visualchars code fullscreen insertdatetime media nonbreaking"],
            ["save table contextmenu directionality emoticons template paste"]
        ],
        add_unload_trigger: false,
        schema: "html5",
        inline: true,
        toolbar: "undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image     | print preview media",
        statusbar: false
    );


</script> 

    <form id="form1" runat="server">
    <div>

        <div runat="server" ID="editdiv" class="edit">Original text</div>

        <asp:Button ID="Button1" runat="server" Text="Button" OnClick="Button1_Click" />

    </div>
    </form>

ASP 代码隐藏：

protected void Button1_Click(object sender, EventArgs e)
    
        OleDbConnection conn = new OleDbConnection("Provider=Microsoft.Jet.OLEDB.4.0;Data Source=" + HttpContext.Current.Server.MapPath("/App_Data/tiny.mdb"));
        OleDbCommand cmd = new OleDbCommand("UPDATE [tinytest] SET [divtext] = @divtext WHERE ID = 34", conn);
        cmd.Parameters.AddWithValue("@divtext", editdiv.InnerHtml);
        cmd.CommandType = CommandType.Text;
        conn.Open();
        cmd.ExecuteNonQuery();
        conn.Close();
    

tinymce 编辑器按预期启动，但是当我尝试将 InnerHtml 发送到后面的代码时，我得到的只是原始文本而不是编辑后的版本。

【参考方案1】：

div 不是在 Web 表单中存储值的好地方。

如果框架从任何地方获取editdiv.InnerHtml 的值，它可能来自视图状态。至少，它肯定不是来自客户端 HTML。这是因为当页面回发到服务器时，无论 WebForms 试图让您怎么想，它仍然是一个普通的 HTML 表单发布。这意味着它的值来自 form 元素，only 来自form 元素。 HTML 页面内容不会发布到服务器。视图状态是，因为它是一个 base-64 编码的字符串，填充到页面上的 input type="hidden" 中。

你可以做的是创建你自己的隐藏输入：

<asp:Hidden runat="server" id="editdivcontents" />

然后在您的客户端代码中，当您更改 div 的内容时，您将更新生成的 input type="hidden" 的值。然后该值将被发送回服务器并可以访问：

cmd.Parameters.AddWithValue("@divtext", editdivcontents.Text);

我不确定如何在div 更改时更新隐藏的输入元素，因为我不熟悉 TinyMCE。 （虽然我认为它可以通过响应 DOM 中的事件在该工具之外手动完成。）但最终这就是你需要做的，因为只有表单元素值而不是 DOM 内容是发布到服务器。

【讨论】：

感谢@David，这是有道理的。我使用 jquery onchange 来更新隐藏的输入。 $('.edit').bind("DOMSubtreeModified",function() $('input[id="editdivcontents"]').val($('.edit').html()); );