CKeditor HTML 5< figure>标签问题 [英] CKeditor Html 5 <figure> tag issue

问题描述

我使用的是CKeditor版本4。而且我遇到与HTML 5标签相关的问题。
输入HTML代码：

I using CKeditor version 4. And I facing issue related HTML 5 tag. Input Html Code:

<div class="col-md-4 col-sm-4">
    <div class="item-cont"> 
        <a href="contents/view/home">
          <figure>
            <img src="img/1468996695_img-1.jpg" />
          </figure>
          <div class="item-content">
            <div class="align-content">
              <div class="text-cont">
                <h1>Text</h1>
                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry.</p>
              </div>
            </div>
          </div>
        </a>
    </div>
</div>

Ckeditor的输出回报

Output return from Ckeditor

 <div class="col-md-4 col-sm-4">
    <div class="item-cont">
    <p><a href="contents/view/home"><img src="img/gallery/subGallery_1/1468996695_img-1.jpg" /> </a></p>

  <div class="item-content">
     <div class="align-content">
       <div class="text-cont">
       <h1><a href="contents/view/home">Aarhus</a></h1>

          <p><a href="contents/view/home">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry.</a></p>
     </div>
      </div>
    </div>
 </div>
 </div>

问题：-

1. 它将 figure标记替换为 p标记

1. It will replace the "figure" tag with "p" tag

外部锚标记替换为内部锚标记

Outer anchor tag replace with inner anchor tag

推荐答案

我找到了正确的解决方案

I found the proper solution

CKeditor设置中的更改

Change in CKeditor Setting

$(function(){
     CKEDITOR.replace('tinyeditor');
     CKEDITOR.dtd.a.div = 1;
     CKEDITOR.dtd.a.figure = 1;
     CKEDITOR.config.allowedContent = true;
});

这可以解决锚标记和图形标记的问题

This can resolve the issue of anchor tag and figure tag

这篇关于CKeditor HTML 5< figure>标签问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！