介绍
jquery.dirtyforms.helpers.ckeditor 是一个 jQuery 插件，它提供了帮助处理 CKEditor 编辑器的表单修改检测。在前端开发中，我们通常需要检查用户是否更改了表单数据，以提示他们保存或离开页面时进行确认。此插件可以使这个过程更加简单和方便。
安装
你可以通过 npm 命令行工具来安装 jquery.dirtyforms.helpers.ckeditor：
npm install jquery.dirtyforms.helpers.ckeditor --save
同时，在你的项目中也需要引入 jQuery 的库和 CKEditor 的库。
<script src="https://cdn.ckeditor.com/ckeditor5/33.1.0/classic/ckeditor.js"></script> <script src="https://cdn.jsdelivr.net/npm/jquery"></script> <script src="node_modules/jquery.dirtyforms/helpers/jquery.dirtyforms.helpers.ckeditor.js"></script>
使用
jquery.dirtyforms.helpers.ckeditor 提供了一个名为 ckDirtyForms 的插件，你可以将其添加到你的 CKEditor 实例上来启用自动表单修改检测。
ClassicEditor.create( document.querySelector( '#editor' ), { plugins: [ ckDirtyForms ], toolbar: [ 'heading', '|', 'bold', 'italic', 'link' ] } )
当 CKEditor 实例被创建并加载完成后，jquery.dirtyforms.helpers.ckeditor 将会自动检测表单修改，并在用户试图关闭页面或导航离开当前页面时弹出提示框。
示例代码
-- -------------------- ---- ------- --------- ----- ------ ------ ----- ---------------- ----------------------------------------------------- ------- --------------------------------------------------- ------- ----------------------------------------------------------------------------- ------- -------------------------------------------------------------------------------------------- ------- ------ ----- ------------ --------- ------------- ----------------------- ------- ------------------------- ------- -------- --------------------- ----------------------- --------- -- - -------- - ------------ -- -------- - ---------- ---- ------- --------- ------ - - - -- --------- --------------- --------- ------- -------展开代码
上面的示例代码演示了如何在表单中使用 jquery.dirtyforms.helpers.ckeditor 插件。它创建了一个包含 CKEditor 编辑器的表单并将其添加到页面上。当用户修改表单数据并尝试关闭页面或导航离开当前页面时，将会弹出一个提示框来提醒用户保存更改。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/37792
