2009-10-10 00:15:12 -07:00
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!--
2011-05-16 20:19:32 -07:00
Copyright (c) 2003-2011, CKSource - Frederico Knabben. All rights reserved.
2009-10-10 00:15:12 -07:00
For licensing, see LICENSE.html or http://ckeditor.com/license
-->
< html xmlns = "http://www.w3.org/1999/xhtml" >
< head >
2011-05-16 20:19:32 -07:00
< title > ENTER Key Configuration — CKEditor Sample< / title >
2010-04-26 18:15:27 -07:00
< meta content = "text/html; charset=utf-8" http-equiv = "content-type" / >
2009-10-10 00:15:12 -07:00
< script type = "text/javascript" src = "../ckeditor.js" > < / script >
< script src = "sample.js" type = "text/javascript" > < / script >
2010-04-26 18:15:27 -07:00
< link href = "sample.css" rel = "stylesheet" type = "text/css" / >
< script type = "text/javascript" >
2009-10-10 00:15:12 -07:00
//< ![CDATA[
var editor;
function changeEnter()
{
// If we already have an editor, let's destroy it first.
if ( editor )
editor.destroy( true );
// Create the editor again, with the appropriate settings.
editor = CKEDITOR.replace( 'editor1',
{
enterMode : Number( document.getElementById( 'xEnter' ).value ),
shiftEnterMode : Number( document.getElementById( 'xShiftEnter' ).value )
});
}
window.onload = changeEnter;
//]]>
< / script >
< / head >
< body >
2011-05-16 20:19:32 -07:00
< h1 class = "samples" >
CKEditor Sample — ENTER Key Configuration
2009-10-10 00:15:12 -07:00
< / h1 >
2011-05-16 20:19:32 -07:00
< div class = "description" >
< p >
This sample shows how to configure the < em > Enter< / em > and < em > Shift+Enter< / em > keys
to perform actions specified in the
< a class = "samples" href = "http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.config.html#.enterMode" > < code > enterMode< / code > < / a >
and < a class = "samples" href = "http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.config.html#.shiftEnterMode" > < code > shiftEnterMode< / code > < / a >
parameters, respectively.
You can choose from the following options:
< / p >
< ul class = "samples" >
< li > < strong > < code > ENTER_P< / code > < / strong > – new < code > < p> < / code > paragraphs are created;< / li >
< li > < strong > < code > ENTER_BR< / code > < / strong > – lines are broken with < code > < br> < / code > elements;< / li >
< li > < strong > < code > ENTER_DIV< / code > < / strong > – new < code > < div> < / code > blocks are created.< / li >
< / ul >
< p >
The sample code below shows how to configure CKEditor to create a < code > < div> < / code > block when < em > Enter< / em > key is pressed.
< / p >
< pre class = "samples" > CKEDITOR.replace( '< em > textarea_id< / em > ',
{
< strong > enterMode : CKEDITOR.ENTER_DIV< / strong >
});< / pre >
< p >
Note that < code > < em > textarea_id< / em > < / code > in the code above is the < code > id< / code > attribute of
the < code > < textarea> < / code > element to be replaced.
< / p >
< / div >
2009-10-10 00:15:12 -07:00
<!-- This <div> holds alert messages to be display in the sample page. -->
< div id = "alerts" >
< noscript >
< p >
< strong > CKEditor requires JavaScript to run< / strong > . In a browser with no JavaScript
support, like yours, you should still see the contents (HTML data) and you should
be able to edit it normally, without a rich editor interface.
< / p >
< / noscript >
< / div >
< div style = "float: left; margin-right: 20px" >
2011-05-16 20:19:32 -07:00
When < em > Enter< / em > is pressed:< br / >
2010-04-26 18:15:27 -07:00
< select id = "xEnter" onchange = "changeEnter();" >
2011-05-16 20:19:32 -07:00
< option selected = "selected" value = "1" > Create a new < P> (recommended)< / option >
< option value = "3" > Create a new < DIV> < / option >
2010-04-26 18:15:27 -07:00
< option value = "2" > Break the line with a < BR> < / option >
< / select >
< / div >
< div style = "float: left" >
2011-05-16 20:19:32 -07:00
When < em > Shift+Enter< / em > is pressed:< br / >
2010-04-26 18:15:27 -07:00
< select id = "xShiftEnter" onchange = "changeEnter();" >
2011-05-16 20:19:32 -07:00
< option value = "1" > Create a new < P> < / option >
< option value = "3" > Create a new < DIV> < / option >
2010-04-26 18:15:27 -07:00
< option selected = "selected" value = "2" > Break the line with a < BR> (recommended)< / option >
< / select >
< / div >
< br style = "clear: both" / >
< form action = "sample_posteddata.php" method = "post" >
< p >
< br / >
< 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 >
< / p >
< p >
< input type = "submit" value = "Submit" / >
< / p >
< / form >
2009-10-10 00:15:12 -07:00
< div id = "footer" >
2010-04-26 18:15:27 -07:00
< hr / >
2009-10-10 00:15:12 -07:00
< p >
2011-05-16 20:19:32 -07:00
CKEditor - The text editor for the Internet - < a class = "samples" href = "http://ckeditor.com/" > http://ckeditor.com< / a >
2009-10-10 00:15:12 -07:00
< / p >
< p id = "copy" >
2011-05-16 20:19:32 -07:00
Copyright © 2003-2011, < a class = "samples" href = "http://cksource.com/" > CKSource< / a > - Frederico
2010-04-26 18:15:27 -07:00
Knabben. All rights reserved.
2009-10-10 00:15:12 -07:00
< / p >
< / div >
< / body >
< / html >
