删除未关闭的html标记 - 将内容粘贴到具有contenteditable的div

时间:2017-07-06 15:16:25

标签: php jquery mysql

我在努力寻找使用

的解决方案
  

div使用 contenteditable

PHP

<div class="panel-body">
 <div contenteditable="true" style="text-align: justify" id="text_data_1">
    <?php echo(html_entity_decode($text_data_from_backend))?>
 </div>                   
</div>

jQuery

 var postFormData =  {
    'agent_id'              : $("#text_data_1").val(),                  
    'actionmode'            : id
    };
 var link = 'myfile.php';
$.fn.getajaxresponse(link,  postFormData, $.fn.this_callback); 

将数据粘贴或输入到满足的div中。当最终用户从没有正确关闭标签的网站粘贴内容时,整个html布局都会失败。

我正在使用div contenteditable,以便保留新行和基本html标记,并且可以来回处理数据库。

有没有办法删除未正确关闭的html标签,我相信这是实现这种方法的显示阻碍。请注意我使用jQuery,PHP和MySQL

1 个答案:

答案 0 :(得分:0)

感谢您的回复。

这有点棘手,在搜索时我找到了一个jQuery清理而不使用正则表达式的库

  1. 我在div上添加了一个名为 Trumbowyg 的编辑器 - http://alex-d.github.io/Trumbowyg/ 这非常容易和酷。这个是轻量级的,需要将js文件添加到所需的页面。
  2. 通过ajax保存,称为函数,其中 JClean [https://code.google.com/archive/p/jquery-clean/]库用于清除未关闭的标记。将Jclean js文件添加到所需页面
  3. 这就是我最终的做法。

    1. 附加编辑器

      $.fn.attach_event_div_contenteditable = function(){                  
         var tb_buttons = [                     
                            ['viewHTML'],
                            ['formatting'],
                            'btnGrp-semantic',
                            ['superscript', 'subscript'],
                            ['link'],
                            'btnGrp-justify',
                            'btnGrp-lists',
                            ['horizontalRule'],
                            ['removeformat'],
                            ['fullscreen']
                           ];
         $('#text_data_1').trumbowyg({
             removeformatPasted: true,
             btns: tb_buttons,
             height:"100%",
         });
         $('#text_data_2').trumbowyg({
             removeformatPasted: true,
             btns: tb_buttons,
         });  
         $('#text_data_3').trumbowyg({
             removeformatPasted: true,
             btns: tb_buttons,
         });
         $('#text_data_4').trumbowyg({
             removeformatPasted: true,
             btns: tb_buttons,
         });         
      }
      
    2. 清洁元素

      $.fn.get_latest_value = function(elem){
       var tagname = elem.prop("tagName");
       var returnvalue = "";
       switch(tagname.toUpperCase()){
          case "TEXTAREA": 
              returnvalue = elem.val();break;
          case "INPUT": 
              returnvalue = elem.val(); break;                
          default:
              returnvalue = elem.html();break;
       }
       returnvalue = returnvalue.replace(/\"/g,'&quot;');
       returnvalue = returnvalue.replace(/\'/g,'&apos;');
       var temp = $("<input value='"+returnvalue+"'/>");
       returnvalue = $.htmlClean(temp.val(), { format: true });
       return returnvalue;
      }
      
    3. Ajax调用

       var postFormData =  {
        'agent_id'              : $.fn.get_latest_value($("#text_data_1")),                  
        'actionmode'            : id
        };
       var link = 'myfile.php';
       $.fn.getajaxresponse(link,  postFormData, $.fn.this_callback);
      

      这是我能找到的最好的答案并继续前进。希望这有助于任何想知道我如何解决它的人。