js/ckeditor/samples/old/sourcedialog/sourcedialog.html

   1 <!DOCTYPE html>\r
   2 <!--\r
   3 Copyright (c) 2003-2017, 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>Editing source code in a dialog &mdash; CKEditor Sample</title>\r
  10         <script src="../../../ckeditor.js"></script>\r
  11         <link rel="stylesheet" href="../../../samples/old/sample.css">\r
  12         <meta name="ckeditor-sample-name" content="Editing source code in a dialog">\r
  13         <meta name="ckeditor-sample-group" content="Plugins">\r
  14         <meta name="ckeditor-sample-description" content="Editing HTML content of both inline and classic editor instances.">\r
  15         <meta name="ckeditor-sample-isnew" content="1">\r
  16         <style>\r
  17 \r
  18                 #editable\r
  19                 {\r
  20                         padding: 10px;\r
  21                         float: left;\r
  22                 }\r
  23 \r
  24         </style>\r
  25 </head>\r
  26 <body>\r
  27         <h1 class="samples">\r
  28                 <a href="../../../samples/old/index.html">CKEditor Samples</a> &raquo; Editing source code in a dialog\r
  29         </h1>\r
  30         <div class="warning deprecated">\r
  31                 This sample is not maintained anymore. Check out its <a href="http://sdk.ckeditor.com/samples/sourcearea.html">brand new version in CKEditor SDK</a>.\r
  32         </div>\r
  33         <div class="description">\r
  34                 <p>\r
  35                         <strong>Sourcedialog</strong> plugin provides an easy way to edit raw HTML content\r
  36                         of an editor, similarly to what is possible with <strong>Sourcearea</strong>\r
  37                         plugin for classic (<code>iframe</code>-based) instances but using dialogs. Thanks to that, it's also possible\r
  38                         to manipulate raw content of inline editor instances.\r
  39                 </p>\r
  40                 <p>\r
  41                         This plugin extends the toolbar with a button,\r
  42                         which opens a dialog window with a source code editor. It works with both classic\r
  43                         and inline instances. To enable this\r
  44                         plugin, basically add <code>extraPlugins: 'sourcedialog'</code> to editor's\r
  45                         config:\r
  46                 </p>\r
  47 <pre class="samples">\r
  48 // Inline editor.\r
  49 CKEDITOR.inline( 'editable', {\r
  50         <strong>extraPlugins: 'sourcedialog'</strong>\r
  51 });\r
  52 \r
  53 // Classic (iframe-based) editor.\r
  54 CKEDITOR.replace( 'textarea_id', {\r
  55         <strong>extraPlugins: 'sourcedialog'</strong>,\r
  56         removePlugins: 'sourcearea'\r
  57 });\r
  58 </pre>\r
  59                 <p>\r
  60                         Note that you may want to include <code>removePlugins: 'sourcearea'</code>\r
  61                         in your config when using <strong>Sourcedialog</strong> in classic editor instances.\r
  62                         This prevents feature redundancy.\r
  63                 </p>\r
  64                 <p>\r
  65                         Note that <code>editable</code> in the code above is the <code>id</code>\r
  66                         attribute of the <code>&lt;div&gt;</code> element to be converted into an inline instance.\r
  67                 </p>\r
  68                 <p>\r
  69                         Note that <code><em>textarea_id</em></code> in the code above is the <code>id</code> attribute of\r
  70                         the <code>&lt;textarea&gt;</code> element to be replaced with CKEditor.\r
  71                 </p>\r
  72         </div>\r
  73         <div>\r
  74                 <label for="editor1">\r
  75                         Inline editor:\r
  76                 </label>\r
  77                 <div id="editor1" contenteditable="true" style="padding: 5px 20px;">\r
  78                         <p>This is some <strong>sample text</strong>. You are using <a href="http://ckeditor.com/">CKEditor</a>.</p>\r
  79                 </div>\r
  80         </div>\r
  81         <br>\r
  82         <div>\r
  83                 <label for="editor2">\r
  84                         Classic editor:\r
  85                 </label>\r
  86                 <textarea cols="80" id="editor2" name="editor2" rows="10">\r
  87                         This is some &lt;strong&gt;sample text&lt;/strong&gt;. You are using &lt;a href="http://ckeditor.com/"&gt;CKEditor&lt;/a&gt;.\r
  88                 </textarea>\r
  89         </div>\r
  90         <script>\r
  91 \r
  92                 // We need to turn off the automatic editor creation first.\r
  93                 CKEDITOR.disableAutoInline = true;\r
  94 \r
  95                 var config = {\r
  96                         toolbarGroups: [\r
  97                                 { name: 'mode' },\r
  98                                 { name: 'basicstyles' },\r
  99                                 { name: 'links' }\r
 100                         ],\r
 101                         extraPlugins: 'sourcedialog',\r
 102                         removePlugins: 'sourcearea'\r
 103                 }\r
 104 \r
 105                 CKEDITOR.inline( 'editor1', config );\r
 106                 CKEDITOR.replace( 'editor2', config );\r
 107 \r
 108         </script>\r
 109         <div id="footer">\r
 110                 <hr>\r
 111                 <p>\r
 112                         CKEditor - The text editor for the Internet - <a class="samples" href="http://ckeditor.com/">\r
 113                                 http://ckeditor.com</a>\r
 114                 </p>\r
 115                 <p id="copy">\r
 116                         Copyright &copy; 2003-2017, <a class="samples" href="http://cksource.com/">CKSource</a>\r
 117                         - Frederico Knabben. All rights reserved.\r
 118                 </p>\r
 119         </div>\r
 120 </body>\r
 121 </html>\r