extending-content-allow-link-target.html 1.4 KB

123456789101112131415161718192021222324252627282930313233
  1. <style>
  2. #snippet-link-target + .ck-editor .ck-content a[target]::after {
  3. content: "target=\"" attr(target) "\"";
  4. font-size: 0.6em;
  5. position: relative;
  6. left: 0em;
  7. top: -1em;
  8. background: #00ffa6;
  9. color: #000;
  10. padding: 1px 3px;
  11. border-radius: 10px;
  12. }
  13. #snippet-link-target-content {
  14. width: 100%;
  15. height: 8em;
  16. font-family: monospace;
  17. }
  18. </style>
  19. <div id="snippet-link-target">
  20. <p>This <a href="https://ckeditor.com" target="_blank">editor</a> allows <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a" target="_parent">links</a> with a <code>target</code> attribute to be loaded into the content.</p>
  21. </div>
  22. <p><b>Note</b>: You can play with the content to see that different link <code>target</code> values are also handled.</p>
  23. <textarea id="snippet-link-target-content">
  24. &lt;p&gt;A few links with different targets:&lt;/p&gt;&#10;&lt;ul&gt;&#10;&#9;&lt;li&gt;&lt;a href=&quot;https://ckeditor.com&quot; target=&quot;_blank&quot;&gt;CKEditor&lt;/a&gt;&lt;/li&gt;&#10;&#9;&lt;li&gt;&lt;a href=&quot;https://ckeditor.com/ckfinder/&quot;&gt;CKFinder&lt;/a&gt;&lt;/li&gt;&#10;&#9;&lt;li&gt;&lt;a href=&quot;https://cksource.com&quot; target=&quot;_parent&quot;&gt;CKSource&lt;/a&gt;&lt;/li&gt;&#10;&#9;&lt;li&gt;&lt;a href=&quot;https://cksource.com/team/&quot; target=&quot;_top&quot;&gt;Team&lt;/a&gt;&lt;/li&gt;&#10;&lt;/ul&gt;
  25. </textarea>
  26. <p>
  27. <button type="button" id="snippet-link-target-content-update">Set editor data</button>
  28. </p>