如何在Summernote值中删除<p><br></p>标签？

Question

当我在Summernote文本框中输入内容时，会出现以下代码：

<p><br></p><p><br></p><p><strong style="font-family: &quot;Open Sans&quot;, Arial, sans-serif; text-align: justify;">Lorem Ipsum</strong><span style="font-family: &quot;Open Sans&quot;, Arial, sans-serif; text-align: justify;">&nbsp;is simply dummy text of the printing and typesetting industry. </span><br></p><p><br></p><p><br></p>

但是我希望在存储到数据库之前移除起始的<p><br></p><p><br></p>。

例如，我想要像下面这样存储：

<p><strong style="font-family: &quot;Open Sans&quot;, Arial, sans-serif; text-align: justify;">Lorem Ipsum</strong><span style="font-family: &quot;Open Sans&quot;, Arial, sans-serif; text-align: justify;">&nbsp;is simply dummy text of the printing and typesetting industry. </span><br></p>

- Santhoshkumar

---

使用 angular.element 创建一个 <div>，将 HTML 字符串放入其中，然后循环遍历 <p> 元素并删除没有文本的元素。最后使用 html() 方法获取结果并发送到数据库。 - charlietfl

Answer 1

callbacks: {
  onFocus: function (contents) {
    if($('.summernote').summernote('isEmpty')){
      $(".summernote").html(''); 
    }
  }
}

- Niaz Muhammad

Answer 2

如果您确定模式，那么可以像这样实现它。

var data='<p><br></p><p><br></p><p><strong style="font-family: &quot;Open Sans&quot;, Arial, sans-serif; text-align: justify;">Lorem Ipsum</strong><span style="font-family: &quot;Open Sans&quot;, Arial, sans-serif; text-align: justify;">&nbsp;is simply dummy text of the printing and typesetting industry. </span><br></p><p><br></p><p><br></p>';
while(data.startsWith('<p><br></p>')){
data=data.replace('<p><br></p>','')
}

while(data.endsWith('<p><br></p>')){
data=data.replace(new RegExp('<p><br></p>$'),'')
}
console.log(data)

- jitender

---

谢谢你，@jitender，我可以使用短时间，但我想在文本之间加入<p><br></p>，只有起始和结束文本应该被替换。对于你的解决方案，它会替换任何地方存在<p><br></p>的全部文本。 - Santhoshkumar

如果你确定你需要替换开头和结尾的<p><br></p>，那么请查看更新后的答案。 - jitender

Answer 3

使用以下内容：

$('#summernote').summernote('code', '<text H>');

改为：

$('#summernote').summernote('editor.insertText', '<text H>'));

- Robson Douglas

Answer 4

对于jQuery

$('.summernote').summernote({
    height: 250,
    callbacks: {
        onInit: function (c) {
            c.editable.html('');
        }
    }
});

- Konrad Stępień

---

你的回答可以通过添加更多关于代码的信息以及它如何帮助提问者来改进。 - Tyler2P

Answer 5

最好的方法是这样做：

$('.summernote_add').summernote({
    height: 250,
    callbacks: {
        onChange: function (contents) {
            if ($('.summernote_add').summernote('isEmpty')) {
                $(".add .panel-body").html('');
            } else {
                $(".add .panel-body").val(contents);
            }
            // $('.summernote_add').val(
            //     $('.summernote_add').summernote('isEmpty')
            //         ? null
            //         : contents
            // );
            summernoteValidatorAdd.element($('.summernote_add'));
        }
    }
});

- Steven Morales

Answer 6

只需删除空元素

$("p").each(function(){
    if (!$(this).text().trim().length) {
        $(this).remove();
    }
});

https://jsfiddle.net/ox32tjwg/

- Ismail Farooq

---

问题被标记为Angular...而不是jQuery。 - charlietfl

请使用AngularJS。 - Santhoshkumar

嗨，伊斯梅尔，这个解决方案有一个问题，在summernote文本区域中只使用一个表情符号，以便测试此解决方案。 - Ebrahim Bashirpour

Answer 7

实现这个回调函数。根据文档，最终会剩下一对<p><be></p>标签，这是可以接受的。在失去焦点时，只需重置Summernote以删除所有其他残留标签。

请参阅此处的文档：

isEmpty 返回编辑器内容是否为空。 即使编辑器内容为空，编辑区域也需要<p><br></p>标签来获得焦点。因此，Summernote支持此方法来帮助检查编辑器内容是否为空。

onBlur: function (contents) {
  if (
    $($('#body-summernote').summernote('code')).text().trim().length < 1
  ) {
    console.log(
      $($('#body-summernote').summernote('code')).text().trim().length
    );
    console.log('clearing');
    // $('#body-summernote').html('');
    $('#body-summernote').summernote('reset');
  }
},

- Rajesh Lohith

Answer 8

这对我有用！刚刚必须这样做

callbacks: {
  onFocus: function (contents) {
    if($(this).summernote('isEmpty')){
      $("<your-selector>").html(''); //either the class (.) or id (#) of your textarea or summernote element
    }
  }
}

- Egli Becerra

Answer 9

如果你只想删除前导/起始标签，那么可以使用正则表达式，否则它还会删除其他不是前导/起始标签的标签，并且你也可以通过使用单个循环来删除结束/尾随标签。

let value='<p><br></p><p><br></p><p><strong style="font-family: &quot;Open Sans&quot;, Arial, sans-serif; text-align: justify;">Lorem Ipsum</strong><span style="font-family: &quot;Open Sans&quot;, Arial, sans-serif; text-align: justify;">&nbsp;is simply dummy text of the printing and typesetting industry. </span><br></p><p><br></p><p><br></p>';


while(value.startsWith('<p><br></p>') || value.endsWith('<p><br></p>')){
     
    value=value.replace(new RegExp('^<p><br></p>'),'').trim();
      
    value=value.replace(new RegExp('<p><br></p>$'),'').trim();
}

- Zain Ahmad Chattha

Answer 10

我使用这个回调函数，即使你的页面上有多个summernote，它也能正常工作。

$('.summernote').summernote({
  height: 150,
  toolbar: [
      ['style', ['bold', 'italic', 'underline', 'clear']],
      ['fontsize', ['fontsize']],
      ['color', ['color']],
      ['insert', ['link']]
  ],
  callbacks: {
    onChange: function(contents) {
      if (contents == '<p><br></p>') {              
        var currentSummernoteInstance = $(this);
        currentSummernoteInstance.summernote('code', '');
      }
    }
  }
})

- almo