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

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