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

Lentissimo

Rather than .code, try .html api.jquery.com/html – Gong

Yah I did try that. It just did nothing....any other thoughts? – Lentissimo

Make sure that $('.dialogMessageArea') returns an element, and make sure that data.results[0].template contains valid html? – Gong

Just tested, and still nothing... updated the question with a screenshot. – Lentissimo

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

Braze

it's not working, I want to show the data on edit form which I get from the jquery table and display it on the page. on button click, I get all data on each field but only on summernote box I didn't get the data but when I'm using normal textarea I get it on the box. What should I do to get the data on summernote box? – Florafloral

It is working as expected but due to some reason styling of my overall edit page is getting distorted as if CSS from inside summer note content is affecting containing page – Funkhouser

Answer 2

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

Lox

Legend! Worked a treat. – Maxinemaxiskirt

What if HTML is in several rows and contains single / double quotes? – Palladium

@Palladium : Use backticks. – Cressy

Warning, using 'pasteHTML' add some extra <p> that will mess up your original HTML. Use 'code' instead. – Unshroud

This is perfect but it's not working in my case, I want to show the data on edit form which I get from the jquery table and display it on the page. on button click, I get all data on each field but only on summernote box I didn't get the data but when I'm using normal textarea I get it on the box. What should I do to get the data on summernote box? How the name field value should pass on summernote box. I tried the .code but didn't succeded. What am I doing wrong? – Florafloral

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

Keelin

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

Salome

I used this on return content to summernote js, gives me an error of toUpperCase error from summernote js itself – Turrell

This seems to be unpredictable. Sometimes it works and returns true (because it's a supported feature), but sometimes it returns false (indicating it's not a supported feature). It worked for me at first, but it suddenly stopped working. That seems unusual if Summernote is build on the execCommand API. – Christly

Answer 5

This works best for me

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

Ergograph