easyimage.html 4.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103
  1. <!DOCTYPE html>
  2. <!--
  3. Copyright (c) 2003-2021, CKSource - Frederico Knabben. All rights reserved.
  4. For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  5. -->
  6. <html lang="en">
  7. <head>
  8. <meta charset="utf-8">
  9. <title>CKEditor Easy Image Sample</title>
  10. <script src="../../../ckeditor.js"></script>
  11. <link rel="stylesheet" href="../../../samples/css/samples.css">
  12. <link rel="stylesheet" href="../../../samples/toolbarconfigurator/lib/codemirror/neo.css">
  13. <meta name="description" content="Try the latest sample of CKEditor 4 and learn more about customizing your WYSIWYG editor with endless possibilities.">
  14. </head>
  15. <body id="main">
  16. <style>
  17. .adjoined-bottom:before {
  18. height: 270px;
  19. }
  20. </style>
  21. <nav class="navigation-a">
  22. <div class="grid-container">
  23. <ul class="navigation-a-left grid-width-70">
  24. <li><a href="https://ckeditor.com">Project Homepage</a></li>
  25. <li><a href="https://github.com/ckeditor/ckeditor4/issues">I found a bug</a></li>
  26. <li><a href="https://github.com/ckeditor/ckeditor4" class="icon-pos-right icon-navigation-a-github">Fork CKEditor on GitHub</a></li>
  27. </ul>
  28. <ul class="navigation-a-right grid-width-30">
  29. <li><a href="https://ckeditor.com/blog/">CKEditor Blog</a></li>
  30. </ul>
  31. </div>
  32. </nav>
  33. <header class="header-a">
  34. <div class="grid-container">
  35. <h1 class="header-a-logo grid-width-30">
  36. <img src="../../../samples/img/logo.svg" onerror="this.src='../../../samples/img/logo.png'; this.onerror=null;" alt="CKEditor Sample">
  37. </h1>
  38. </div>
  39. </header>
  40. <main>
  41. <div class="adjoined-top">
  42. <div class="grid-container">
  43. <div class="content grid-width-100">
  44. <h1>Easy Image Demo</h1>
  45. <p>This sample shows the progress of work on Easy Image. Drop an image file into the editor to see how easily images can be handled.</p>
  46. </div>
  47. </div>
  48. </div>
  49. <div class="adjoined-bottom">
  50. <div class="grid-container">
  51. <div class="grid-width-100">
  52. <div id="editor">
  53. <h1>Apollo 11</h1>
  54. <figure class="image easyimage">
  55. <img alt="Saturn V carrying Apollo 11" src="../../../samples/img/logo.png">
  56. </figure>
  57. <p><strong>Apollo 11</strong> was the spaceflight that landed the first humans, Americans <a href="http://en.wikipedia.org/wiki/Neil_Armstrong">Neil Armstrong</a> and <a href="http://en.wikipedia.org/wiki/Buzz_Aldrin">Buzz Aldrin</a>, on the Moon on July 20, 1969, at 20:18 UTC. Armstrong became the first to step onto the lunar surface 6 hours later on July 21 at 02:56 UTC.</p>
  58. <figure class="easyimage easyimage-side">
  59. <img alt="Saturn V carrying Apollo 11" src="../../image2/samples/assets/image1.jpg">
  60. <figcaption>Saturn V carrying Apollo 11</figcaption>
  61. </figure>
  62. <p>Armstrong spent about <s>three and a half</s> two and a half hours outside the spacecraft, Aldrin slightly less; and together they collected 47.5 pounds (21.5&nbsp;kg) of lunar material for return to Earth. A third member of the mission, <a href="http://en.wikipedia.org/wiki/Michael_Collins_(astronaut)">Michael Collins</a>, piloted the <a href="http://en.wikipedia.org/wiki/Apollo_Command/Service_Module">command</a> spacecraft alone in lunar orbit until Armstrong and Aldrin returned to it for the trip back to Earth.</p>
  63. </div>
  64. </div>
  65. </div>
  66. </div>
  67. </main>
  68. <footer class="footer-a grid-container">
  69. <div class="grid-container">
  70. <p class="grid-width-100">
  71. CKEditor &ndash; The text editor for the Internet &ndash; <a class="samples" href="https://ckeditor.com/">https://ckeditor.com</a>
  72. </p>
  73. <p class="grid-width-100" id="copy">
  74. Copyright &copy; 2003-2021, <a class="samples" href="https://cksource.com/">CKSource</a> &ndash; Frederico Knabben. All rights reserved.
  75. </p>
  76. </div>
  77. </footer>
  78. <script>
  79. CKEDITOR.replace( 'editor', {
  80. plugins: 'easyimage,autogrow,sourcearea,toolbar,undo,wysiwygarea,list,liststyle,format,link,basicstyles,pastefromword',
  81. toolbar: [
  82. { name: 'document', items: [ 'Source', 'Undo', 'Redo' ] },
  83. { name: 'basicstyles', items: [ 'Bold', 'Italic', 'Strike', '-', 'RemoveFormat' ] },
  84. { name: 'paragraph', items: [ 'NumberedList', 'BulletedList' ] },
  85. { name: 'links', items: [ 'Link', 'Unlink', 'Anchor' ] },
  86. { name: 'insert', items: [ 'EasyImageUpload' ] },
  87. { name: 'styles', items: [ 'Format' ] }
  88. ],
  89. cloudServices_uploadUrl: 'https://33333.cke-cs.com/easyimage/upload/',
  90. // Note: this is a token endpoint to be used for CKEditor 4 samples / developer tests only. Images uploaded using the testing token service may be deleted automatically at any moment.
  91. // To create your own token URL please visit https://ckeditor.com/ckeditor-cloud-services/.
  92. cloudServices_tokenUrl: 'https://33333.cke-cs.com/token/dev/ijrDsqFix838Gh3wGO3F77FSW94BwcLXprJ4APSp3XQ26xsUHTi0jcb1hoBt',
  93. height: 500
  94. } );
  95. </script>
  96. </body>
  97. </html>