SummerNote insertHtml答案

【问题标题】：SummerNote insertHtmlSummerNote insertHtml
【发布时间】：2016-03-14 06:17:33
【问题描述】：

我有一个“模板”选择器，可以让人们更改当前文本区域的“文本/html”。

所以当他们更改模板时，我需要更新 Summernote HTML。我看到了 (insertText) 的方法，但它不适用于 HTML。

HTML版有解决办法吗？

我认为有一个 .code() 解决方案，但似乎不起作用？我收到一个错误“不是函数”

任何帮助将不胜感激！

$('.dialogMessageArea').summernote({
            height:'230px',
            focus:true,
            toolbar: [
                ['style', ['bold', 'italic', 'underline', 'clear']],
                ['fontsize', ['fontsize']],
                ['para', ['ul', 'ol', 'paragraph']],
                ['table', ['table']],
                ['misc', ['fullscreen','undo','redo']]
            ]
        });

        $(document).on('change', '.messageTemplate', function() {
            var templateId = $(this).selected().attr('value');
            if(templateId) {
                $.ajax({
                    type: "POST",
                    dataType: "json",
                    url: '/cont/templates/GetTemplate',
                    data: {'templateId': templateId},
                    success: function (data) {
                        $('.subjectMessage').val(data.results[0].subject);
                        if(data.results[0].template) {
                            $('.dialogMessageArea').code(data.results[0].template);
                        }
                    },
                    error: function () {
                        alert('We were not able to get your template');
                    }
                });
            }
        });

console.log($('.dialogMessageArea'));
console.log("<b>Welcome</b><h3>hello world</h3>");

【问题讨论】：

而不是.code，试试.html api.jquery.com/html
是的，我确实尝试过。它什么也没做……还有其他想法吗？
确保$('.dialogMessageArea')返回一个元素，并确保data.results[0].template包含有效的html？
刚刚测试过，还是什么都没有……用截图更新了问题。

标签： javascript jquery html summernote

【解决方案1】：

根据api（https://summernote.org/getting-started/#get--set-code），

要更改所见即所得的值，您应该使用 Summernote 函数，将“代码”字符串作为第一个参数，将内容作为第二个参数

像这样：

$('.dialogMessageArea').summernote('code', data.results[0].template);

【讨论】：

它不起作用，我想在编辑表单上显示从 jquery 表中获取的数据并将其显示在页面上。单击按钮时，我会在每个字段上获得所有数据，但仅在summernote 框中我没有获得数据，但是当我使用普通文本区域时，我会在框上获得它。我应该怎么做才能获取summernote box上的数据？
它按预期工作，但由于某种原因，我的整体编辑页面的样式变得扭曲，好像夏季笔记内容中的 CSS 正在影响包含页面

【解决方案2】：

.summernote('pasteHTML', '<b>inserted html</b> ');

【讨论】：

传奇！辛苦了。
如果 HTML 分多行并且包含单/双引号怎么办？
@FrenkyB ：使用反引号。
警告，使用 'pasteHTML' 添加一些额外的
会弄乱你原来的 HTML。请改用“代码”。
这很完美，但在我的情况下不起作用，我想在编辑表单上显示从 jquery 表中获取的数据并将其显示在页面上。单击按钮时，我会在每个字段上获得所有数据，但仅在summernote 框中我没有获得数据，但是当我使用普通文本区域时，我会在框上获得它。我应该怎么做才能获取summernote box上的数据？名称字段值应如何在summernote 框中传递。我尝试了 .code 但没有成功。我做错了什么？

【解决方案3】：

这应该确实有效

$('.dialogMessageArea').code('some value you want');

注意：

code() 函数中的 HTML 必须是字符串。如果您尝试插入 invalid HTML 内容，我认为它不会起作用。

尝试这样做：

创建一个隐藏的 div，然后在您的 AJAX success 方法中尝试从 AJAX 插入数据，然后使用 jquery 的 text() 函数检索它。

<div style="display:none;" id="hidden_div">


            success: function (data) {
                $('.subjectMessage').val(data.results[0].subject);
                if(data.results[0].template) {
                    $('#hidden_div').html(data.results[0].template);
                    $('.dialogMessageArea').code($('#hidden_div').text());
                }
            },

【讨论】：

【解决方案4】：

如果您不想替换笔记中的所有内容，可以使用 execCommand WebAPI 中的 insertHTML 命令。

由于summernote基于execCommand WebAPI，我们可以直接使用它的资源。因此，将 HTML 内容添加到 Summernote 的最简单方法是使用 insertHtml 参数，如下所示：

document.execCommand('insertHtml', null, '<p>My text <span style="color:red;">here</span></p>');

【讨论】：

我在向summernote js返回内容时使用了这个，给我一个来自summernote js本身的toUpperCase错误
这似乎是不可预测的。有时它会工作并返回 true（因为它是受支持的功能），但有时它会返回 false（表示它不是受支持的功能）。起初它对我有用，但它突然停止工作。如果 Summernote 是基于 execCommand API 构建的，这似乎很不寻常。

【解决方案5】：

这对我最有效

var html = '<h2>Hello World!!</h2>'; $('#divID').summernote('code', html);

【讨论】：