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