SummerNote insertHtml

Question

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>");

Answer 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);

Answer 2

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

Answer 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());
                }
            },

Answer 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>');