引导 Summernote 重置/清除答案

【问题标题】：bootstrap Summernote reset/clear引导 Summernote 重置/清除
【发布时间】：2015-06-07 19:50:02
【问题描述】：

我想知道如何使用 jQuery 或 JavaScript 重置或清除引导 Summernote 所见即所得编辑器。

我试过下面的代码

$('#MyForm').delay(1000).resetForm(1000);

这个剂量重置了整个表单，除了带有 Summernote 的文本区域

$('#SummernoteText').reset();

SummernoteText 是 html 文本区域，但代码根本不做任何事情。

$('#SummernoteText').destroy();

上面似乎破坏了编辑器而不是清除编辑器。

有人能告诉我怎么做吗？

链接到 Summernote http://summernote.org/#/

【问题讨论】：

标签： javascript jquery twitter-bootstrap-3 wysiwyg summernote

【解决方案1】：

有点晚了，补充一下：

选项 1：

$('#SummernoteText').summernote('reset');

此解决方案仅在您的编辑器最初为空时才有效

这会将您的编辑器重置为其原始状态。这意味着，如果您使用任何数据对其进行初始化，则相同的数据将在重置时重新出现。

选项 2：

$('#SummernoteText').summernote('code', '<p><br></p>');

添加<p><br></p> 标签而不是简单的'' 的原因是summernote 编辑区域需要它来获得焦点。 (Reference)

【讨论】：

我了解 '

' 的可用性，但对我来说，@Raheel Hasan 解决方案效果更好（设置一个空字符串并随后聚焦）$input。 Summernote('代码', ''); $input.summernote({focus: true})

【解决方案2】：

对于 Summernote 0.8.1 版本，使用这个简单的代码：

$("#SummernoteText").summernote("reset");

【讨论】：

【解决方案3】：

$('#SummernoteText').code('');

【讨论】：

在 Summernote 0.8.1 中使用 $("#SummernoteText").summernote("reset");
@Pawel 实际使用 $("#SummernoteText").summernote('code', '');使用重置并禁用 Summernote 控件的其他部分，例如调整大小的幻灯片和下拉菜单

【解决方案4】：

您可以像这样在编辑器本身的工具栏中构建一个自定义按钮：

//first create the button
var clearAllButton = function (context)
{
    var ui = $.summernote.ui;

    // create button
    var button = ui.button({
        contents: '<b>x</b>',
        tooltip: 'Clear All',
        click: function()
        {
            $("#summernote_field").summernote('code', '');
            $("#summernote_field").summernote({focus: true});
        }
    });

    return button.render();
};

//now set the options to include it
$('#summernote_field').summernote({
    toolbar: [
    .
    .
    .
    .
    ['misc', ['clearAll']]
    ],

    buttons: {
        clearAll: clearAllButton
    },

});

【讨论】：

【解决方案5】：

这是用 Summernote 0.8.2 测试的。

如果你定义你的summernote元素为

<textarea id="your-text-area-id" name="your-text-area-name" ></textarea>
<div class="summernote" id="summer-note-text-id"></div>

然后你可以使用空白文本

$("#summer-note-text-id").summernote("code", "");

@naribo 的回答更详细地说明了要设置的值，而不仅仅是“”。

【讨论】：