Meteor 和 Semantic-ui 上的 Summernote 错误答案

【问题标题】：Summernote error on Meteor and Semantic-uiMeteor 和 Semantic-ui 上的 Summernote 错误
【发布时间】：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,
    });
});

});

【问题讨论】：

标签： javascript jquery meteor semantic-ui summernote

【解决方案1】：

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

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

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

2016 年 1 月 13 日编辑

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

【讨论】：