CODEWITHSUNDEEP
javascriptjqueryhtmlsummernote
Justin
Justin

Reputation: 2530

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

enter image description here

Upvotes: 17

Views: 64694

Answers (5)

Pooya Mobasher Behrooz
Pooya Mobasher Behrooz

Reputation: 1292

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

Upvotes: 54

Naveen R
Naveen R

Reputation: 61

This works best for me

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

Upvotes: 0

Step
Step

Reputation: 314

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

Upvotes: 27

Marcel Kohls
Marcel Kohls

Reputation: 1897

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

Upvotes: 2

Abhinav
Abhinav

Reputation: 8168

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

Upvotes: 3

Related Questions