3 Copyright (c) 2003-2014, CKSource - Frederico Knabben. All rights reserved.
4 For licensing, see LICENSE.md or http://ckeditor.com/license
9 <title>ENTER Key Configuration
— CKEditor Sample
</title>
10 <script src=
"../../../ckeditor.js"></script>
11 <link href=
"../../../samples/sample.css" rel=
"stylesheet">
12 <meta name=
"ckeditor-sample-name" content=
"Using the "Enter" key in CKEditor">
13 <meta name=
"ckeditor-sample-group" content=
"Advanced Samples">
14 <meta name=
"ckeditor-sample-description" content=
"Configuring the behavior of <em>Enter</em> and <em>Shift+Enter</em> keys.">
19 function changeEnter() {
20 // If we already have an editor, let's destroy it first.
22 editor.destroy( true );
24 // Create the editor again, with the appropriate settings.
25 editor = CKEDITOR.replace( 'editor1', {
26 extraPlugins: 'enterkey',
27 enterMode: Number( document.getElementById( 'xEnter' ).value ),
28 shiftEnterMode: Number( document.getElementById( 'xShiftEnter' ).value )
32 window.onload = changeEnter;
38 <a href=
"../../../samples/index.html">CKEditor Samples
</a> » ENTER Key Configuration
40 <div class=
"description">
42 This sample shows how to configure the
<em>Enter
</em> and
<em>Shift+Enter
</em> keys
43 to perform actions specified in the
44 <a class=
"samples" href=
"http://docs.ckeditor.com/#!/api/CKEDITOR.config-cfg-enterMode"><code>enterMode
</code></a>
45 and
<a class=
"samples" href=
"http://docs.ckeditor.com/#!/api/CKEDITOR.config-cfg-shiftEnterMode"><code>shiftEnterMode
</code></a>
46 parameters, respectively.
47 You can choose from the following options:
50 <li><strong><code>ENTER_P
</code></strong> – new
<code><p
></code> paragraphs are created;
</li>
51 <li><strong><code>ENTER_BR
</code></strong> – lines are broken with
<code><br
></code> elements;
</li>
52 <li><strong><code>ENTER_DIV
</code></strong> – new
<code><div
></code> blocks are created.
</li>
55 The sample code below shows how to configure CKEditor to create a
<code><div
></code> block when
<em>Enter
</em> key is pressed.
58 CKEDITOR.replace( '
<em>textarea_id
</em>', {
59 <strong>enterMode: CKEDITOR.ENTER_DIV
</strong>
62 Note that
<code><em>textarea_id
</em></code> in the code above is the
<code>id
</code> attribute of
63 the
<code><textarea
></code> element to be replaced.
66 <div style=
"float: left; margin-right: 20px">
67 When
<em>Enter
</em> is pressed:
<br>
68 <select id=
"xEnter" onchange=
"changeEnter();">
69 <option selected=
"selected" value=
"1">Create a new
<P
> (recommended)
</option>
70 <option value=
"3">Create a new
<DIV
></option>
71 <option value=
"2">Break the line with a
<BR
></option>
74 <div style=
"float: left">
75 When
<em>Shift+Enter
</em> is pressed:
<br>
76 <select id=
"xShiftEnter" onchange=
"changeEnter();">
77 <option value=
"1">Create a new
<P
></option>
78 <option value=
"3">Create a new
<DIV
></option>
79 <option selected=
"selected" value=
"2">Break the line with a
<BR
> (recommended)
</option>
82 <br style=
"clear: both">
83 <form action=
"../../../samples/sample_posteddata.php" method=
"post">
86 <textarea cols=
"80" id=
"editor1" name=
"editor1" rows=
"10">This is some
<strong
>sample text
</strong
>. You are using
<a
href=
"http://ckeditor.com/">CKEditor
</a
>.
</textarea>
89 <input type=
"submit" value=
"Submit">
95 CKEditor - The text editor for the Internet -
<a class=
"samples" href=
"http://ckeditor.com/">http://ckeditor.com
</a>
98 Copyright
© 2003-
2014,
<a class=
"samples" href=
"http://cksource.com/">CKSource
</a> - Frederico
99 Knabben. All rights reserved.