Rendering of HTML within <textarea> not working

[gosdenj]

Hello,

If I attempt to pre-populate a <textarea> that is under the control of summernote, anything that is in HTML format is not rendered correctly.

Only the HTML mark-up is displayed instead of the formatted text.

For example:

<textarea id="summernote">
<strong>this is bold</strong>
</textarea>

When this is passed to summernote, I'd expect to see the text formatted in bold, instead I see:

<strong> this is bold</strong>

if I use:

$('#summernote').code('<strong>this is bold</strong>');

then it works.

Any ideas?

[thomaswelton]

@hackerwins So does this feature not exist yet? If not then I'm not going to be able to use this :(

[hackerwins]

@gosdenj, @thomaswelton 👍

[thomaswelton]

Awesome

[shinesoftware]

Hi HackerWins, thanks for your work! Is there a way to use the HTML within the textarea? I have tested it and seems to me that it need the htmlentities and not the html tags. I cannot convert the archived html post in my database table, is there a solution? thanks

[hackerwins]

@shinesoftware this is PHP example. Check it.

Source: https://gist.github.com/soomtong/6635053
Demo: http://summernote.nerdbrea.kr/index.php

[shinesoftware]

@hackerwins thanks for the reply! I have already seen it.

How to apply it in this case? I am using the css class to select all the textareas.

 $('.wysiwyg').summernote({
     height: 400
 });

  /* How to use this postForm variable? */
 var postForm = function() {
     var content = $('textarea[name="content"]').val($('#summernote').code());
 };

The content of the database table is for instance

 <div class="col-md-6"><strong>My string</strong></div>

but when I load the page all the html is cleared.

thanks

[soomtong]

@shinesoftware use like this

$('textarea[name="content"]').html($('#summernote').code());

you could use html() not val()

and use this script to put the content for summernote

$('#summernote').code('<strong>Works OK!</strong>');

combine this pattern like below

<textarea><p>from database</p></textarea>

retrive from database.

load data to summernote

$('#summernote').code($('textarea').text());

sorry for late.

cheers!

[Kyzereye]

Hello and good day
I understand the different pieces what soomtong/shinesoftware laid out, but due to lack of experience, I am not sure how they go together. Plus I might be going at it a bit differently. I am using bootstrap modals to pass data pulled from a db and passed to the modal. I am using the procedure laid out in stackoverflow (http://stackoverflow.com/questions/20723111/passing-data-to-bootstrap-3-modal) to do this. I have no problems passing the data to summernote, but I am getting the html tags instead of effect they are suppose to output. Could someone point me in the right direction with this please.
Thanks
Jeff

[teknosains]

@shinesoftware when you load from DB (Edit action) you need to put yout content inside htmlspecialchars

htmlspecialchars($content);

[yateendra]

thanks

[ghost]

@soomtong

same code we have configure it perfectly working on the google chrome but it's not working on the mozilla firefox
can you please help what a problem ?

[eyramP]

Hello,

I have successfully integrated summernote but when I enter text in the text area and submit it the text box comes empty...

[richmicah]

please is not work for me..

here is my script tag

<script>
      $('#summernote').summernote({
        placeholder: 'Write Your Answers Here',
        tabsize: 2,
        height: 100
      });

 /* How to use this postForm variable? */
 var postForm = function() {
     var content = $('textarea[name="summernote"]').val($('#summernote').summernote());
 };

     </script>

and my form

<form action="/jambs"  method="POST">
                <div class="form-group">
                    <input class="form-control" type="text" name="jambname" placeholder="name">
                </div>
               <!--  <div class="form-group">
                    <input class="form-control" type="text" name="jambdescription"  placeholder="Answers">
                </div> -->
              <!--  <div class="form-group">
                    <label for="image">Image</label>
                    <input type="file" id="image" name="jambimage" accept="image/*" required>
                </div> -->
              <!--   <textarea name="my_editor" id="my_editor" cols="30" rows="10"></textarea> -->
                    <!-- <button class="btn btn-lg btn-primary btn-block">Post!</button> -->
                   <!--  <input type="submit" value="submit" name="submit_text"> -->

        <div class="form-group">
        <textarea name="summernote" id="summernote"></textarea>
        <button class="btn btn-lg btn-primary btn-block">Post!</button>
            </div>
            </form>``

[sborghini]

I'm using Jquery and Javascript in a MVC web view.

I SOLVED the problem doing the following:

$(document).ready(function () {

        var htmlWithEncodedTags = '@HttpUtility.HtmlDecode(Model.HtmlDescription)';

        // Decode HTML
        var parser = new DOMParser();
        var decodedHtml = parser.parseFromString(htmlWithEncodedTags, "text/html").body.textContent;

$('#summernote').summernote({
            lang: 'it-IT',
            focus: true,
            tabsize: 2,
            height: 300,
            toolbar: [
                ['style', ['style']],
                ['font', ['bold', 'underline', 'clear']],
                ['fontname', ['fontname']],
                ['color', ['color']],
                ['para', ['ul', 'ol', 'paragraph']],
                ['table', ['table']],
                ['insert', ['link', 'picture', 'video']],
                ['view', ['fullscreen', 'codeview', 'help']]
            ],            
        });
        
        $('#summernote').summernote('code', decodedHtml);

});

[banulalakwindu]

Thank you