2017-09-05 302 views
0

我正在使用CKEditor for Drupal 7.在一篇文章中,我插入了一张热点图片。我用ckeditor插入了html代码(完整的html模式,源代码视图)。现在我想添加工具提示到多边形,所以我试图插入嵌套标题标签:CKEditor 4.5.4不断删除标题标记的值(在Drupal 7.56中)

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

起初我认为它工作正常,但只要我重新打开ckeditor并查看了源代码,标题标签的值全部消失。标题标签仍然存在,但是为空。我尝试在高级js配置中添加config.allowedContent = true;,但那不起作用。

高级内容过滤器ist在配置中关闭。

回答

0

该html无效,CKeditor用于编辑内容。所有内容应该位于<body>标签内。在CKeditor中使用时,您的身体中包含<title>标签。这个标签只能用在你的html的<head>部分。

我希望CKeditor找到这个代码,将其识别为错放/无效并自动删除它。

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

要展开对一点点,如果你改变你的<title>标记为<label>,或只是一个<p>段落标记,这应该是罚款,尽管它会在浏览器(不使浏览器的选项卡/顶这是标题标签的作用)。

+0

谢谢你的解释,现在我明白了“身体问题”。标签或段落不起作用,它们不会在鼠标悬停的工具提示中显示。我该如何解决这个问题?也许我必须将代码移出文章主体并将其放入外部文件中?但我不知道如何将文章与该外部html代码连接起来。 – adamries

+0

首先,我会确定CKeditor是否完全从html中删除它,或者它是否在视口中不可见。您可以通过检查元素来查看内容是否被删除。我不得不承认,我从来没有使用过多边形标签,所以我不能确定它不是导致问题的原因,我不能在codepen中重现您的代码''''样本。如果你可以发布一个例子,我们至少可以确定它是清除内容的drupal。 –

+0

你好,我知道标题标签的值被删除,因为我可以看到在重新打开源代码后没有任何工具提示。 – adamries

0
<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> 
+0

起初,这段代码的工作原理和我想要的所有工具提示,然后我再次打开ckeditor suorce视图,所有标题都是空了,工具提示消失了。 – adamries