Question

我正在使用一个令人满意的div。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<div contenteditable="true"></div>

<button id="insert_strong">Strong!</button>

<button id="insert_italic">Italic</button>

<button id="insert_span">Span!</button>

<script>
  $("#insert_strong").click(function(){
      $("div").append('<strong>Strong text!</strong> ');
  });

  $("#insert_italic").click(function(){
      $("div").append('<i>Italic text!</i> ');
  });

  $("#insert_span").click(function(){
      $("div").append('<span>Span text!</span> ');
  });
</script>

即使我删除了按钮，人们仍然可以通过从任何网站复制粘贴来粘贴任何html标签。我希望人们只能在其中发布<strong>个标签，所有其他标签都应该被删除。怎么办呢？

Answer 1

我终于找到了解决方案。这是：

$("#insert_strong").click(function(){
    $("div").append('<strong>Strong text!</strong> ');
    div_key_up("div");
});

$("#insert_italic").click(function(){
    $("div").append('<i>Italic text!</i> ');
    div_key_up("div");
});

$("#insert_span").click(function(){
    $("div").append('<span>Span text!</span> ');
    div_key_up("div");
});

function div_key_up(l)
{
  $(l).html(strip_tags($(l).html(), "<strong><br>"));
}

function strip_tags(input, allowed)
{
  allowed = (((allowed || '') + '')
  .toLowerCase()
  .match(/<[a-z][a-z0-9]*>/g) || [])
  .join('');
  var tags = /<\/?([a-z][a-z0-9]*)\b[^>]*>/gi,
  commentsAndPhpTags = /<!--[\s\S]*?-->|<\?(?:php)?[\s\S]*?\?>/gi;
  return input.replace(commentsAndPhpTags, '')
  .replace(tags, function($0, $1)
  {
    return allowed.indexOf('<' + $1.toLowerCase() + '>') > -1 ? $0 : '';
  });
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<div contenteditable="true" onkeyup="div_key_up(this);"></div>

<button id="insert_strong">Strong!</button>

<button id="insert_italic">Italic</button>

<button id="insert_span">Span!</button>

如何使contenteditable div只允许某些标签？

1 个答案: