CKEditor 4.5.4 keeps removing value of title tag (within Drupal 7.56)

Question

CKEditor 4.5.4 keeps removing value of title tag (within Drupal 7.56)

170 Views Asked by adamries At 19 October 2024 at 19:28

I am using CKEditor for Drupal 7. In one article I inserted a picture with hot spots. I inserted the html code with ckeditor (full html modus, source view). Now I wanted to add tooltips to the polygons, so I tried to insert nested title tags:

<polygon opacity="0" points="228,543 222,451 76,515 298,924 470,924 471,915"><title>removed by ckeditor</title></polygon>.

At first I thought it works fine but as soon as I reopened ckeditor and had a look at the source, the values of the title tags were all vanished. The title tags still there, but empty. I tried adding config.allowedContent = true; in the advanced js configuration, but that didn't work.

The advanced content filter ist turned off in the configuration.

Original Q&A

There are 2 best solutions below

**Anthony Cregan** · Answer 1

The html is invalid, CKeditor is for editing content. All content should be within the <body> tag. You are including the <title> tag in the body when using it in CKeditor. This tag should only be used in the <head> section of your html.

I expect CKeditor is finding this code, identifying it as being misplaced/invalid and removing it automatically.

<html>
    <head>
        <title>Title Here</title>
    </head>
    <body>
        <script ... for ck editor />
        <div id="CKeditorElement"></div>
    </body>
</html>

To expand on that a little, if you change your <title> tag to a <label> or just a <p> paragraph tag, that should be fine although it will render in the browser (not the tab/top of the browser which is what the title tag does).

**adamries** · Answer 2

    <html>
<figure id="imagemap_arbeitsplatz">
<svg viewBox="0 0 1122 925" >
  <defs>
    <style>
    rect:hover {
        fill: white;
        opacity:0.3;
        }
    polygon:hover {
        fill: white;
        opacity:0.3;
        }
    circle:hover {
        fill: white;
        opacity:0.3;
        }
    </style>
  </defs> 

  <image width="1122" height="925" xlink:href="/hde2017/sites/default/files/INDiD_Arbeitsplatz%20und%20Arbeitsumgebung.PNG">
    <title>Arbeitsplatz und Arbeitsumgebung</title>
  </image>

<!-------------------------------- Zugang zum Arbeitsplatz -------------------------------->

    <!-- Bildverlinkung zu "Verkehrswege"-->
    <a xlink:href="/hde2017/?q=node/229" >
    <polygon points="228,543 222,451 76,515 298,924 470,924 471,915" opacity="0"/>
        <title>Verkehrswege</title>
    </polygon>
    </a>

    <!-- Bildverlinkung zu "Türen, Luken und Notausgänge" -->  
    <a xlink:href="http://localhost/hde2017/?q=node/230" >
    <polygon points="474,437 470,432 490,298 564,265 571,271 543,406" opacity="0" />
        <title>Tueren, Luken und Notausgaenge</title>
    </polygon>
    <polygon points="766,383 820,247 827,245 892,302 885,304 821,436" opacity="0" />
        <title>Tueren, Luken und Notausgaenge</title>
    </polygon>
    <polygon points="376,274 424,254 434,265 433,285 384,305 375,296" opacity="0" />
        <title>Tueren, Luken und Notausgaenge</title>
    </polygon>
    <polygon points="625,727 583,834 702,765 753,668 746,660" opacity="0" />
        <title>Tueren, Luken und Notausgaenge</title>
    </polygon>
    <polygon points="895,576 822,694 927,634 1001,528 994,521" opacity="0" />
        <title>Tueren, Luken und Notausgaenge</title>
    </polygon>      
    </a>

    <!-- Bildverlinkung zu "Rampen, Treppen und Leitern" -->
    <a xlink:href="http://localhost/hde2017/?q=node/231" >
    <polygon points="84,348 156,320 166,333 184,496 123,522 115,509" opacity="0" />
        <title>Rampen, Treppen und Leitern</title>
    </polygon>
    <polygon points="945,224 947,218 1016,185 1030,184 1035,176 1006,155 978,158 990,133 961,111 736,155 726,158 698,249" opacity="0" />
        <title>Rampen, Treppen und Leitern</title>
    </polygon>
    </a>

