SummerNote insertHtml

问题:

I have a 'template' selector, that enables people to change the 'text/html' of the current textarea.

So when they change templates, I need to update the Summernote HTML. I see the method for (insertText), but it doesn't work for HTML.

Is there a solution for HTML version?

I thought there was a .code() solution, but doesn't seem to be working? I receive an error, "Not a function"

Any help would be greatly appreciated!

$('.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>");

回答1:

According to the api (https://summernote.org/getting-started/#get--set-code),

to change wysiwyg's value you should use summernote function with 'code' string as first parameter and your content as second one

Like this :

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

回答2:

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

回答3:

This should actually work

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

NOTE:

HTML inside code() function has to be a string. I don't think it will work if you are trying to insert an invalid HTML contents.

Try doing this:

Create a hidden div and then in your AJAX success method try to insert the datas from the AJAX and then retrieve it using jquery's text() function.

<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:

If you don't want to replace all the content from the note, you can use the insertHTML command from the execCommand WebAPI.

As summernote is based on the execCommand WebAPI, we can use directly its resources. So the most simple way to add a HTML content to the summernote can be using the insertHtml parameter like this:

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

回答5:

This works best for me

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