无法从 mysql db 为 summernote vue html 编辑器赋值

我使用summernote vue html编辑器，我在编辑器中编写了一些内容，然后将其保存在Mysql DB中，现在当我使用php从DB检索内容并在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>

从数据库检索数据并将其分配给夏季笔记的代码：

<?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 数据库数据

这是我的夏季笔记值的结果：

夏笔记结果数据