时间戳

首页 > 解决方案 > TinyMce 编辑器不允许使用 html 标签

html - TinyMce 编辑器不允许使用 html 标签

问题描述

我正在使用 TinyMce 编辑器并尝试复制粘贴一些 html 标记并存储在数据库中，但问题是，它正在自动删除引导手风琴代码

<script>
tinymce.init({
forced_root_blocks: false,
selector: "textarea#cmshtml",
relative_urls: false,
convert_urls: false,
forced_root_block : false,
force_p_newlines : false,
width : "320",
height : "290",
remove_script_host: false,
document_base_url: base_url,
plugins: [
    "advlist autolink lists link image charmap print preview anchor",
    "searchreplace visualblocks code fullscreen",
    "insertdatetime media table contextmenu paste"
],
valid_elements : '*[*]',    
toolbar: "anchor | insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link "
        });
</script>

原始数据——

<div class="panel-group" id="accordion">
<div class="panel panel-default">
    <a data-toggle="collapse" data-parent="#accordion" href="#collapse1">
        <div class="panel-heading">
            <div class="panel-title">
            <span class="glyphicon glyphicon-minus iconclr"></span>
            What is Lorem Ipsum?                
            </div>
        </div>
    </a>
  <div id="collapse1" class="panel-collapse collapse in">
    <div class="panel-body">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</div>
  </div>
</div>
<div class="panel panel-default">
    <a data-toggle="collapse" data-parent="#accordion" href="#collapse2" >
      <div class="panel-heading">
        <div class="panel-title">
          <span class="glyphicon glyphicon-plus iconclr"></span>
          Why do we use it?           
        </div>
      </div>
    </a>
  <div id="collapse2" class="panel-collapse collapse">
    <div class="panel-body">It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English.
  </div>
</div>

当我试图在编辑器中复制粘贴上面的代码并尝试保存它时，会删除手风琴并给我以下结果

输出数据-

<div class="panel-group" id="accordion">
<div class="panel panel-default">
    <div class="panel-heading">
        <div class="panel-title">
        <span class="glyphicon glyphicon-minus iconclr"></span>
        What is Lorem Ipsum?                
        </div>
    </div>
  <div id="collapse1" class="panel-collapse collapse in">
    <div class="panel-body">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</div>
  </div>
</div>
<div class="panel panel-default">
  <div class="panel-heading">
    <div class="panel-title">
      <span class="glyphicon glyphicon-plus iconclr"></span>
      Why do we use it?           
    </div>
  </div>
  <div id="collapse2" class="panel-collapse collapse">
    <div class="panel-body">It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English.
  </div>
</div>

谁能给点建议？

标签： htmltinymceeditor

解决方案

尝试对tinyMce Docs中的 valid_elements 使用完整的 XHTML 规则集。我使用默认规则集，但删除了添加到 a.xml 的所有属性。见小提琴。

推荐阅读