<!-------------------------------- Beleuchtung -------------------------------->

    <!-- Bildverlinkung zu "Raum- und Arbeitsplatzbeleuchtung, allgemeine Gestaltungsregeln"--> 
    <a xlink:href="http://localhost/hde2017/?q=node/232" >
    <polygon points="224,326 268,307 271,313 273,317 274,329 267,337 260,340 246,340 234,336" opacity="0"/>
        <title>Raum- und Arbeitsplatzbeleuchtung</title>
    </polygon>
    <polygon points="512,209 551,193 556,199 558,205 559,213 554,218 548,222 533,222 521,217" opacity="0"/>
        <title>Raum- und Arbeitsplatzbeleuchtung</title>
    </polygon>
    </polygon>
    <polygon points="773,103 808,88 809,90 799,102 803,107 803,112 800,115 784,115" opacity="0"/>
        <title>Raum- und Arbeitsplatzbeleuchtung</title>
    </polygon>

    <polygon points="813,351 825,351 836,358 842,366 842,373 835,378 820,379 815,391 827,400 839,412 846,426 848,436 847,446 837,456 826,460 813,460 798,456 776,445 764,433 755,420 753,410 753,401 758,392 766,385 774,383 795,383 812,389 817,378 812,369 808,362 808,355" opacity="0"/>
        <title>Raum- und Arbeitsplatzbeleuchtung</title>
    </polygon>  
    </a>

    <!-- Bildverlinkung zu "Arbeitsplatzbeleuchtung"--> 
    <a xlink:href="http://localhost/hde2017/?q=node/233" >
    <polygon points="682,502 675,502 672,499 672,493 674,491 679,492 679,487 680,487 679,468 682,464 686,464 697,478 701,491 699,493 694,493 692,490 695,485 680,492 685,496" opacity="0"/>
        <title>Arbeitsplatzbeleuchtung</title>
    </polygon>
    </a>

    <!-- Bildverlinkung zu "Beleuchtung von Räumen mit Bildschirmarbeitsplätzen"--> 
    <a xlink:href="http://localhost/hde2017/?q=node/234" >
    <polygon points="" opacity="0"/>
        <title>Beleuchtung von Räumen mit Bildschirmarbeitsplätzen</title>
    </polygon>
    </a>

    <!-- Bildverlinkung zu "Orientierungsbeleuchtung in Dunkelräumen"-->    
    <a xlink:href="http://localhost/hde2017/?q=node/235" >
    <polygon points="" opacity="0"/>
        <title>Orientierungsbeleuchtung in Dunkelräumen</title>
    </polygon>
    </a>

<!-------------------------------- Belüftung und Klimatisierung -------------------------------->

    <!-- Bildverlinkung zu "Raumbelüftung"-->   
    <a xlink:href="http://localhost/hde2017/?q=node/236" >
    <polygon points="" opacity="0"/>
        <title>Raumbelüftung</title>
    </polygon>
    </a>

    <!-- Bildverlinkung zu "Klimatisierung des Arbeitsraumes"-->    
    <a xlink:href="http://localhost/hde2017/?q=node/237" >
    <polygon points="876,410 945,476 919,519 893,532 827,467 849,423" opacity="0"/>
        <title>Klimatisierung des Arbeitsraumes</title>
    </polygon>
    </a>

    <!-- Bildverlinkung zu "Klimabedingungen am Arbeitsplatz"-->    
    <a xlink:href="http://localhost/hde2017/?q=node/238" >
    <polygon points="300,473 300,508 308,518 384,483 386,450 378,439" opacity="0"/>
        <title>Klimabedingungen am Arbeitsplatz</title>
    </polygon>
    </a>

    <!-- Bildverlinkung zu "Atemluft"-->    
    <a xlink:href="http://localhost/hde2017/?q=node/239" >
    <polygon points="" opacity="0"/>
        <title>Atemluft</title>
    </polygon>
    </a>

