Невозможно присвоить значение редактору html summernote vue из базы данных mysql

Я использую SummerNote vue HTML-редактор, я пишу некоторый контент в редакторе, а затем сохраняю его в Mysql DB, теперь, когда я получаю контент из БД с помощью php и отображаю его в Summernote, редактор показывает только тестовый контент, который я не могу присвойте значение изображению вместе с текстом, пожалуйста, дайте мне какое-то решение для этого. Мой код:

Код для инициализации SummerNote:

<!-- include jquery -->
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>

<!-- include libraries BS3 -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.1/css/bootstrap.min.css" />
<script type="text/javascript" src="//netdna.bootstrapcdn.com/bootstrap/3.0.1/js/bootstrap.min.js"></script>

<!-- include summernote -->
<link rel="stylesheet" href="summernote-develop/dist/summernote.css">
<script type="text/javascript" src="summernote-develop/dist/summernote.js"></script>

<script type="text/javascript">
$(document).ready(function() {
$('#contents').summernote({
height: 200
});

});

</script>

Код для извлечения данных из БД и назначения его в Summernote:

<?php
$con =mysqli_query($conn,"SELECT * FROM tbl_content WHERE user_id= '".$pro_id."' ORDER BY pro_id ASC");while($data1=mysqli_fetch_array($con)){ $fx= $data1['content'];   ?><textarea class="summernote" id="contents" title="Contents" name="name1" value="<?php echo $fx ;?>"></textarea>

<?php } ?>

Это мой БД:

Mysql DB Data

Это мой результат значения summernote:

Summernote Result Data