Meteor 和 Semantic-ui 上的 Summernote 错误

Posted 2023-03-22

【中文标题】Meteor 和 Semantic-ui 上的 Summernote 错误

【英文标题】：Summernote error on Meteor and Semantic-ui

【发布时间】：2016-03-29 15:42:09

【问题描述】：

我在我的网站上使用了 summernote 包：summernote:summernote，除了插入图片、视频和链接的功能不起作用之外，一切都运行良好。

例子：

点击插入链接按钮（图片和视频相同）

出现设置链接的弹出窗口。

单击该弹出窗口的任意位置，它就消失了。

这是我的代码：

post_edit.html

<template name="postEdit">
<div class="ui segment">
    <form class="ui form">
        <h1 class="ui dividing header">Edit post</h1>
        <div class="field">
            <label>Title</label>
            <input type="text" id="title" name="title" value="title">
        </div>
        <label>Content</label>
        <div class="field" id="content" name="content">
            content
        </div>
        <button type="submit" class="ui orange button"><i class="edit icon"></i> Edit</button>
        <a class="negative ui button delete"><i class="remove icon"></i> Delete</a>
        <a class="ui button" href="pathFor 'postPage'"><i class="arrow left icon"></i> Back</a>
    </form>
</div>

post_edit.js

Template.postEdit.onRendered(function()
$(document).ready(function() 
    $('#content').summernote(
        height: 400,
        maxHeight:800,
        minHeight:250,
    );
);

);

【参考方案1】：

我自己在将 autoform-summernote 添加到我已经使用语义 UI 的项目时遇到了这个问题。问题是 Bootstrap 和 Semantic UI 的 $.modal() 方法之间存在冲突。请参阅以下链接以获取代码参考：

Summernote modal init Bootstrap's modal definition Semantic UI's modal definition

Summernote 期望模态方法是 Bootstrap 的，而是调用 Semantic UI 的模态方法。由于 modal 方法的实现方式不同，当您单击窗口中的任意位置时，modal 会立即关闭。

如果没有一些低级别的 hack，这两个包将会发生冲突，因为语义 UI 在您的项目中的任何 $('object') 上全局可用。如果您没有在站点的其他任何地方使用 Semantic UI 的模态方法，您可以禁用它，这将在这种情况下修复它。但是，这不是适合我的解决方案。相反，我正在寻找一种解决方案来删除 Summernote，或者至少是它对 Boostrap 的依赖。

2016 年 1 月 13 日编辑

我最终用另一个编辑器https://atmospherejs.com/gildaspk/autoform-medium 替换了summernote。它为我提供了我需要的功能，并且没有相互冲突的依赖关系。