Django、TinyMCE 字段序列化不一致

Posted 2023-05-09

【中文标题】Django、TinyMCE 字段序列化不一致

【英文标题】：Django, TinyMCE field serialization inconsistencies

【发布时间】：2018-03-14 21:19:04

【问题描述】：

在 Django 中，我有一个表单。 有一个表单域附加了 TinyMCE 编辑器。

我想检查表单是否已更改，如果已更改，则应显示弹出模式。 我通过在每个页面加载时运行的这段代码来实现这一点：

$($('my-form').each(function() 
    $(this).data('init') = $(this).serialize();
)
$(window).bind('beforeunload', custom_validator);
);

当然，custom_validator 函数也在同一个文件中：

function custom_validator() 
    $('my-form').each(function() 
        if ($(this).data('init') != $(this).serialize()) 
            return "Form has unsaved changes.";
        
    )

当页面加载时，数据('init') 也会使用 TinyMCE 字段进行序列化。如果 TinyMCE 字段包含多行，serialize() 用 '%0D%0A' 表示它们。这很好。 如果我想离开页面或者只是在更改表单后重新加载它，'beforeunload' 事件会触发 custom_validator 函数并阻止我这样做，这也很好。

现在，当我加载页面并且我没有对表单进行任何更改而只想离开页面时，问题就开始了，弹出窗口出现并警告我表单上有更改，即使我没有不要改变任何东西。

事实证明，如果我在 TinyMCE 字段上有多行，当页面加载时，data('init') 包含 '%0D%0A' 字符，但是当我在 'custom_validator' 函数中对表单进行序列化时不包括那些字符。 提交表单也没有任何问题。

任何想法为什么两个序列化器返回不同的序列化字符串？如果表单没有被触摸，应该是一样的。

【参考方案1】：

问题是 jQuery 没有正确序列化 TinyMCE 编辑器的内容。

对于这些分离的事件，即“load”和“beforeunload”，jQuery 的序列化方法返回不同内容的原因对我来说仍然是个谜。但基本上行为是 jQuery 的 serialize 方法被表单的输入字段的内容和附加的 TinyMCE 编辑器弄糊涂了。

像“TEXTAREA”字段的内容与附加的 TinyMCE 编辑器不同，“SPAN”元素的内联 TinyMCE 编辑器内容也可以有不同的内容。

我通过扩展 custom_validator 和匿名函数解决了这个问题，使其分别收集所有非 TinyMCE 字段和 TinyMCE 编辑器内容，分别序列化和比较它们。

这样我就可以避免烦人的浏览器模式弹出窗口的出现。