(Summernote) - jQuery 和 Prototype 框架的兼容性

Posted 2023-03-22

【中文标题】(Summernote) - jQuery 和 Prototype 框架的兼容性

【英文标题】：(Summernote) - jQuery and Prototype framework compatibility

【发布时间】：2016-05-20 17:22:46

【问题描述】：

我正在尝试在使用 Prototype 框架的现有项目中集成 WYSIWYG 编辑器。项目必须继续使用原型，并且所见即所得编辑器必须有自己的 javascript 图像上传器（从文件上传）。我不能使用 php 上传器。

所以，我尝试将 Summernote 集成到我的项目中，因为它使用 jQuery，我与 Prototype 发生冲突。为了使它工作，我正在使用：

jQuery.noConflict(); jQuery(document).ready(function($) $('#summernote').summernote(); );.

编辑器加载正常并且工作正常，但是当我将鼠标放在图标上时它们消失了。

我认为问题不在于初始化，而在于 Summernote.js 代码本身。我尝试将 noConflict 功能应用于该代码，但仍然无法正常工作。

有人可以帮助解决这个问题吗？或者可以推荐其他好的开源编辑器？

P.S1：安装已经完成：http://summernote.org/getting-started/

P.S2：我已经尝试了几种 noConflict 变体，如下面的链接所述。 https://api.jquery.com/jquery.noconflict/

【问题讨论】：

看看我的其他答案之一***.com/a/33290106/341491 - Summernote 正在触发那些使Element#hide() 方法触发的元素的事件（可能是hide）。您需要调整源代码以更改事件名称。

感谢您的建议。我也考虑过，所以我尝试在summernote.js文件中的每个hide调用中一一删除和测试，不幸的是我没有得到任何提示。现在我正在测试每个鼠标事件。

【参考方案1】：

它来自引导工具提示，与原型冲突。

在工具提示触发后添加此事件： 来源：https://github.com/twbs/bootstrap/issues/6921#issuecomment-45125243

jQuery(".YOURELEMENTS").on("hidden.bs.tooltip", function()  
    jQuery(this).css("display", "");
);

这个css规则可以避免闪烁：

.YOURELEMENTS
    display: inline-block !important;

根据您的需要调整元素名称。 对于css规则，“inline-block”也可以改为“block”

【讨论】：

Summernote without Bootstrap (Summernote Lite) 在使用jQuery.noConflict() 时仍然存在冲突。 jsfiddle.net/0pz1bmt5