Ticket #6181: jqueryadapter.html

File jqueryadapter.html, 3.9 KB (added by Jakub Ś, 8 years ago)
Line 
1<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2<!--
3Copyright (c) 2003-2011, CKSource - Frederico Knabben. All rights reserved.
4For licensing, see LICENSE.html or http://ckeditor.com/license
5-->
6<html xmlns="http://www.w3.org/1999/xhtml">
7<head>
8        <title>jQuery Adapter &mdash; CKEditor Sample</title>
9        <meta content="text/html; charset=utf-8" http-equiv="content-type" />
10        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js"></script>
11        <script type="text/javascript" src="http://malsup.github.com/jquery.form.js"></script>
12       
13        <!-- CKReleaser %REMOVE_LINE%
14        <script type="text/javascript" src="../ckeditor.js"></script>
15        <script type="text/javascript" src="../adapters/jquery.js"></script>
16        CKReleaser %REMOVE_START% -->
17        <script type="text/javascript" src="../ckeditor_source.js"></script>
18        <script type="text/javascript" src="../_source/adapters/jquery.js"></script>
19        <!-- CKReleaser %REMOVE_END% -->
20        <script src="sample.js" type="text/javascript"></script>
21        <link href="sample.css" rel="stylesheet" type="text/css" />
22        <script type="text/javascript">
23        //<![CDATA[
24
25$(function()
26{
27        var config = {
28                toolbar:
29                [
30                        ['Bold', 'Italic', 'Save', 'Source','-', 'NumberedList', 'BulletedList', '-', 'Link', 'Unlink'],
31                        ['UIColor']
32                ]
33        };
34
35        // Initialize the editor.
36        // Callback function can be passed and executed after full instance creation.
37        $('.jquery_ckeditor').ckeditor(config);
38               
39        $(".jquery_ckeditor").parents("form:first").ajaxForm(function () {
40                alert("!");
41        });
42});
43
44        //]]>
45        </script>
46</head>
47<body>
48        <h1 class="samples">
49                CKEditor Sample &mdash; Using jQuery Adapter
50        </h1>
51        <div class="description">
52        <p>
53                This sample shows how to load CKEditor and configure it using the
54                <a class="samples" href="http://docs.cksource.com/CKEditor_3.x/Developers_Guide/jQuery_Adapter">jQuery adapter</a>.
55                In this case the jQuery adapter is responsible for transforming a <code>&lt;textarea&gt;</code>
56                element into a CKEditor instance and setting the configuration of the toolbar.
57        </p>
58        <p>
59                CKEditor instance with custom configuration set in jQuery can be inserted with the
60                following JavaScript code:
61        </p>
62        <pre class="samples">$(function()
63{
64        var config = {
65                skin:'v2'
66        };
67
68        $('.<em>textarea_class</em>').ckeditor(config);
69});</pre>
70        <p>
71        Note that <code><em>textarea_class</em></code> in the code above is the
72        <code>class</code> attribute of the <code>&lt;textarea&gt;</code> element to be replaced with
73        CKEditor. Any other jQuery selector can be used to match the target element.
74        </p>
75        </div>
76
77        <!-- This <div> holds alert messages to be display in the sample page. -->
78        <div id="alerts">
79                <noscript>
80                        <p>
81                                <strong>CKEditor requires JavaScript to run</strong>. In a browser with no JavaScript
82                                support, like yours, you should still see the contents (HTML data) and you should
83                                be able to edit it normally, without a rich editor interface.
84                        </p>
85                </noscript>
86        </div>
87        <!-- This <fieldset> holds the HTML that you will usually find in your
88             pages. -->
89        <form action="sample_posteddata.php" method="post">
90        <p>
91                <label for="editor1">
92                        Editor 1:</label>
93                <textarea class="jquery_ckeditor" cols="80" id="editor1" name="editor1" rows="10">&lt;p&gt;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;.&lt;/p&gt;</textarea>
94        </p>
95        <p>
96                <input type="submit" value="Submit" />
97        </p>
98        </form>
99        <div id="footer">
100                <hr />
101                <p>
102                        CKEditor - The text editor for the Internet - <a class="samples" href="http://ckeditor.com/">http://ckeditor.com</a>
103                </p>
104                <p id="copy">
105                        Copyright &copy; 2003-2011, <a class="samples" href="http://cksource.com/">CKSource</a> - Frederico
106                        Knabben. All rights reserved.
107                </p>
108        </div>
109</body>
110</html>
© 2003 – 2019 CKSource – Frederico Knabben. All rights reserved. | Terms of use | Privacy policy