如何将Summernote的内容(文本)传递到<p>标记

时间:2018-12-14 22:54:22

标签: javascript jquery html5

function PasarValor() {
  
  var htmlContent = $('#summernote').summernote('code');
  document.getElementById("idTitulo").innerHTML = $(htmlContent).text();
  // document.getElementById("idTitulo").innerHTML = document.getElementById("summernote").value;
    
}
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>bootstrap4</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css">
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.11/summernote-bs4.css" rel="stylesheet">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.11/summernote-bs4.js"></script>
  
  </head>
  <body>
    <p id="idTitulo">
ESCRIBE ENCABEZADO....
</p>
    <div id="summernote" onkeyup="PasarValor();"></div>
    <script>
      $('#summernote').summernote({
        toolbar: [
    ['style', ['style']],
    ['font', ['bold', 'italic', 'underline', 'clear']],
    ['fontname', ['fontname']],
    ['color', ['color']],
    ['para', ['ul', 'ol', 'paragraph']],
    ['height', ['height']],
    ['help', ['help']]
  ],
        width: 530,
      });
    </script>
  </body>
</html>

我想使用自己拥有的选项传递在summernote中编写的文本,例如,如果文本为红色,则我希望接收所有文本并将其复制到{{1} }标签,并带有在summernote中已应用的属性(例如红色,对齐方式等)。

1 个答案:

答案 0 :(得分:1)

首先,您应该将问题翻译成英语,第二个summernote具有一个callback属性,可以让您听到事件,因此在初始化时,您可以将回调与所需的事件一起添加

$('#summernote').summernote({
    toolbar: [
      ['style', ['style']],
      ['font', ['bold', 'italic', 'underline', 'clear']],
      ['fontname', ['fontname']],
      ['color', ['color']],
      ['para', ['ul', 'ol', 'paragraph']],
      ['height', ['height']],
      ['help', ['help']]
    ],
    width: 530,
    //add the callback with the event
    callbacks: {
      //listen to keyup
      onKeyup: function() {
            //lastly we get the editor html with $('#summernote').summernote('code') and paste it in the #idTitulo 
            $('#idTitulo').html($('#summernote').summernote('code'))
      }
    }
});