<!-------------------------------- Lärm -------------------------------->

    <!-- Bildverlinkung zu "Grundlagen der Lärmbekämpfung"-->   
    <a xlink:href="http://localhost/hde2017/?q=node/240" >
    <polygon points="647,148 669,157 698,144 707,112 699,96 656,113" opacity="0"/>
        <title>Grundlagen der Laermbekaempfung</title>
    </polygon>
    </a>

    <!-- Bildverlinkung zu "Luft- und Körperschallbekämpfung"-->    
    <a xlink:href="http://localhost/hde2017/?q=node/241" >
    <polygon points="" opacity="0"/>
        <title>Luft- und Körperschallbekämpfung</title>
    </polygon>
    </a>

    <!-- Bildverlinkung zu "Organisatorische Lärmschutzmaßnahmen"-->    
    <a xlink:href="http://localhost/hde2017/?q=node/242" >
    <polygon points="" opacity="0"/>
        <title>Organisatorische Lärmschutzmaßnahmen</title>
    </polygon>
    </a>

<!-------------------------------- Schutz und Rettungsmittel -------------------------------->  

    <!-- Bildverlinkung zu "Augen- und Gesichtsschutz"-->   
    <a xlink:href="http://localhost/hde2017/?q=node/243" >
    <polygon points="" opacity="0"/>
        <title>Augen- und Gesichtsschutz</title>
    </polygon>
    </a>

    <!-- Bildverlinkung zu "Gehörschutz"--> 
    <a xlink:href="http://localhost/hde2017/?q=node/244" >
    <polygon points="427,373 434,367 435,357 439,351 444,348 455,348 464,354 469,354 471,356 471,360 469,360 470,364 469,373 466,379 457,379 452,374 452,362 454,358 437,368 451,383 444,389" opacity="0"/>
        <title>Gehörschutz</title>
    </polygon>
    </a>

    <!-- Bildverlinkung zu "Atemschutz"-->  
    <a xlink:href="http://localhost/hde2017/?q=node/245" >
    <polygon points="" opacity="0"/>
        <title>Atemschutz</title>
    </polygon>
    </a>

    <!-- Bildverlinkung zu "Schutzbekleidung"-->    
    <a xlink:href="http://localhost/hde2017/?q=node/246" >
    <polygon points="553,410 560,404 566,400 579,400 586,410 586,414 581,421 577,425 582,430 578,434 586,440 589,469 595,479 597,482 597,487 592,493 588,493 576,483 575,489 568,496 563,513 560,519 565,524 564,531 557,537 552,538 546,542 542,542 538,540 540,522 541,507 539,510 532,521 524,541 520,541 515,538 514,528 514,521 517,516 517,505 522,482 520,479 519,470 524,454 521,459 520,467 515,469 509,469 507,465 507,460 506,459 506,455 508,452 508,443 514,436 525,428 536,418 546,420 548,415 553,415" opacity="0"/>
        <title>Schutzbekleidung</title>
    </polygon>
    <polygon points="174,484,178,491,179,498,173,500,176,507,181,511,185,516,191,520,195,520,194,514,193,506,192,497,189,487,188,476,191,467,189,459,189,450,190,445,194,449,201,449,207,449,212,450,215,451,208,444,212,447,201,438,194,434,188,428,180,425,174,427,172,418,169,410,161,409,152,408,148,414,151,420,155,426,158,430,159,434,152,440,148,448,146,460,142,470,138,480,135,488,132,496,129,506,126,512,130,514,136,510,141,499,145,491,149,483,150,476,155,469,156,477,155,487,159,496,159,506,158,516,154,515,150,521,155,528,164,534,172,538,176,529,173,520,173,512,171,494" opacity="0"/>
        <title>Schutzbekleidung</title>
    </polygon>  
    </a>

</svg>
</figure> 
</html>

CKEditor 4.5.4 keeps removing value of title tag (within Drupal 7.56)

There are 2 best solutions below

Related Questions in FILTER

Related Questions in DRUPAL-7

Related Questions in TITLE

Related Questions in CKEDITOR4.X

Trending Questions

Popular # Hahtags

Popular Questions