Django Mezzanine の TinyMCE で未修正内容がある時にページを移動しようとするとき警告を出す
2022-08-06 11:09 (1年前)
ytyng
tinyMCE のバージョンが 4 の場合、tinyMCE.init の setup オプションで、onChange イベントを追加できます。
templates/admin/blog/blogpost/change_form.html
{% extends 'admin/change_form.html' %}
{% block content %}
{{ block.super }}
<script>
/// ページ移動確認
window.addEventListener('beforeunload', (event) => {
/// window.tinyMCEContentChanged は tinymce_setup.js で定義されており、
/// エディタの内容変更時に true になる。
if (tinyMCEContentChanged) {
event.returnValue = 'ページを移動してよろしいですか? 未保存の内容は失われます。';
}
});
/// 送信ボタンをクリックした時は移動警告を出さない
$('input[type="submit"]').click(function() {
tinyMCEContentChanged = false;
});
</script>
{% endblock %}
static/js/tinymce_setup.js
var language_codes = {
'ar': 'ar',
...
...
};
...
...
// エディタの変更イベントで True になる。
// ページ移動時に警告を出す
let tinyMCEContentChanged = false;
jQuery(function ($) {
if (typeof tinyMCE != 'undefined') {
tinyMCE.init({
selector: "textarea.mceEditor",
height: '500px',
...
...
// setup を追加
// https://www.tiny.cloud/docs-4x/configure/integration-and-setup/
setup: function (editor) {
editor.on('change', function (e) {
console.log('tinyMCEOnChange');
tinyMCEContentChanged = true;
});
}
});
}
});
コメント