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

Posted 2023-03-22

【中文标题】如何删除 Summernote 值中的 <p><br></p> 标签？

【英文标题】：How to remove <p><br></p> tags in summernote value?

【发布时间】：2018-05-19 02:16:32

【问题描述】：

在凝视进入空间时，我从summernote textarea得到以下代码，

<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>

但我想在存储到 db 之前删除起始 <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>

【问题讨论】：

使用angular.element 创建一个<div> 以将该html 字符串放入然后循环<p> 元素，如果没有文本则删除。然后使用html() 获取结果发送到数据库

【参考方案1】：

如果您确定模式，那么您可以实现类似

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，我可以在短时间内使用，但我希望

如果您确定必须在开始和结束时替换 <p><br></p>，而不是查看更新的答案

【参考方案2】：

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

【参考方案3】：

使用以下内容：

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

代替：

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

【参考方案4】：

最好的方法是这样做：

$('.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'));
        
    
);

【参考方案5】：

只需删除空元素

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

https://jsfiddle.net/ox32tjwg/

【讨论】：

问题被标记为 angular...不是 jQuery

请使用angular js

嗨，Ismail，这个解决方案有问题，在summernote Textarea中只使用一个表情符号，所以测试这个解决方案。

【参考方案6】：

这对我有用！必须马上去做

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

【参考方案7】：

对于 jQuery

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

【讨论】：

您的答案可以通过添加有关代码的作用以及它如何帮助 OP 的更多信息来改进。