SummerNote插入HTML

Question

我有一个“模板”选择器，可以让人们更改当前文本区域的“text/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>");

- Justin

---

不要使用 .code，尝试使用 .html。http://api.jquery.com/html/ - Des Horsley

我确实尝试过那个。但它什么也没做……还有其他想法吗？ - Justin

确保$('.dialogMessageArea')返回一个元素，并确保data.results[0].template包含有效的HTML代码。 - Des Horsley

刚刚测试了一下，还是没有任何反应... 我已经更新了问题并附上了截图。 - Justin

Answer 1

根据API（https://summernote.org/getting-started/#get--set-code），要更改所见即所得编辑器的值，您应该使用Summernote函数，并将“code”字符串作为第一个参数，将您的内容作为第二个参数。

像这样：

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

- Pooya Mobasher Behrooz

---

它没有工作，我想在编辑表单上显示从jQuery表中获取的数据并在页面上显示它。在按钮点击时，我获得每个字段上的所有数据，但只有在summernote框中我没有获得数据，但是当我使用普通文本区域时，我可以在框中获得它。我应该怎么做才能在summernote框中获取数据？ - heySushil

它按预期工作，但由于某些原因，我的整个编辑页面的样式会变得扭曲，就好像来自夏日笔记内容内部的CSS影响了包含页面。 - Shashank Rawat

Answer 2

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

- Step

---

传奇！运行得很好。 - chopstik

如果HTML跨越多行并包含单/双引号，该怎么办？ - FrenkyB

@FrenkyB：使用反引号。 - Viral Patel

警告：使用“pasteHTML”会添加一些额外的<p>标签，这会破坏您原本的HTML。请改用“code”。 - Channel

这很完美，但在我的情况下它不起作用，我想在编辑表单上显示从jquery表中获取的数据并在页面上显示它。在按钮点击时，我会在每个字段上获取所有数据，但只有在summernote框上，我没有得到数据，但当我使用普通的文本区域时，我可以在框中得到数据。我应该怎么做才能在summernote框上获取数据？名称字段值应该如何传递到summernote框上。我尝试了.code但没有成功。我做错了什么？ - heySushil

Answer 3

这应该是有效的

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

注意:

code()函数内的HTML必须是字符串。如果您试图插入无效的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());
                }
            },

- Abhinav

Answer 4

如果您不想替换笔记中的所有内容，您可以使用execCommand WebAPI中的insertHTML命令。由于summernote基于execCommand WebAPI，我们可以直接使用其资源。因此，将HTML内容添加到summernote的最简单方法是使用insertHtml参数，如下所示：

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

- Marcel Kohls

---

我在返回内容到summernote js上使用了这个，但它给我一个来自summernote js本身的toUpperCase错误。 - Rabb-bit

这似乎是不可预测的。有时它可以正常工作并返回 true（因为它是一个受支持的特性），但有时它会返回 false（表明它不是一个受支持的特性）。一开始它对我起作用，但突然间就停止了。如果 Summernote 是基于 execCommand API 构建的，那么这似乎很不寻常。 - Jaden Baptista

Answer 5

这对我来说效果最好

var html = '<h2>你好，世界！</h2>'; $('#divID').summernote('code', html);

- Naveen R