Skip to content
Branch: master
Find file Copy path
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
134 lines (117 sloc) 5.12 KB
<!DOCTYPE html>
Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
For licensing, see or
<meta charset="utf-8">
<meta name="description" content="Configuring the behavior of &lt;kbd&gt;Enter&lt;/kbd&gt; and &lt;kbd&gt;Shift+Enter&lt;/kbd&gt; keys.">
<meta name="keywords" content="ckeditor, editor, wysiwyg, enter, shift, key, keystroke, break, paragraph, output, configure, configuration, setup, settings, options, customization, customize, customise, customisation, config, modification, modify, change">
<meta name="sdk-samples" content="Enter key configuration">
<meta name="sdk-category" content="sdk-output-control">
<meta name="sdk-order" content="30">
<title>Enter Key Configuration</title>
<link href=",500,400" rel="stylesheet">
<link href="../template/theme/css/sdk.css" rel="stylesheet">
<script src="../../ckeditor-dev/ckeditor.js"></script>
<script src="assets/picoModal-2.0.1.min.js"></script>
<script src="assets/sample.js"></script>
<script src="assets/contentloaded.js"></script>
<script src="assets/simplesample.js"></script>
<script src="assets/beautify-html.js"></script>
<!--[if lt IE 9]>
<script src="assets/html5shiv.min.js"></script>
<link rel="icon" href="../template/theme/img/favicon.ico">
<header class="sdk-header">
<section class="sdk-container">
<nav class="sdk-sidebar">
<section class="sdk-contents">
var editor;
function changeEnter() {
// If an editor instance exists, destroy it first.
if ( editor )
editor.destroy( true );
// Create an editor instance again, with appropriate settings.
editor = CKEDITOR.replace( 'editor1', {
height: 120,
enterMode: Number( document.getElementById( 'xEnter' ).value ),
shiftEnterMode: Number( document.getElementById( 'xShiftEnter' ).value )
window.onload = changeEnter;
<h1>Enter Key Configuration <a class="documentation" href="">Documentation</a></h1>
This sample shows how to configure the <kbd>Enter</kbd> and <kbd>Shift+Enter</kbd> keys
to perform actions specified in the
<code><a href="">config.enterMode</a></code>
and <code><a href="">config.shiftEnterMode</a></code>
settings, respectively.
You can play with different settings for the <kbd>Enter</kbd> and <kbd>Shift+Enter</kbd>
keys below and then add some text in the editor. See what effect these settings have
by clicking the <span class="button_icon" data-icon="source" title="Source">&nbsp;</span>
<strong>Source</strong> toolbar button and examining the source code.
<div style="float: left; margin-right: 20px">
When <kbd>Enter</kbd> is pressed:<br>
<select id="xEnter" onchange="changeEnter();">
<option selected="selected" value="1">Create a new &lt;p&gt; (recommended)</option>
<option value="3">Create a new &lt;div&gt;</option>
<option value="2">Break the line with a &lt;br&gt;</option>
<div style="float: left">
When <kbd>Shift+Enter</kbd> is pressed:<br>
<select id="xShiftEnter" onchange="changeEnter();">
<option value="1">Create a new <code>&lt;p&gt;</code></option>
<option value="3">Create a new &lt;div&gt;</option>
<option selected="selected" value="2">Break the line with a &lt;br&gt; (recommended)</option>
<br style="clear: both">
<textarea cols="80" id="editor1" name="editor1" rows="10" data-sample="1">
This is some sample text.
<div class="tip">
Changing the <a href="">Enter Mode</a>
setting to <code>BR</code> or <code>DIV</code> is not recommended. The default
<code><a href="">CKEDITOR.ENTER_P</a></code>
mode is fully supported by all editor features and plugins and is also the most correct one
in terms of best practices for creating web content.
If you want to change it to control paragraph spacing, you should use stylesheets instead. Edit the
<code>contents.css</code> file and set up a suitable margin value for <code>&lt;p&gt;</code>
elements, for example:
<pre><code class="css">p { margin: 0; }</code></pre>
<script type="template" data-sample="1">
CKEDITOR.replace( 'editor1', {
// Pressing Enter will create a new &lt;div&gt; element.
// Pressing Shift+Enter will create a new &lt;p&gt; element.
shiftEnterMode: CKEDITOR.ENTER_P
} );
<footer class="sdk-footer">
You can’t perform that action at this time.