public/assets/plugins/ckeditor/samples/old/placeholder/placeholder.html

   1 <!DOCTYPE html>\r
   2 <!--\r
   3 Copyright (c) 2003-2016, CKSource - Frederico Knabben. All rights reserved.\r
   4 For licensing, see LICENSE.md or http://ckeditor.com/license\r
   5 -->\r
   6 <html>\r
   7 <head>\r
   8         <meta charset="utf-8">\r
   9         <title>Placeholder Plugin &mdash; CKEditor Sample</title>\r
  10         <script src="../../../ckeditor.js"></script>\r
  11         <script src="../../../samples/old/sample.js"></script>\r
  12         <link rel="stylesheet" href="../../../samples/old/sample.css">\r
  13         <meta name="ckeditor-sample-name" content="Placeholder plugin">\r
  14         <meta name="ckeditor-sample-group" content="Plugins">\r
  15         <meta name="ckeditor-sample-description" content="Using the Placeholder plugin to create uneditable sections that can only be created and modified with a proper dialog window.">\r
  16 </head>\r
  17 <body>\r
  18         <h1 class="samples">\r
  19                 <a href="../../../samples/old/index.html">CKEditor Samples</a> &raquo; Using the Placeholder Plugin\r
  20         </h1>\r
  21         <div class="warning deprecated">\r
  22                 This sample is not maintained anymore. Check out its <a href="http://sdk.ckeditor.com/samples/placeholder.html">brand new version in CKEditor SDK</a>.\r
  23         </div>\r
  24         <div class="description">\r
  25                 <p>\r
  26                         This sample shows how to configure CKEditor instances to use the\r
  27                         <strong>Placeholder</strong> plugin that lets you insert read-only elements\r
  28                         into your content. To enter and modify read-only text, use the\r
  29                         <strong>Create Placeholder</strong> <span class="button_icon" data-icon="placeholder">&nbsp;</span> button and its matching dialog window.\r
  30                 </p>\r
  31                 <p>\r
  32                         To add a CKEditor instance that uses the <code>placeholder</code> plugin and a related\r
  33                         <strong>Create Placeholder</strong> <span class="button_icon" data-icon="placeholder">&nbsp;</span> toolbar button, insert the following JavaScript\r
  34                         call to your code:\r
  35                 </p>\r
  36 <pre class="samples">\r
  37 CKEDITOR.replace( '<em>textarea_id</em>', {\r
  38         <strong>extraPlugins: 'placeholder',</strong>\r
  39         toolbar: [ [ 'Source', 'Bold' ], [<strong>'CreatePlaceholder'</strong>] ]\r
  40 });</pre>\r
  41                 <p>\r
  42                         Note that <code><em>textarea_id</em></code> in the code above is the <code>id</code> attribute of\r
  43                         the <code>&lt;textarea&gt;</code> element to be replaced with CKEditor.\r
  44                 </p>\r
  45         </div>\r
  46         <form action="../../../samples/sample_posteddata.php" method="post">\r
  47                 <p>\r
  48                         <label for="editor1">\r
  49                                 CKEditor using the <code>placeholder</code> plugin with its default configuration:\r
  50                         </label>\r
  51                         <textarea cols="80" id="editor1" name="editor1" rows="10">&lt;p&gt;This is a [[sample placeholder]]. You are using &lt;a href="http://ckeditor.com/"&gt;CKEditor&lt;/a&gt;. &lt;/p&gt;</textarea>\r
  52                         <script>\r
  53 \r
  54                                 CKEDITOR.replace( 'editor1', {\r
  55                                         extraPlugins: 'placeholder'\r
  56                                 });\r
  57 \r
  58                         </script>\r
  59                 </p>\r
  60                 <p>\r
  61                         <input type="submit" value="Submit">\r
  62                 </p>\r
  63         </form>\r
  64         <div id="footer">\r
  65                 <hr>\r
  66                 <p>\r
  67                         CKEditor - The text editor for the Internet - <a class="samples" href="http://ckeditor.com/">http://ckeditor.com</a>\r
  68                 </p>\r
  69                 <p id="copy">\r
  70                         Copyright &copy; 2003-2016, <a class="samples" href="http://cksource.com/">CKSource</a> - Frederico\r
  71                         Knabben. All rights reserved.\r
  72                 </p>\r
  73         </div>\r
  74 </body>\r
  75 </html>\r