CKEDITOR.config
Stores default configuration settings. Changes to this object are reflected in all editor instances, if not specified otherwise for a particular instance.
Read more about setting CKEditor configuration in the documentation.
Filtering
Config options
-
Allowed content rules. This setting is used when instantiating CKEDITOR.editor.filter.
The following values are accepted:
- CKEDITOR.filter.allowedContentRules – defined rules will be added to the CKEDITOR.editor.filter.
true– will disable the filter (data will not be filtered, all features will be activated). Reading security best practices before settingtrueis recommended.- default – the filter will be configured by loaded features (toolbar items, commands, etc.).
In all cases filter configuration may be extended by extraAllowedContent. This option may be especially useful when you want to use the default
allowedContentvalue along with some additional rules.CKEDITOR.replace( 'textarea_id', { allowedContent: 'p b i; a[!href]', on: { instanceReady: function( evt ) { var editor = evt.editor; editor.filter.check( 'h1' ); // -> false editor.setData( '<h1><i>Foo</i></h1><p class="left"><span>Bar</span> <a href="http://foo.bar">foo</a></p>' ); // Editor contents will be: '<p><i>Foo</i></p><p>Bar <a href="http://foo.bar">foo</a></p>' } } } );It is also possible to disallow some already allowed content. It is especially useful when you want to "trim down" the content allowed by default by editor features. To do that, use the disallowedContent option.
Read more in the documentation and see the example.
Defaults to
null -
Customizes the human-readable title of the application for this editor. This title is used as a label for the whole website's region containing the editor with its toolbars and other UI parts. Application title impacts various accessibility aspects, e.g. it is commonly used by screen readers for distinguishing editor instances and for navigation. Accepted values are a string or
false.Note: When
config.applicationTitleis set globally, the same value will be applied to all editor instances loaded with this config. This may adversely affect accessibility as screen reader users will be unable to distinguish particular editor instances and navigate between them.Note: Setting
config.applicationTitle = falsemay also impair accessibility in a similar way.Note: Please do not confuse this property with CKEDITOR.editor.name which identifies the instance in the CKEDITOR.instances literal.
// Set the application title to 'My WYSIWYG'. config.applicationTitle = 'My WYSIWYG'; // Do not add the application title. config.applicationTitle = false;See also:
Defaults to
based on editor.name -
Specifies the widget to use to automatically embed a link. The default value of this option defines that either the Media Embed or Semantic Media Embed widgets will be used, depending on which is enabled.
The general behavior:
- If a string (widget names separated by commas) is provided, then the first of the listed widgets which is registered
will be used. For example, if
'foo,bar,bom'is set and widgets'bar'and'bom'are registered, then'bar'will be used. - If a callback is specified, then it will be executed with the URL to be embedded and it should return the name of the widget to be used. It allows to use different embed widgets for different URLs.
Example:
// Defines that embedSemantic should be used (regardless of whether embed is defined). config.autoEmbed_widget = 'embedSemantic';Using with custom embed widgets:
config.autoEmbed_widget = 'customEmbed';Note: Plugin names are always lower case, while widget names are not, so widget names do not have to equal plugin names. For example, there is the
embedsemanticplugin and theembedSemanticwidget.Read more in the documentation and see the example.
Defaults to
'embed,embedSemantic' - If a string (widget names separated by commas) is provided, then the first of the listed widgets which is registered
will be used. For example, if
-
Extra vertical space to be added between the content and the editor bottom bar when adjusting editor height to content by using the Auto Grow feature. This option accepts a value in pixels, without the unit (for example:
50).Read more in the documentation and see the example.
config.autoGrow_bottomSpace = 50;Defaults to
0 -
The maximum height that the editor can assume when adjusting to content by using the Auto Grow feature. This option accepts a value in pixels, without the unit (for example:
600). Zero (0) means that the maximum height is not limited and the editor will expand infinitely.Read more in the documentation and see the example.
config.autoGrow_maxHeight = 400;Defaults to
0 -
The minimum height that the editor can assume when adjusting to content by using the Auto Grow feature. This option accepts a value in pixels, without the unit (for example:
300).Read more in the documentation and see the example.
config.autoGrow_minHeight = 300;Defaults to
200 -
Whether automatic editor height adjustment brought by the Auto Grow feature should happen on editor creation.
Read more in the documentation and see the example.
config.autoGrow_onStartup = true;Defaults to
false -
Whether to automatically create wrapping blocks around inline content inside the document body. This helps to ensure the integrity of the block Enter mode.
Note: This option is deprecated. Changing the default value might introduce unpredictable usability issues and is highly unrecommended.
config.autoParagraph = false;Defaults to
true -
autoUpdateElement : BooleanCKEDITOR.config#autoUpdateElementWhether the element replaced by the editor (usually a
<textarea>) is to be updated automatically when posting the form containing the editor.Defaults to
true -
since 4.10.0
autocomplete_commitKeystrokes : Number | Number[]CKEDITOR.config#autocomplete_commitKeystrokesThe autocomplete keystrokes used to finish autocompletion with the selected view item. This setting will set completing keystrokes for each autocomplete plugin respectively.
To change completing keystrokes individually use the CKEDITOR.plugins.autocomplete.commitKeystrokes plugin property.
// Default configuration (9 = Tab, 13 = Enter). config.autocomplete_commitKeystrokes = [ 9, 13 ];Commit keystroke can also be disabled by setting it to an empty array.
// Disable autocomplete commit keystroke. config.autocomplete_commitKeystrokes = [];Defaults to
[9, 13] -
The Auto Link plugin keystrokes used to finish link completion.
// Default configuration (13 = Enter, 32 = space). config.autolink_commitKeystrokes = [ 9, 13 ];Commit keystrokes can be also disabled by setting it to an empty array.
// Disable autolink commit keystrokes. config.autolink_commitKeystrokes = [];Defaults to
[ 13, 32 ] -
Regex used by the Auto Link plugin to match email adresses.
Defaults to
/^[a-zA-Z0-9.!#$%&'*+\/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/ -
Regex used by the Auto Link plugin to match URL adresses.
Defaults to
/^(https?|ftp):\/\/(-\.)?([^\s\/?\.#]\.?)+(\/[^\s]*)?[^\s\.,]$/i -
baseFloatZIndex : NumberCKEDITOR.config#baseFloatZIndexThe base Z-index for floating dialog windows and popups.
config.baseFloatZIndex = 2000;Defaults to
10000 -
baseHref : StringCKEDITOR.config#baseHrefThe base href URL used to resolve relative and absolute URLs in the editor content.
config.baseHref = 'http://www.example.com/path/';Defaults to
'' -
basicEntities : BooleanCKEDITOR.config#basicEntitiesWhether to escape basic HTML entities in the document, including:
><&
Note: This option should not be changed unless when outputting a non-HTML data format like BBCode.
config.basicEntities = false;Defaults to
true -
blockedKeystrokes : ArrayCKEDITOR.config#blockedKeystrokesThe keystrokes that are blocked by default as the browser implementation is buggy. These default keystrokes are handled by the editor.
// Default setting. config.blockedKeystrokes = [ CKEDITOR.CTRL + 66, // Ctrl+B CKEDITOR.CTRL + 73, // Ctrl+I CKEDITOR.CTRL + 85 // Ctrl+U ];Defaults to
see example -
Sets the
classattribute to be used on thebodyelement of the editing area. This can be useful when you intend to reuse the original CSS file you are using on your live website and want to assign the editor the same class as the section that will include the contents. In this way class-specific CSS rules will be enabled.config.bodyClass = 'contents';Note: The editor needs to load stylesheets containing contents styles. You can either copy them to the
contents.cssfile that the editor loads by default or set the contentsCss option.Note: This setting only applies to classic editor (the one that uses
iframe).Defaults to
'' -
Sets the
idattribute to be used on thebodyelement of the editing area. This can be useful when you intend to reuse the original CSS file you are using on your live website and want to assign the editor the same ID as the section that will include the contents. In this way ID-specific CSS rules will be enabled.config.bodyId = 'contents_id';Defaults to
'' -
Whether to show the browser native context menu when the Ctrl or Meta (Mac) key is pressed on opening the context menu with the right mouse button click or the Menu key.
config.browserContextMenuOnCtrl = false;Defaults to
true -
since 4.0.0
clipboard_defaultContentType : 'html' | 'text'CKEDITOR.config#clipboard_defaultContentTypeThe default content type that is used when pasted data cannot be clearly recognized as HTML or text.
For example:
'foo'may come from a plain text editor or a website. It is not possible to recognize the content type in this case, so the default type will be used. At the same time it is clear that'<b>example</b> text'is HTML and its origin is a web page, email or another rich text editor.Note: If content type is text, then styles of the paste context are preserved.
CKEDITOR.config.clipboard_defaultContentType = 'text';See also the CKEDITOR.editor.paste event and read more about the integration with clipboard in the Clipboard Deep Dive guide.
Defaults to
'html' -
Whether to use clipboard plugin to handle image pasting and dropping, turning images into base64 strings on browsers supporting the File API.
Defaults to
true -
Duration of the notification displayed after pasting was blocked by the browser.
Defaults to
10000 -
The URL to the security token endpoint in your application. The role of this endpoint is to securely authorize the end users of your application to use CKEditor Cloud Services, only if they should have access e.g. to upload files with Easy Image.
You can find more information about token endpoints in the Easy Image - Quick Start and Cloud Services - Creating token endpoint documentation.
Without a properly working token endpoint (token URL) CKEditor plugins will not be able to connect to CKEditor Cloud Services.
CKEDITOR.replace( 'editor', { extraPlugins: 'easyimage', cloudServices_tokenUrl: 'https://example.com/cs-token-endpoint', cloudServices_uploadUrl: 'https://your-organization-id.cke-cs.com/easyimage/upload/' } );Defaults to
'' -
The endpoint URL for CKEditor Cloud Services uploads. This option must be set for Easy Image to work correctly.
The upload URL is unique for each customer and can be found in the CKEditor Ecosystem dashboard after subscribing to the Easy Image service. To learn how to start using Easy Image, refer to the Easy Image Integration documentation.
Note: Make sure to also set the cloudServices_tokenUrl configuration option.
CKEDITOR.replace( 'editor', { extraPlugins: 'easyimage', cloudServices_tokenUrl: 'https://example.com/cs-token-endpoint', cloudServices_uploadUrl: 'https://your-organization-id.cke-cs.com/easyimage/upload/' } );Defaults to
'' -
codeSnippetGeshi_url : StringCKEDITOR.config#codeSnippetGeshi_urlSets GeSHi URL which, once queried with Ajax, will return highlighted code.
Check the Code Snippet GeSHi documentation for more information.
config.codeSnippetGeshi_url = 'http:\/\/example.com\/geshi\/colorize.php';Defaults to
null -
A CSS class of the
<code>element used internally for styling (by default highlight.js themes, see config.codeSnippet_theme), which means that it is not present in the editor output data.// Changes the class to "myCustomClass". config.codeSnippet_codeClass = 'myCustomClass';Note: The class might need to be changed when you are using a custom highlighter (the default is highlight.js). See CKEDITOR.plugins.codesnippet.highlighter to read more.
Read more in the documentation and see the example.
Defaults to
'hljs' -
Restricts languages available in the "Code Snippet" dialog window. An empty value is always added to the list.
Note: If using a custom highlighter library (the default is highlight.js), you may need to refer to external documentation to set
config.codeSnippet_languagesproperly.Read more in the documentation and see the example.
// Restricts languages to JavaScript and PHP. config.codeSnippet_languages = { javascript: 'JavaScript', php: 'PHP' };Defaults to
null -
A theme used to render code snippets. See available themes.
Note: This will only work with the default highlighter (highlight.js).
Read more in the documentation and see the example.
// Changes the theme to "pojoaque". config.codeSnippet_theme = 'pojoaque';Defaults to
'default' -
colorButton_backStyle : ObjectCKEDITOR.config#colorButton_backStyleStores the style definition that applies the text background color.
Note: Advanced Content Filter (ACF) is not updated automatically by a custom style definition. You may need to add additional ACF rules, so the customized style element is not removed. Learn more how to configure ACF with Advanced Content Filter guide.
Read more in the documentation and see the example.
// This is actually the default value. config.colorButton_backStyle = { element: 'span', styles: { 'background-color': '#(color)' } };Since 4.15.0: Added
colorNameproperty, which can be used instead of acolorproperty to customize background style. For example to add custom class:config.colorButton_backStyle = { element: 'span', attributes: { 'class': '#(colorName)' } };Defaults to
{element: 'span', styles: {'background-color': '#(color)'}} -
colorButton_colors : StringCKEDITOR.config#colorButton_colorsDefines the colors to be displayed in the color selectors. This is a string containing hexadecimal notation for HTML colors, without the
'#'prefix.Since 3.3: A color name may optionally be defined by prefixing the entries with a name and the slash character. For example,
'FontColor1/FF9900'will be displayed as the color#FF9900in the selector, but will be output as'FontColor1'. This behaviour was altered in version 4.12.0.Since 4.6.2: The default color palette has changed. It contains fewer colors in more pastel shades than the previous one.
Since 4.12.0: Defining colors with names works in a different way. Colors names can be defined by
colorName/colorCode. The color name is only used in the tooltip. The output will now use the color code. For example,FontColor/FF9900will be displayed as the color#FF9900in the selector, and will be output as#FF9900.Read more in the documentation and see the example.
// Brazil colors only. config.colorButton_colors = '00923E,F8C100,28166F'; config.colorButton_colors = 'FontColor1/FF9900,FontColor2/0066CC,FontColor3/F00'; // CKEditor color palette available before version 4.6.2. config.colorButton_colors = '000,800000,8B4513,2F4F4F,008080,000080,4B0082,696969,' + 'B22222,A52A2A,DAA520,006400,40E0D0,0000CD,800080,808080,' + 'F00,FF8C00,FFD700,008000,0FF,00F,EE82EE,A9A9A9,' + 'FFA07A,FFA500,FFFF00,00FF00,AFEEEE,ADD8E6,DDA0DD,D3D3D3,' + 'FFF0F5,FAEBD7,FFFFE0,F0FFF0,F0FFFF,F0F8FF,E6E6FA,FFF';Defaults to
'1ABC9C,2ECC71,3498DB,9B59B6,4E5F70,F1C40F,' + '16A085,27AE60,2980B9,8E44AD,2C3E50,F39C12,' + 'E67E22,E74C3C,ECF0F1,95A5A6,DDD,FFF,' + 'D35400,C0392B,BDC3C7,7F8C8D,999,000' -
Defines how many colors will be shown per row in the color selectors.
Read more in the documentation and see the example.
config.colorButton_colorsPerRow = 8;Defaults to
6 -
The CSS file(s) to be used to apply the style to the color button menu content.
config.colorButton_contentsCss = '/css/myfile.css'; config.colorButton_contentsCss = [ '/css/myfile.css', '/css/anotherfile.css' ];Defaults to
[] -
colorButton_enableAutomatic : BooleanCKEDITOR.config#colorButton_enableAutomaticWhether to enable the Automatic button in the color selectors.
Read more in the documentation and see the example.
config.colorButton_enableAutomatic = false;Defaults to
true -
colorButton_enableMore : BooleanCKEDITOR.config#colorButton_enableMoreWhether to enable the More Colors button in the color selectors.
Read more in the documentation and see the example.
config.colorButton_enableMore = false;Defaults to
true -
colorButton_foreStyle : ObjectCKEDITOR.config#colorButton_foreStyleStores the style definition that applies the text foreground color.
Note: Advanced Content Filter (ACF) is not updated automatically by a custom style definition. You may need to add additional ACF rules, so the customized style element is not removed. Learn more how to configure ACF with Advanced Content Filter guide.
Read more in the documentation and see the example.
// This is actually the default value. config.colorButton_foreStyle = { element: 'span', styles: { color: '#(color)' } };Since 4.15.0: Added
colorNameproperty, which can be used instead of acolorproperty to customize foreground style. For example to add custom class:config.colorButton_foreStyle = { element: 'span', attributes: { 'class': '#(colorName)' } };Defaults to
{element: 'span', styles: {'color': '#(color)'}, overrides: [{element: 'font', attributes: {'color': null}}]} -
Defines how many color history rows can be created.
config.colorButton_historyRowLimit = 2;Defaults to
1 -
since 4.6.1
colorButton_normalizeBackground : BooleanCKEDITOR.config#colorButton_normalizeBackgroundWhether the plugin should convert
backgroundCSS properties with color only, to abackground-colorproperty, allowing the Color Button plugin to edit these styles.config.colorButton_normalizeBackground = false;Defaults to
true -
since 4.15.0
colorButton_renderContentColors : NumberCKEDITOR.config#colorButton_renderContentColorsDefines if color history should be initially filled by colors found in content.
config.colorButton_renderContentColors = false;Defaults to
true -
contentsCss : String | ArrayCKEDITOR.config#contentsCssThe CSS file(s) to be used to apply style to editor content. It should reflect the CSS used in the target pages where the content is to be displayed.
Note: This configuration value is used only in
<iframe>-based editor and ignored by inline editor as it uses the styles that come directly from the page that CKEditor is rendered on. It is also ignored in the full page mode in which the developer has full control over the page HTML code.Read more in the documentation and see the example.
config.contentsCss = '/css/mysitestyles.css'; config.contentsCss = [ '/css/mysitestyles.css', '/css/anotherfile.css' ];Defaults to
CKEDITOR.getUrl( 'contents.css' ) -
contentsLangDirection : StringCKEDITOR.config#contentsLangDirectionThe writing direction of the language which is used to create editor content. Allowed values are:
''(an empty string) – Indicates that content direction will be the same as either the editor UI direction or the page element direction depending on the editor type:- Classic editor – The same as the user interface language direction.
- Inline editor– The same as the editable element text direction.
'ltr'– Indicates a Left-To-Right text direction (like in English).'rtl'– Indicates a Right-To-Left text direction (like in Arabic).
See the example.
Example:
config.contentsLangDirection = 'rtl';Defaults to
'' -
contentsLanguage : StringCKEDITOR.config#contentsLanguageLanguage code of the writing language which is used to author the editor content. This option accepts one single entry value in the format defined in the Tags for Identifying Languages (BCP47) IETF document and is used in the
langattribute.config.contentsLanguage = 'fr';Defaults to
same value with editor's UI language -
The CSS file(s) to be used to apply the style to the context menu content.
config.contextmenu_contentsCss = '/css/myfile.css'; config.contextmenu_contentsCss = [ '/css/myfile.css', '/css/anotherfile.css' ];Defaults to
CKEDITOR.skin.getPath( 'editor' ) -
Defines rules for the elements from which the styles should be fetched. If set to
true, it will disable filtering.This property is using Advanced Content Filter syntax. You can learn more about it in the Content Filtering (ACF) documentation.
config.copyFormatting_allowRules = 'span(*)[*]{*}'; // Allows only spans. config.copyFormatting_allowRules = true; // Disables filtering.Read more in the documentation and see the example.
Defaults to
'b; s; u; strong; span; p; div; table; thead; tbody; ' + 'tr; td; th; ol; ul; li; (*)[*]{*}' -
since 4.6.0
copyFormatting_allowedContexts : Boolean | String[]CKEDITOR.config#copyFormatting_allowedContextsDefines which contexts should be enabled in the Copy Formatting plugin. Available contexts are:
'text'– Plain text context.'list'– List context.'table'– Table context.
Examples:
// Enables only plain text context. config.copyFormatting_allowedContexts = [ 'text' ]; // If set to "true", enables all contexts. config.copyFormatting_allowedContexts = true;Read more in the documentation and see the example.
Defaults to
true -
Defines rules for the elements from which fetching styles is explicitly forbidden (eg. widgets).
This property is using Advanced Content Filter syntax. You can learn more about it in the Content Filtering (ACF) documentation.
config.copyFormatting_disallowRules = 'span(important)'; // Disallows spans with "important" class.Read more in the documentation and see the example.
Defaults to
'*[data-cke-widget*,data-widget*,data-cke-realelement](cke_widget*)' -
Defines the keyboard shortcut for copying styles.
config.copyFormatting_keystrokeCopy = CKEDITOR.CTRL + CKEDITOR.SHIFT + 66; // Ctrl+Shift+BThe keyboard shortcut can also be switched off:
config.copyFormatting_keystrokeCopy = false;Read more in the documentation and see the example.
Defaults to
CKEDITOR.CTRL + CKEDITOR.SHIFT + 67 -
Defines the keyboard shortcut for applying styles.
config.copyFormatting_keystrokePaste = CKEDITOR.CTRL + CKEDITOR.SHIFT + 77; // Ctrl+Shift+MThe keyboard shortcut can also be switched off:
config.copyFormatting_keystrokePaste = false;Read more in the documentation and see the example.
Defaults to
CKEDITOR.CTRL + CKEDITOR.SHIFT + 86 -
Defines if the "disabled" cursor should be attached to the whole page when the Copy Formatting plugin is active.
"Disabled" cursor indicates that Copy Formatting will not work in the place where the mouse cursor is placed.
config.copyFormatting_outerCursor = false;Read more in the documentation and see the example.
Defaults to
true -
coreStyles_bold : ObjectCKEDITOR.config#coreStyles_boldThe style definition that applies the bold style to the text.
Read more in the documentation and see the example.
config.coreStyles_bold = { element: 'b', overrides: 'strong' }; config.coreStyles_bold = { element: 'span', attributes: { 'class': 'Bold' } };Defaults to
{ element: 'strong', overrides: 'b' } -
coreStyles_italic : ObjectCKEDITOR.config#coreStyles_italicThe style definition that applies the italics style to the text.
Read more in the documentation and see the example.
config.coreStyles_italic = { element: 'i', overrides: 'em' }; CKEDITOR.config.coreStyles_italic = { element: 'span', attributes: { 'class': 'Italic' } };Defaults to
{ element: 'em', overrides: 'i' } -
coreStyles_strike : ObjectCKEDITOR.config#coreStyles_strikeThe style definition that applies the
strikethroughstyle to the text.Read more in the documentation and see the example.
CKEDITOR.config.coreStyles_strike = { element: 'span', attributes: { 'class': 'Strikethrough' }, overrides: 'strike' };Defaults to
{ element: 's', overrides: 'strike' } -
coreStyles_subscript : ObjectCKEDITOR.config#coreStyles_subscriptThe style definition that applies the subscript style to the text.
Read more in the documentation and see the example.
CKEDITOR.config.coreStyles_subscript = { element: 'span', attributes: { 'class': 'Subscript' }, overrides: 'sub' };Defaults to
{ element: 'sub' } -
coreStyles_superscript : ObjectCKEDITOR.config#coreStyles_superscriptThe style definition that applies the superscript style to the text.
Read more in the documentation and see the example.
CKEDITOR.config.coreStyles_superscript = { element: 'span', attributes: { 'class': 'Superscript' }, overrides: 'sup' };Defaults to
{ element: 'sup' } -
Disallow setting subscript and superscript simultaneously on the same element using UI buttons.
By default, you can apply subscript and superscript styles to the same element. Enabling that option will remove the superscript style when the subscript button is pressed and vice versa.
Defaults to
false -
coreStyles_underline : ObjectCKEDITOR.config#coreStyles_underlineThe style definition that applies the underline style to the text.
Read more in the documentation and see the example.
CKEDITOR.config.coreStyles_underline = { element: 'span', attributes: { 'class': 'Underline' } };Defaults to
{ element: 'u' } -
customConfig : StringCKEDITOR.config#customConfigThe URL path to the custom configuration file to be loaded. If not overwritten with inline configuration, it defaults to the
config.jsfile present in the root of the CKEditor installation directory.CKEditor will recursively load custom configuration files defined inside other custom configuration files.
Read more about setting CKEditor configuration in the documentation.
// Load a specific configuration file. CKEDITOR.replace( 'myfield', { customConfig: '/myconfig.js' } ); // Do not load any custom configuration file. CKEDITOR.replace( 'myfield', { customConfig: '' } );Defaults to
"<CKEditor folder>/config.js" -
dataIndentationChars : StringCKEDITOR.config#dataIndentationCharsThe characters to be used for indenting HTML output produced by the editor. Using characters different from
' '(space) and'\t'(tab) is not recommended as it will mess the code.// No indentation. CKEDITOR.config.dataIndentationChars = ''; // Use two spaces for indentation. CKEDITOR.config.dataIndentationChars = ' ';Defaults to
'\t' -
defaultLanguage : StringCKEDITOR.config#defaultLanguageThe language to be used if the language setting is left empty and it is not possible to localize the editor to the user language.
Read more in the documentation and see the example.
config.defaultLanguage = 'it';Defaults to
'en' -
If set to
true, editor will be only created when its root element is attached to DOM. In case the element is detached, the editor will wait for the element to be attached and initialized then.For more control over the entire process refer to delayIfDetached_callback and delayIfDetached_interval configuration options.
config.delayIfDetached = true;Defaults to
false -
Function used to initialize delayed editor creation.
It accepts a single
callbackargument. Acallbackargument is another function that triggers editor creation. This allows to store the editor creation function (callback) and invoke it whenever necessary instead of periodically check if element is attached to DOM to improve performance.Used only if delayIfDetached is set to
true.Note: This function (
callback) should be called only if editor target element is reattached to DOM.If this option is defined, editor will not run the default interval checks.
// Store the reference to the editor creation function. var resumeEditorCreation; config.delayIfDetached_callback = function( createEditor ) { resumeEditorCreation = createEditor; }; // Create editor calling `resumeEditorCreation()` whenever you choose (e.g. on button click). resumeEditorCreation();Defaults to
undefined -
The amount of time (in milliseconds) between consecutive checks whether editor's target element is attached to DOM.
Used only if delayIfDetached is set to
trueand delayIfDetached_callback not set.config.delayIfDetached_interval = 2000; // Try to create editor every 2 seconds.Defaults to
50 -
A setting that stores CSS rules to be injected into the page with styles to be applied to the tooltip element.
Read more in the documentation and see the example.
// This is actually the default value. CKEDITOR.config.devtools_styles = '#cke_tooltip { padding: 5px; border: 2px solid #333; background: #ffffff }' + '#cke_tooltip h2 { font-size: 1.1em; border-bottom: 1px solid; margin: 0; padding: 1px; }' + '#cke_tooltip ul { padding: 0pt; list-style-type: none; }';Defaults to
see example -
A function that returns the text to be displayed inside the Developer Tools tooltip when hovering over a dialog UI element.
Read more in the documentation and see the example.
// This is actually the default value. // Show dialog window name, tab ID, and element ID. config.devtools_textCallback = function( editor, dialog, element, tabName ) { var lang = editor.lang.devtools, link = '<a href="https://ckeditor.com/docs/ckeditor4/latest/api/CKEDITOR_dialog_definition_' + ( element ? ( element.type == 'text' ? 'textInput' : element.type ) : 'content' ) + '.html" target="_blank">' + ( element ? element.type : 'content' ) + '</a>', str = '<h2>' + lang.title + '</h2>' + '<ul>' + '<li><strong>' + lang.dialogName + '</strong> : ' + dialog.getName() + '</li>' + '<li><strong>' + lang.tabName + '</strong> : ' + tabName + '</li>'; if ( element ) str += '<li><strong>' + lang.elementId + '</strong> : ' + element.id + '</li>'; str += '<li><strong>' + lang.elementType + '</strong> : ' + link + '</li>'; return str + '</ul>'; };Defaults to
see exampleParameters
editor : editordialogelementtabName
-
dialog_backgroundCoverColor : StringCKEDITOR.config#dialog_backgroundCoverColorThe color of the dialog background cover. It should be a valid CSS color string.
config.dialog_backgroundCoverColor = 'rgb(255, 254, 253)';Defaults to
'white' -
dialog_backgroundCoverOpacity : NumberCKEDITOR.config#dialog_backgroundCoverOpacityThe opacity of the dialog background cover. It should be a number within the range
[0.0, 1.0].config.dialog_backgroundCoverOpacity = 0.7;Defaults to
0.5 -
The guideline to follow when generating the dialog buttons. There are 3 possible options:
'OS'- the buttons will be displayed in the default order of the user's OS;'ltr'- for Left-To-Right order;'rtl'- for Right-To-Left order.
Example:
config.dialog_buttonsOrder = 'rtl';Defaults to
'OS' -
dialog_magnetDistance : NumberCKEDITOR.config#dialog_magnetDistanceThe distance of magnetic borders used in moving and resizing dialogs, measured in pixels.
config.dialog_magnetDistance = 30;Defaults to
20 -
Tells if user should not be asked to confirm close, if any dialog field was modified. By default it is set to
falsemeaning that the confirmation dialog will be shown.config.dialog_noConfirmCancel = true;Defaults to
false -
dialog_startupFocusTab : BooleanCKEDITOR.config#dialog_startupFocusTabIf the dialog has more than one tab, put focus into the first tab as soon as dialog is opened.
config.dialog_startupFocusTab = true;Defaults to
false -
disableNativeSpellChecker : BooleanCKEDITOR.config#disableNativeSpellCheckerDisables the built-in spell checker if the browser provides one.
Note: Although word suggestions provided natively by the browsers will not appear in CKEditor's default context menu, users can always reach the native context menu by holding the Ctrl key when right-clicking if browserContextMenuOnCtrl is enabled or you are simply not using the context menu plugin.
config.disableNativeSpellChecker = false;Defaults to
true -
disableNativeTableHandles : BooleanCKEDITOR.config#disableNativeTableHandlesDisables the "table tools" offered natively by the browser (currently Firefox only) to perform quick table editing operations, like adding or deleting rows and columns.
config.disableNativeTableHandles = false;Defaults to
true -
disableObjectResizing : BooleanCKEDITOR.config#disableObjectResizingDisables the ability to resize objects (images and tables) in the editing area.
config.disableObjectResizing = true;Note: Because of incomplete implementation of editing features in browsers this option does not work for inline editors (see ticket #10197), does not work in Internet Explorer 11+ (see #9317 and IE11+ issue). In Internet Explorer 8-10 this option only blocks resizing, but it is unable to hide the resize handles.
Defaults to
false -
-
Disallowed content rules. They have precedence over allowed content rules. Read more in the Disallowed Content guide.
Read more in the documentation and see the example. See also allowedContent and extraAllowedContent.
-
div_wrapTable : BooleanCKEDITOR.config#div_wrapTableWhether to wrap the entire table instead of individual cells when creating a
<div>in a table cell.config.div_wrapTable = true;Defaults to
false -
docType : StringCKEDITOR.config#docTypeSets the
DOCTYPEto be used when loading the editor content as HTML.// Set the DOCTYPE to the HTML 4 (Quirks) mode. config.docType = '<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">';Defaults to
'<!DOCTYPE html>' -
A CSS class applied to all Easy Image widgets. If set to
null, all<figure>elements are converted into widgets.// Changes the class to "my-image". config.easyimage_class = 'my-image'; // This will cause the plugin to convert any figure into a widget. config.easyimage_class = null;Defaults to
'easyimage' -
The default style to be applied to Easy Image widgets, based on keys in easyimage_styles.
If set to
null, no default style is applied.// Make side image a default style. config.easyimage_defaultStyle = 'side';Defaults to
'full' -
Custom styles that could be applied to the Easy Image widget. All styles must be valid style definitions. There are three additional properties for each style definition:
label– A string used as a button label in the balloon toolbar for the widget.icon– The path to the icon used in the balloon toolbar.iconHiDpi– The path to the high DPI version of the icon.
A few styles are available by default:
full– Adding aneasyimage-fullclass to thefigureelement.side– Adding aneasyimage-sideclass to thefigureelement.alignLeft– Adding aneasyimage-align-leftclass to thefigureelement.alignCenter– Adding aneasyimage-align-centerclass to thefigureelement.alignRight– Adding aneasyimage-align-rightclass to thefigureelement.
Every style added by this configuration variable will result in adding the
EasyImage<name>button and theeasyimage<name>command, where<name>is the name of the style in Pascal case. For example, theleftstyle would produce anEasyImageLeftbutton and aneasyimageLeftcommand.// Adds a custom alignment style. config.easyimage_styles = { left: { attributes: { 'class': 'left' }, label: 'Align left', icon: '/my/example/icons/left.png', iconHiDpi: '/my/example/icons/hidpi/left.png' } };The following example changes the class added by the
fullstyle and adds more border styles:config.easyimage_styles = { full: { // Changes just the class name, icon label remains unchanged. attributes: { 'class': 'my-custom-full-class' } }, skipBorder: { attributes: { 'class': 'skip-border' }, group: 'borders', label: 'Skip border' }, thickBorder: { attributes: { 'class': 'thick-border' }, group: 'borders', label: 'Thick border' } };Defaults to
{} -
A list of buttons to be displayed in the balloon toolbar for the Easy Image widget.
If the Context Menu plugin is enabled, this configuration option will also be used to add items to the context menu for the Easy Image widget.
You can find the list of available styles in easyimage_styles.
// Change toolbar to alignment commands. config.easyimage_toolbar = [ 'EasyImageAlignLeft', 'EasyImageAlignCenter', 'EasyImageAlignRight' ];Defaults to
[ 'EasyImageFull', 'EasyImageSide', 'EasyImageAlt' ] -
The text that will be used as a placeholder inside the editor.
config.editorplaceholder = 'Type your comment…';If it is set to a falsy value like an empty string, it will disable the placeholder.
// Disable the placeholder. config.editorplaceholder = '';Defaults to
'' -
The delay in milliseconds before the placeholder is toggled when changing editor's text.
The main purpose of this option is to improve performance when typing in the editor, so that the placeholder is not updated every time the user types a character.
Defaults to
150 -
The e-mail address anti-spam protection option. The protection will be applied when creating or modifying e-mail links through the editor interface.
Two methods of protection can be chosen:
- The e-mail parts (name, domain, and any other query string) are assembled into a function call pattern. Such function must be provided by the developer in the pages that will use the contents.
- Only the e-mail address is obfuscated into a special string that has no meaning for humans or spam bots, but which is properly rendered and accepted by the browser.
Both approaches require JavaScript to be enabled.
// href="mailto:tester@ckeditor.com?subject=subject&body=body" config.emailProtection = ''; // href="<a href=\"javascript:void(location.href=\'mailto:\'+String.fromCharCode(116,101,115,116,101,114,64,99,107,101,100,105,116,111,114,46,99,111,109)+\'?subject=subject&body=body\')\">e-mail</a>" config.emailProtection = 'encode'; // href="javascript:mt('tester','ckeditor.com','subject','body')" config.emailProtection = 'mt(NAME,DOMAIN,SUBJECT,BODY)';Defaults to
'' (empty string = disabled) -
Decides if the content inside the Media Embed widget should be left as-is, without filtering (default behavior of the Embed plugin before v4.21). Since v4.21 the Media Embed widget content is regenerated every time when initializing the widget.
NOTE: It's not recommended to enable this option. Accepting any content inside the embed plugin may open your application to security vulnerabilities. If, for some reason, you need to enable it, make sure to properly configure Content Security Policy on your web page.
Defaults to
false -
A template for the URL of the provider endpoint. This URL will be queried for each resource to be embedded.
It uses the following parameters:
url– The URL of the requested media, e.g.https://twitter.com/ckeditor/status/401373919157821441.callback– The name of the globally available callback used for JSONP requests.
For example:
config.embed_provider = '//example.com/api/oembed-proxy?resource-url={url}&callback={callback}';By default CKEditor does not use any provider, although there is a ready-to-use URL available via Iframely:
config.embed_provider = '//ckeditor.iframe.ly/api/oembed?url={url}&callback={callback}'However, this endpoint contains certain limitations, e.g. it cannot embed Google Maps content. It is recommended to set up an account on the Iframely service for better control over embedded content.
Read more in the documentation and see the example.
Refer to CKEDITOR.plugins.embedBase.baseDefinition.providerUrl for more information about content providers.
Important note: Prior to version 4.7.0 this configuration option defaulted to the
//ckeditor.iframe.ly/api/oembed?url={url}&callback={callback}string.Defaults to
'' -
Address of the JSON file containing the emoji list. The file is downloaded through the CKEDITOR.ajax.load method and the URL address is processed by CKEDITOR.getUrl. Emoji list has to be an array of objects with the
idandsymbolproperties. These keys represent the text to match and the UTF symbol for its replacement. An emoji has to start with the:(colon) symbol.[ { "id": ":grinning_face:", "symbol":"😀" }, { "id": ":bug:", "symbol":"🐛" }, { "id": ":star:", "symbol":"⭐" } ]editor.emoji_emojiListUrl = 'https://my.custom.domain/ckeditor/emoji.json';Defaults to
'plugins/emoji/emoji.json' -
Indicates if a following space should be added after inserted match into an editor.
Defaults to
false -
A number that defines how many characters are required to start displaying emoji's autocomplete suggestion box. Delimiter
:, which activates the emoji suggestion box, is not included in this value.editor.emoji_minChars = 0; // Emoji suggestion box appears after typing ':'.Defaults to
2 -
Whether to enable the context menu. Regardless of the setting the Context Menu plugin is still loaded.
config.enableContextMenu = false;Defaults to
true -
enableTabKeyTools : BooleanCKEDITOR.config#enableTabKeyToolsAllow context-sensitive Tab key behaviors, including the following scenarios:
When selection is anchored inside table cells:
- If Tab is pressed, select the content of the "next" cell. If in the last cell in the table, add a new row to it and focus its first cell.
- If Shift+Tab is pressed, select the content of the "previous" cell. Do nothing when it is in the first cell.
Example:
config.enableTabKeyTools = false;Defaults to
true -
enterMode : NumberCKEDITOR.config#enterModeSets the behavior of the Enter key. It also determines other behavior rules of the editor, like whether the
<br>element is to be used as a paragraph separator when indenting text. The allowed values are the following constants that cause the behavior outlined below:- CKEDITOR.ENTER_P (1) – New
<p>paragraphs are created. - CKEDITOR.ENTER_BR (2) – Lines are broken with
<br>elements. - CKEDITOR.ENTER_DIV (3) – New
<div>blocks are created.
Note: It is recommended to use the CKEDITOR.ENTER_P setting because of its semantic value and correctness. The editor is optimized for this setting.
Read more in the documentation and see the example.
// Not recommended. config.enterMode = CKEDITOR.ENTER_BR;Defaults to
CKEDITOR.ENTER_P - CKEDITOR.ENTER_P (1) – New
-
entities : BooleanCKEDITOR.config#entitiesWhether to use HTML entities in the editor output.
config.entities = false;Defaults to
true -
entities_additional : StringCKEDITOR.config#entities_additionalA comma-separated list of additional entities to be used. Entity names or numbers must be used in a form that excludes the
'&'prefix and the';'ending.config.entities_additional = '#1049'; // Adds Cyrillic capital letter Short I (Й).Defaults to
'#39' (The single quote (') character) -
entities_greek : BooleanCKEDITOR.config#entities_greekWhether to convert some symbols, mathematical symbols, and Greek letters to HTML entities. This may be more relevant for users typing text written in Greek. The list of entities can be found in the W3C HTML 4.01 Specification, section 24.3.1.
config.entities_greek = false;Defaults to
true -
entities_latin : BooleanCKEDITOR.config#entities_latinWhether to convert some Latin characters (Latin alphabet No. 1, ISO 8859-1) to HTML entities. The list of entities can be found in the W3C HTML 4.01 Specification, section 24.2.1.
config.entities_latin = false;Defaults to
true -
entities_processNumerical : Boolean | StringCKEDITOR.config#entities_processNumericalWhether to convert all remaining characters not included in the ASCII character table to their relative decimal numeric representation of HTML entity. When set to
force, it will convert all entities into this format.For example the phrase:
'This is Chinese: 汉语.'would be output as:'This is Chinese: 汉语.'config.entities_processNumerical = true; config.entities_processNumerical = 'force'; // Converts from ' ' into ' ';Defaults to
false -
Specifies the name for files generated by the Export to PDF plugin. It can define a fixed name or can be configured as a function that will be evaluated right before saving the file, for example:
// The file name will be set to the value of the first '<h1>' element in the editor: config.exportPdf_fileName = function( editor ) { return editor.editable().findOne( 'h1' ).getText() + '.pdf'; }Read more in the documentation.
Defaults to
'ckeditor4-export-pdf.pdf' -
The configuration of the HTML to PDF converter service. Refer to the 'Export to PDF' endpoint documentation for more details.
Read more in the documentation.
Defaults to
{} -
The default URL of the HTML to PDF converter service used by the Export to PDF plugin.
Defaults to
'https://pdf-converter.cke-cs.com/v1/convert' -
Specifies paths to custom CSS stylesheets that will be attached to the document sent to the HTML to PDF converter service. This allows adding additional styling to the generated PDF file.
Relative stylesheet paths are converted to absolute ones, so all resources must be accessible globally to allow the HTML to PDF converter service to fetch them. If this option is used, the default styles are not sent (in case of classic editor).
Read more in the documentation.
Defaults to
[] -
The token endpoint service URL used by the Export to PDF plugin for requests authentication. It is unique for each customer and can be found in the CKEditor Ecosystem dashboard after subscribing to the Export to PDF service.
Without token endpoint set correctly, the documents generated by the service will have a CKEditor 4 footer.
Defaults to
'' -
This option makes it possible to set additional allowed content rules for CKEDITOR.editor.filter.
It is especially useful in combination with the default allowedContent value:
CKEDITOR.replace( 'textarea_id', { plugins: 'wysiwygarea,toolbar,format', extraAllowedContent: 'b i', on: { instanceReady: function( evt ) { var editor = evt.editor; editor.filter.check( 'h1' ); // -> true (thanks to Format combo) editor.filter.check( 'b' ); // -> true (thanks to extraAllowedContent) editor.setData( '<h1><i>Foo</i></h1><p class="left"><b>Bar</b> <a href="http://foo.bar">foo</a></p>' ); // Editor contents will be: '<h1><i>Foo</i></h1><p><b>Bar</b> foo</p>' } } } );Read more in the documentation and see the example. See also allowedContent for more details.
-
extraPlugins : String | String[]CKEDITOR.config#extraPluginsA list of additional plugins to be loaded. This setting makes it easier to add new plugins without having to touch the plugins setting.
Note: The most recommended way to add CKEditor plugins is through CKEditor Builder. Read more in the documentation.
config.extraPlugins = 'myplugin,anotherplugin';Defaults to
'' -
The default file name (without extension) that will be used for files created from a Base64 data string (for example for files pasted into the editor). This name will be combined with the MIME type to create the full file name with the extension.
If
fileTools_defaultFileNameis set todefault-nameand data's MIME type isimage/png, the resulting file name will bedefault-name.png.If
fileTools_defaultFileNameis not set, the file name will be created using only its MIME type. For example forimage/pngthe file name will beimage.png.Defaults to
'' -
Allows to add extra headers for every request made using the CKEDITOR.fileTools API.
Note that headers can still be customized per a single request, using the
fileUploadRequestevent.config.fileTools_requestHeaders = { 'X-Requested-With': 'XMLHttpRequest', 'Custom-Header': 'header value' }; -
The location of an external file manager that should be launched when the Browse Server button is pressed. If configured, the Browse Server button will appear in the Link and Image dialog windows.
Read more in the documentation and see the example.
config.filebrowserBrowseUrl = '/browser/browse.php';Defaults to
'' (empty string = disabled) -
since 3.0.0 deprecated 4.17.0
filebrowserFlashBrowseUrl : StringCKEDITOR.config#filebrowserFlashBrowseUrlThe location of an external file browser that should be launched when the Browse Server button is pressed in the Flash dialog window.
If not set, CKEditor will use filebrowserBrowseUrl.
Read more in the documentation and see the example.
config.filebrowserFlashBrowseUrl = '/browser/browse.php?type=Flash';Note: This option is deprecated due to the flash plugin being removed.
Defaults to
'' (empty string = disabled) -
since 3.0.0 deprecated 4.17.0
filebrowserFlashUploadUrl : StringCKEDITOR.config#filebrowserFlashUploadUrlThe location of the script that handles file uploads in the Flash dialog window.
If not set, CKEditor will use filebrowserUploadUrl.
Read more in the documentation and see the example.
config.filebrowserFlashUploadUrl = '/uploader/upload.php?type=Flash';Note: This option is deprecated due to the flash plugin being removed.(empty string = disabled)]
Defaults to
'' -
The location of an external file manager that should be launched when the Browse Server button is pressed in the Link tab of the Image dialog window.
If not set, CKEditor will use filebrowserBrowseUrl.
Read more in the documentation and see the example.
config.filebrowserImageBrowseLinkUrl = '/browser/browse.php';Defaults to
'' (empty string = disabled) -
The location of an external file manager that should be launched when the Browse Server button is pressed in the Image dialog window.
If not set, CKEditor will use filebrowserBrowseUrl.
Read more in the documentation and see the example.
config.filebrowserImageBrowseUrl = '/browser/browse.php?type=Images';Defaults to
'' (empty string = disabled) -
The location of the script that handles file uploads in the Image dialog window.
If not set, CKEditor will use filebrowserUploadUrl.
Read more in the documentation and see the example.
config.filebrowserImageUploadUrl = '/uploader/upload.php?type=Images';Note: This is a configuration setting for a file browser/uploader. To configure uploading dropped or pasted files use the uploadUrl or imageUploadUrl configuration option.
Defaults to
'' (empty string = disabled) -
Defines a preferred option for file uploading in the File Browser plugin.
Available values:
'xhr'– XMLHttpRequest is used to upload the file. Using this option allows to set additional XHR headers with the fileTools_requestHeaders option.'form'– The file is uploaded by submitting a traditional<form>element. Note: That was the only option available until CKEditor 4.9.0.
Example:
// All browsers will use a plain form element to upload the file. config.filebrowserUploadMethod = 'form';Defaults to
'xhr' -
The location of the script that handles file uploads. If set, the Upload tab will appear in the Link and Image dialog windows.
Read more in the documentation and see the example.
config.filebrowserUploadUrl = '/uploader/upload.php';Note: This is a configuration setting for a file browser/uploader. To configure uploading dropped or pasted files use the uploadUrl configuration option.
Defaults to
'' (empty string = disabled) -
The features to use in the file manager popup window.
config.filebrowserWindowFeatures = 'resizable=yes,scrollbars=no';Defaults to
'location=no,menubar=no,toolbar=no,dependent=yes,minimizable=no,modal=yes,alwaysRaised=yes,resizable=yes,scrollbars=yes' -
filebrowserWindowHeight : Number | StringCKEDITOR.config#filebrowserWindowHeightThe height of the file manager popup window. It can be a number denoting a value in pixels or a percent string.
Read more in the documentation and see the example.
config.filebrowserWindowHeight = 580; config.filebrowserWindowHeight = '50%';Defaults to
'70%' -
filebrowserWindowWidth : Number | StringCKEDITOR.config#filebrowserWindowWidthThe width of the file manager popup window. It can be a number denoting a value in pixels or a percent string.
Read more in the documentation and see the example.
config.filebrowserWindowWidth = 750; config.filebrowserWindowWidth = '50%';Defaults to
'80%' -
Whether a filler text (non-breaking space entity —
) will be inserted into empty block elements in HTML output. This is used to render block elements properly withline-height. When a function is specified instead, it will be passed a CKEDITOR.htmlParser.element to decide whether adding the filler text by expecting a Boolean return value.config.fillEmptyBlocks = false; // Prevent filler nodes in all empty blocks. // Prevent filler node only in float cleaners. config.fillEmptyBlocks = function( element ) { if ( element.attributes[ 'class' ].indexOf( 'clear-both' ) != -1 ) return false; };Defaults to
true -
find_highlight : ObjectCKEDITOR.config#find_highlightDefines the style to be used to highlight results with the find dialog.
// Highlight search results with blue on yellow. config.find_highlight = { element: 'span', styles: { 'background-color': '#ff0', color: '#00f' } };Defaults to
{element: 'span', styles: {'background-color': '#004', color: '#fff'}} -
Add
<embed>tag as alternative:<object><embed></embed></object>.Note: This option is deprecated due to the plugin being removed.
Defaults to
false -
Use flashEmbedTagOnly and flashAddEmbedTag values on edit.
Note: This option is deprecated due to the plugin being removed.
Defaults to
false -
Save as
<embed>tag only. This tag is unrecommended.Note: This option is deprecated due to the plugin being removed.
Defaults to
false -
floatSpaceDockedOffsetX : NumberCKEDITOR.config#floatSpaceDockedOffsetXAlong with floatSpaceDockedOffsetY it defines the amount of offset (in pixels) between the float space and the editable left/right boundaries when the space element is docked on either side of the editable.
config.floatSpaceDockedOffsetX = 10;Defaults to
0 -
floatSpaceDockedOffsetY : NumberCKEDITOR.config#floatSpaceDockedOffsetYAlong with floatSpaceDockedOffsetX it defines the amount of offset (in pixels) between the float space and the editable top/bottom boundaries when the space element is docked on either side of the editable.
config.floatSpaceDockedOffsetY = 10;Defaults to
0 -
floatSpacePinnedOffsetX : NumberCKEDITOR.config#floatSpacePinnedOffsetXAlong with floatSpacePinnedOffsetY it defines the amount of offset (in pixels) between the float space and the viewport boundaries when the space element is pinned.
config.floatSpacePinnedOffsetX = 20;Defaults to
0 -
floatSpacePinnedOffsetY : NumberCKEDITOR.config#floatSpacePinnedOffsetYAlong with floatSpacePinnedOffsetX it defines the amount of offset (in pixels) between the float space and the viewport boundaries when the space element is pinned.
config.floatSpacePinnedOffsetY = 20;Defaults to
0 -
Indicates that the float space should be aligned to the right side of the editable area rather than to the left (if possible).
config.floatSpacePreferRight = true;Defaults to
false -
fontSize_defaultLabel : StringCKEDITOR.config#fontSize_defaultLabelThe text to be displayed in the Font Size combo if none of the available values matches the current cursor position or text selection.
// If the default site font size is 12px, we may make it more explicit to the end user. config.fontSize_defaultLabel = '12px';Defaults to
'' -
fontSize_sizes : StringCKEDITOR.config#fontSize_sizesThe list of font sizes to be displayed in the Font Size combo in the toolbar. Entries are separated by semi-colons (
';').Any kind of "CSS-like" size can be used, like
'12px','2.3em','130%','larger'or'x-small'.A display name may be optionally defined by prefixing the entries with the name and the slash character. For example,
'Bigger Font/14px'will be displayed as'Bigger Font'in the list, but will be output as'14px'.config.fontSize_sizes = '16/16px;24/24px;48/48px;'; config.fontSize_sizes = '12px;2.3em;130%;larger;x-small'; config.fontSize_sizes = '12 Pixels/12px;Big/2.3em;30 Percent More/130%;Bigger/larger;Very Small/x-small';Defaults to
see source -
fontSize_style : ObjectCKEDITOR.config#fontSize_styleThe style definition to be used to apply the font size in the text.
// This is actually the default value for it. config.fontSize_style = { element: 'span', styles: { 'font-size': '#(size)' }, overrides: [ { element: 'font', attributes: { 'size': null } } ] };Defaults to
see example -
font_defaultLabel : StringCKEDITOR.config#font_defaultLabelThe text to be displayed in the Font combo if none of the available values matches the current cursor position or text selection.
// If the default site font is Arial, we may make it more explicit to the end user. config.font_defaultLabel = 'Arial';Defaults to
'' -
font_names : StringCKEDITOR.config#font_namesThe list of font names to be displayed in the Font combo in the toolbar. Entries are separated by semi-colons (
';') and it is possible to have more than one font for each entry, in the HTML way (separated by commas).A display name may be optionally defined by prefixing the entries with the name and the slash character. For example,
'Arial/Arial, Helvetica, sans-serif'will be displayed as'Arial'in the list, but will be output as'Arial, Helvetica, sans-serif'.config.font_names = 'Arial/Arial, Helvetica, sans-serif;' + 'Times New Roman/Times New Roman, Times, serif;' + 'Verdana'; config.font_names = 'Arial;Times New Roman;Verdana';Defaults to
see source -
font_style : ObjectCKEDITOR.config#font_styleThe style definition to be used to apply the font in the text.
// This is actually the default value for it. config.font_style = { element: 'span', styles: { 'font-family': '#(family)' }, overrides: [ { element: 'font', attributes: { 'face': null } } ] };Defaults to
see example -
Forces the use of enterMode as line break regardless of the context. If, for example, enterMode is set to CKEDITOR.ENTER_P, pressing the Enter key inside a
<div>element will create a new paragraph with a<p>instead of a<div>.Read more in the documentation and see the example.
// Not recommended. config.forceEnterMode = true;Defaults to
false -
forcePasteAsPlainText : Boolean | StringCKEDITOR.config#forcePasteAsPlainTextWhether to force all pasting operations to insert plain text into the editor, losing any formatting information possibly available in the source text.
This option accepts the following settings:
true– Pastes all content as plain text.false– Preserves content formatting.allow-word– Content pasted from Microsoft Word will keep its formatting while any other content will be pasted as plain text.
Example:
// All content will be pasted as plain text. config.forcePasteAsPlainText = true; // Only Microsoft Word content formatting will be preserved. config.forcePasteAsPlainText = 'allow-word';Defaults to
false -
forceSimpleAmpersand : BooleanCKEDITOR.config#forceSimpleAmpersandWhether to force using
'&'instead of'&'in element attributes values. It is not recommended to change this setting for compliance with the W3C XHTML 1.0 standards (C.12, XHTML 1.0).// Use `'&'` instead of `'&'` CKEDITOR.config.forceSimpleAmpersand = true;Defaults to
false -
format_address : ObjectCKEDITOR.config#format_addressThe style definition to be used to apply the
Addressformat.Read more in the documentation and see the example.
config.format_address = { element: 'address', attributes: { 'class': 'styledAddress' } };Defaults to
{ element: 'address' } -
format_div : ObjectCKEDITOR.config#format_divThe style definition to be used to apply the
Normal (DIV)format.Read more in the documentation and see the example.
config.format_div = { element: 'div', attributes: { 'class': 'normalDiv' } };Defaults to
{ element: 'div' } -
format_h1 : ObjectCKEDITOR.config#format_h1The style definition to be used to apply the
Heading 1format.Read more in the documentation and see the example.
config.format_h1 = { element: 'h1', attributes: { 'class': 'contentTitle1' } };Defaults to
{ element: 'h1' } -
format_h2 : ObjectCKEDITOR.config#format_h2The style definition to be used to apply the
Heading 2format.Read more in the documentation and see the example.
config.format_h2 = { element: 'h2', attributes: { 'class': 'contentTitle2' } };Defaults to
{ element: 'h2' } -
format_h3 : ObjectCKEDITOR.config#format_h3The style definition to be used to apply the
Heading 3format.Read more in the documentation and see the example.
config.format_h3 = { element: 'h3', attributes: { 'class': 'contentTitle3' } };Defaults to
{ element: 'h3' } -
format_h4 : ObjectCKEDITOR.config#format_h4The style definition to be used to apply the
Heading 4format.Read more in the documentation and see the example.
config.format_h4 = { element: 'h4', attributes: { 'class': 'contentTitle4' } };Defaults to
{ element: 'h4' } -
format_h5 : ObjectCKEDITOR.config#format_h5The style definition to be used to apply the
Heading 5format.Read more in the documentation and see the example.
config.format_h5 = { element: 'h5', attributes: { 'class': 'contentTitle5' } };Defaults to
{ element: 'h5' } -
format_h6 : ObjectCKEDITOR.config#format_h6The style definition to be used to apply the
Heading 6format.Read more in the documentation and see the example.
config.format_h6 = { element: 'h6', attributes: { 'class': 'contentTitle6' } };Defaults to
{ element: 'h6' } -
format_p : ObjectCKEDITOR.config#format_pThe style definition to be used to apply the
Normalformat.Read more in the documentation and see the example.
config.format_p = { element: 'p', attributes: { 'class': 'normalPara' } };Defaults to
{ element: 'p' } -
format_pre : ObjectCKEDITOR.config#format_preThe style definition to be used to apply the
Formattedformat.Read more in the documentation and see the example.
config.format_pre = { element: 'pre', attributes: { 'class': 'code' } };Defaults to
{ element: 'pre' } -
format_tags : StringCKEDITOR.config#format_tagsA list of semicolon-separated style names (by default: tags) representing the style definition for each entry to be displayed in the Format drop-down list in the toolbar. Each entry must have a corresponding configuration in a setting named
'format_(tagName)'. For example, the'p'entry has its definition taken from config.format_p.Read more in the documentation and see the example.
config.format_tags = 'p;h2;h3;pre';Defaults to
'p;h1;h2;h3;h4;h5;h6;pre;address;div' -
Indicates whether the content to be edited is being input as a full HTML page. A full page includes the
<html>,<head>, and<body>elements. The final output will also reflect this setting, including the<body>content only if this setting is disabled.Read more in the documentation and see the example.
config.fullPage = true;Defaults to
false -
Enables Grammar As You Type (GRAYT) on SCAYT startup. When set to
true, this option turns on GRAYT automatically after SCAYT started.Read more in the documentation and see the SDK sample.
config.grayt_autoStartup = true;Defaults to
false -
height : Number | StringCKEDITOR.config#heightThe height of the editing area that includes the editor content. This configuration option accepts an integer (to denote a value in pixels) or any CSS-defined length unit except percent (
%) values which are not supported.Note: This configuration option is ignored by inline editor.
Read more in the documentation and see the example.
config.height = 500; // 500 pixels. config.height = '25em'; // CSS length. config.height = '300px'; // CSS length.Defaults to
200 -
Whether to escape HTML when the editor updates the original input element.
config.htmlEncodeOutput = true;Defaults to
false -
Indicates the default iframe attributes.
Starting from v4.21, iframe elements are sandboxed to secure web pages without proper Content Security Policy configuration.
NOTE: Disabling that option may open your application to security vulnerabilities. If, for some reason, you need to enable it, make sure to properly configure Content Security Policy on your web page or use function-based configuration to allow trusted iframe elements only.
Function-based configuration example:
config.iframe_attributes = function( iframe ) { var youtubeOrigin = 'https://www.youtube.com' if ( youtubeOrigin.indexOf( iframe.attributes.src ) !== -1 ) { return { sandbox: "allow-scripts allow-same-origin" } } return: { sandbox: "" }; }Object-based configuration example:
config.iframe_attributes = { sandbox: 'allow-scripts allow-same-origin', allow: 'autoplay' }Defaults to
{ sandbox: '' } -
ignoreEmptyParagraph : BooleanCKEDITOR.config#ignoreEmptyParagraphWhether the editor must output an empty value (
'') if its content only consists of an empty paragraph.config.ignoreEmptyParagraph = false;Defaults to
true -
CSS classes applied to aligned images. Useful to take control over the way the images are aligned, i.e. to customize output HTML and integrate external stylesheets.
Classes should be defined in an array of three elements, containing left, center, and right alignment classes, respectively. For example:
config.image2_alignClasses = [ 'align-left', 'align-center', 'align-right' ];Note: Once this configuration option is set, the plugin will no longer produce inline styles for alignment. It means that e.g. the following HTML will be produced:
<img alt="My image" class="custom-center-class" src="foo.png" />instead of:
<img alt="My image" style="float:left" src="foo.png" />Note: Once this configuration option is set, corresponding style definitions must be supplied to the editor:
- For classic editor it can be done by defining additional styles in the stylesheets loaded by the editor. The same styles must be provided on the target page where the content will be loaded.
- For inline editor the styles can be defined directly
with
<style> ... <style>or<link href="..." rel="stylesheet">, i.e. within the<head>of the page.
For example, considering the following configuration:
config.image2_alignClasses = [ 'align-left', 'align-center', 'align-right' ];CSS rules can be defined as follows:
.align-left { float: left; } .align-right { float: right; } .align-center { text-align: center; } .align-center > figure { display: inline-block; }Read more in the documentation and see the example.
Defaults to
null -
Determines whether alternative text is required for the captioned image.
config.image2_altRequired = true;Read more in the documentation and see the example.
Defaults to
false -
image2_captionedClass : StringCKEDITOR.config#image2_captionedClassA CSS class applied to the
<figure>element of a captioned image.Read more in the documentation and see the example.
// Changes the class to "captionedImage". config.image2_captionedClass = 'captionedImage';Defaults to
'image' -
Indicates the default state of the "Lock ratio" switch in the image dialog. If set to
true, the ratio will be locked. If set tofalse, it will be unlocked. If the value is not set at all, the "Lock ratio" switch will indicate if the image has preserved aspect ratio upon loading. -
Disables the image resizer. By default the resizer is enabled.
Read more in the documentation and see the example.
config.image2_disableResizer = true;Defaults to
false -
Determines the maximum size that an image can be resized to with the resize handle.
It stores two properties:
widthandheight. They can be set with one of the two types:- A number representing a value that limits the maximum size in pixel units:
config.image2_maxSize = { height: 300, width: 250 };- A string representing the natural image size, so each image resize operation is limited to its own natural height or width:
config.image2_maxSize = { height: 'natural', width: 'natural' }Note: An image can still be resized to bigger dimensions when using the image dialog.
-
Determines whether dimension inputs should be automatically filled when the image URL changes in the Enhanced Image plugin dialog window.
Read more in the documentation and see the example.
config.image2_prefillDimensions = false;Defaults to
true -
-
Determines whether dimension inputs should be automatically filled when the image URL changes in the Image plugin dialog window.
config.image_prefillDimensions = false;Defaults to
true -
image_previewText : StringCKEDITOR.config#image_previewTextPadding text to set off the image in the preview area.
config.image_previewText = CKEDITOR.tools.repeat( '___ ', 100 );Defaults to
'Lorem ipsum dolor...' (placeholder text) -
image_removeLinkByEmptyURL : BooleanCKEDITOR.config#image_removeLinkByEmptyURLWhether to remove links when emptying the link URL field in the Image dialog window.
config.image_removeLinkByEmptyURL = false;Defaults to
true -
indentClasses : ArrayCKEDITOR.config#indentClassesA list of classes to use for indenting the contents. If set to
null, no classes will be used and instead the indentUnit and indentOffset properties will be used.// Use the 'Indent1', 'Indent2', 'Indent3' classes. config.indentClasses = ['Indent1', 'Indent2', 'Indent3'];Defaults to
null -
indentOffset : NumberCKEDITOR.config#indentOffset -
indentUnit : StringCKEDITOR.config#indentUnit -
jqueryOverrideVal : BooleanCKEDITOR.config#jqueryOverrideValAllows CKEditor to override
jQuery.fn.val(). When set totrue, theval()function used on textarea elements replaced with CKEditor uses the CKEditor API.This configuration option is global and is executed during the loading of the jQuery Adapter. It cannot be customized across editor instances.
Read more in the documentation.
<script> CKEDITOR.config.jqueryOverrideVal = true; </script> <!-- Important: The jQuery Adapter is loaded *after* setting jqueryOverrideVal. --> <script src="/ckeditor/adapters/jquery.js"></script> <script> $( 'textarea' ).ckeditor(); // ... $( 'textarea' ).val( 'New content' ); </script>Defaults to
true -
justifyClasses : ArrayCKEDITOR.config#justifyClassesList of classes to use for aligning the contents. If it's
null, no classes will be used and instead the corresponding CSS values will be used.The array should contain 4 members, in the following order: left, center, right, justify.
// Use the classes 'AlignLeft', 'AlignCenter', 'AlignRight', 'AlignJustify' config.justifyClasses = [ 'AlignLeft', 'AlignCenter', 'AlignRight', 'AlignJustify' ];Defaults to
null -
keystrokes : ArrayCKEDITOR.config#keystrokesA list associating keystrokes with editor commands. Each element in the list is an array where the first item is the keystroke, and the second is the name of the command to be executed.
This setting should be used to define (as well as to overwrite or remove) keystrokes set by plugins (like
linkandbasicstyles). If you want to set a keystroke for your plugin or during the runtime, use CKEDITOR.editor.setKeystroke instead.Since default keystrokes are set by the CKEDITOR.editor.setKeystroke method, by default
config.keystrokesis an empty array.See CKEDITOR.editor.setKeystroke documentation for more details regarding the start up order.
// Change default Ctrl+L keystroke for 'link' command to Ctrl+Shift+L. config.keystrokes = [ ... [ CKEDITOR.CTRL + CKEDITOR.SHIFT + 76, 'link' ], // Ctrl+Shift+L ... ];To reset a particular keystroke, the following approach can be used:
// Disable default Ctrl+L keystroke which executes the 'link' command by default. config.keystrokes = [ ... [ CKEDITOR.CTRL + 76, null ], // Ctrl+L ... ];In order to reset all default keystrokes, a CKEDITOR.instanceReady callback should be used. This is since editor defaults are merged rather than overwritten by user keystrokes.
Note: This can be potentially harmful for the editor. Avoid this unless you are aware of the consequences.
// Reset all default keystrokes. config.on.instanceReady = function() { this.keystrokeHandler.keystrokes = []; };Defaults to
[] -
language : StringCKEDITOR.config#languageThe user interface language localization to use. If left empty, the editor will automatically be localized to the user language. If the user language is not supported, the language specified in the defaultLanguage configuration setting is used.
Read more in the documentation and see the example.
// Load the German interface. config.language = 'de';Defaults to
'' -
language_list : ArrayCKEDITOR.config#language_listSpecifies the list of languages available in the Language plugin. Each entry should be a string in the following format:
<languageCode>:<languageLabel>[:<textDirection>]- languageCode: The language code used for the
langattribute in ISO 639 format. Language codes can be found here. You can use both 2-letter ISO-639-1 codes and 3-letter ISO-639-2 codes, though for consistency it is recommended to stick to ISO-639-1 2-letter codes. - languageLabel: The label to show for this language in the list.
- textDirection: (optional) One of the following values:
rtlorltr, indicating the reading direction of the language. Defaults toltr.
See the example.
config.language_list = [ 'he:Hebrew:rtl', 'pt:Portuguese', 'de:German' ];Defaults to
[ 'ar:Arabic:rtl', 'fr:French', 'es:Spanish' ] - languageCode: The language code used for the
-
The license key for the CKEditor 4 LTS ("Long Term Support") commercial license.
The license is available under "Extended Support Model" for anyone looking to extend the coverage of security updates and critical bug fixes.
If you do not have a key yet, please contact us.
config.licenseKey = 'your-license-key';Defaults to
'' -
Default URL protocol used for the Link dialog.
Available values are:
'http://''https://''ftp://''news://'''— An empty string for the<other>option.
config.linkDefaultProtocol = 'https://';Defaults to
'http://' -
Whether JavaScript code is allowed as a
hrefattribute in an anchor tag. With this option enabled it is possible to create links like:<a href="javascript:alert('Hello world!')">hello world</a>By default JavaScript links are not allowed and will not pass the Link dialog window validation.
Defaults to
false -
Optional message for the alert popup used when the phone number in the Link dialog does not pass the validation.
config.linkPhoneMsg = "Invalid number"; -
Optional JavaScript regular expression used whenever phone numbers in the Link dialog should be validated.
config.linkPhoneRegExp = /^[0-9]{9}$/; -
linkShowAdvancedTab : BooleanCKEDITOR.config#linkShowAdvancedTab -
linkShowTargetTab : BooleanCKEDITOR.config#linkShowTargetTab -
magicline_color : StringCKEDITOR.config#magicline_colorDefines the color of the magic line. The color may be adjusted to enhance readability.
Read more in the documentation and see the example.
// Changes magic line color to blue. CKEDITOR.config.magicline_color = '#0000FF';Defaults to
'#FF0000' -
magicline_everywhere : BooleanCKEDITOR.config#magicline_everywhereActivates the special all-encompassing mode that considers all focus spaces between CKEDITOR.dtd.$block elements as accessible by the magic line.
Read more in the documentation and see the example.
// Enables the greedy "put everywhere" mode. CKEDITOR.config.magicline_everywhere = true;Defaults to
false -
magicline_holdDistance : NumberCKEDITOR.config#magicline_holdDistanceDefines the distance between the mouse pointer and the box within which the magic line stays revealed and no other focus space is offered to be accessed. This value is relative to magicline_triggerOffset.
Read more in the documentation and see the example.
// Increases the distance to 80% of CKEDITOR.config.magicline_triggerOffset. CKEDITOR.config.magicline_holdDistance = .8;CKEDITOR.config.magicline_triggerOffsetDefaults to
0.5 -
magicline_keystrokeNext : NumberCKEDITOR.config#magicline_keystrokeNextDefines the default keystroke that accesses the closest unreachable focus space after the caret (start of the selection). If there is no focus space available, the selection remains unchanged.
Read more in the documentation and see the example.
// Changes keystroke to "Ctrl + .". CKEDITOR.config.magicline_keystrokeNext = CKEDITOR.CTRL + 190;Defaults to
CKEDITOR.CTRL + CKEDITOR.SHIFT + 52 (CTRL + SHIFT + 4) -
magicline_keystrokePrevious : NumberCKEDITOR.config#magicline_keystrokePreviousDefines the default keystroke that accesses the closest unreachable focus space before the caret (start of the selection). If there is no focus space available, the selection remains unchanged.
Read more in the documentation and see the example.
// Changes the default keystroke to "Ctrl + ,". CKEDITOR.config.magicline_keystrokePrevious = CKEDITOR.CTRL + 188;Defaults to
CKEDITOR.CTRL + CKEDITOR.SHIFT + 51 (CTRL + SHIFT + 3) -
magicline_tabuList : NumberCKEDITOR.config#magicline_tabuListDefines a list of attributes that, if assigned to some elements, prevent the magic line from being used within these elements.
Read more in the documentation and see the example.
// Adds the "data-tabu" attribute to the magic line tabu list. CKEDITOR.config.magicline_tabuList = [ 'data-tabu' ];Defaults to
[ 'data-widget-wrapper' ] -
magicline_triggerOffset : NumberCKEDITOR.config#magicline_triggerOffsetSets the default vertical distance between the edge of the element and the mouse pointer that causes the magic line to appear. This option accepts a value in pixels, without the unit (for example:
15for 15 pixels).Read more in the documentation and see the example.
// Changes the offset to 15px. CKEDITOR.config.magicline_triggerOffset = 15;CKEDITOR.config.magicline_holdDistanceDefaults to
30 -
mathJaxClass : StringCKEDITOR.config#mathJaxClassSets the default class for
spanelements that will be converted into Mathematical Formulas widgets.If you set it to the following:
config.mathJaxClass = 'my-math';The code below will be recognized as a Mathematical Formulas widget.
<span class="my-math">\( \sqrt{4} = 2 \)</span>Read more in the documentation and see the example.
Defaults to
'math-tex' -
Sets the path to the MathJax library. It can be both a local resource and a location different than the default CDN.
Please note that this must be a full or absolute path.
Read more in the documentation and see the example.
config.mathJaxLib = '//cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/MathJax.js?config=TeX-AMS_HTML';Note: Since CKEditor 4.5.0 this option does not have a default value, so it must be set in order to enable the MathJax plugin.
-
maximize_historyIntegration : NumberCKEDITOR.config#maximize_historyIntegrationInforms plugin how it should integrate with browser's "Go back" and "Go forward" buttons.
If it's set to CKEDITOR.HISTORY_NATIVE, the plugin will use native History API and
popstateevent.If it's set to CKEDITOR.HISTORY_HASH, the plugin will use
hashchangeevent.If it's set to CKEDITOR.HISTORY_OFF, the plugin will not integrate with browser's "Go back" and "Go forward" buttons.
Defaults to
CKEDITOR.HISTORY_NATIVE -
A list of mentions configuration objects.
For each configuration object a new mentions plugin instance will be created and attached to the editor.
config.mentions = [ { feed: [ 'Anna', 'Thomas', 'Jack' ], minChars: 0 }, { feed: backendApiFunction, marker: '#' }, { feed: '/users?query={encodedQuery}', marker: '$' } ]; -
menu_groups : StringCKEDITOR.config#menu_groupsA comma separated list of items group names to be displayed in the context menu. The order of items will reflect the order specified in this list if no priority was defined in the groups.
config.menu_groups = 'clipboard,table,anchor,link,image';Defaults to
see source -
menu_subMenuDelay : NumberCKEDITOR.config#menu_subMenuDelayThe amount of time, in milliseconds, the editor waits before displaying submenu options when moving the mouse over options that contain submenus, like the "Cell Properties" entry for tables.
// Remove the submenu delay. config.menu_subMenuDelay = 0;Defaults to
400 -
newpage_html : StringCKEDITOR.config#newpage_htmlThe HTML to load in the editor when the "new page" command is executed.
config.newpage_html = '<p>Type your text here.</p>';Defaults to
'' -
After how many milliseconds the notification of the
infoandsuccesstype should close automatically.0means that notifications will not close automatically. Note thatwarningandprogressnotifications will never close automatically.Refer to the Notifications article for more information about this feature.
Defaults to
5000 -
Native DOM element, a document observation starting point for mutation observer. Needed to detect when classic, wysiwygarea editor reattaches to DOM to restore editor's previous state.
To recreate editor
wysiwygareaiframe after editor was reattached to DOM:- make sure detachable element is nested on any level under observable element;
- make sure editor is nested on any level under detachable element.
See the sample overview of hierarchy below (HTML pseudocode):
<observable> <...> <detachable> <...> <editor></editor> </...> </detachable> <...> </observable>By default, the entire document is observed. However, if you know exactly which element is detaching, you can choose its direct parent to increase performance a little.
Note, that if you choose element which is detaching, no changes will be detected.
Defaults to
CKEDITOR.document.$ -
on : ObjectCKEDITOR.config#onSets listeners on editor events.
Note: This property can only be set in the
configobject passed directly to CKEDITOR.replace, CKEDITOR.inline, and other creators.CKEDITOR.replace( 'editor1', { on: { instanceReady: function() { alert( this.name ); // 'editor1' }, key: function() { // ... } } } ); -
Defines a filter which is applied to external data pasted or dropped into the editor. Possible values are:
'plain-text'– Content will be pasted as a plain text.'semantic-content'– Known tags (exceptdiv,span) with all attributes (exceptstyleandclass) will be kept.'h1 h2 p div'– Custom rules compatible with CKEDITOR.filter.null– Content will not be filtered by the paste filter (but it still may be filtered by Advanced Content Filter). This value can be used to disable the paste filter in Chrome and Safari, where this option defaults to'semantic-content'.
Example:
config.pasteFilter = 'plain-text';Custom setting:
config.pasteFilter = 'h1 h2 p ul ol li; img[!src, alt]; a[!href]';Based on this configuration option, a proper CKEDITOR.filter instance will be defined and assigned to the editor as a CKEDITOR.editor.pasteFilter. You can tweak the paste filter settings on the fly on this object as well as delete or replace it.
var editor = CKEDITOR.replace( 'editor', { pasteFilter: 'semantic-content' } ); editor.on( 'instanceReady', function() { // The result of this will be that all semantic content will be preserved // except tables. editor.pasteFilter.disallow( 'table' ); } );Note that the paste filter is applied only to external data. There are three data sources:
- copied and pasted in the same editor (internal),
- copied from one editor and pasted into another (cross-editor),
- coming from all other sources like websites, MS Word, etc. (external).
If Advanced Content Filter is not disabled, then it will also be applied to pasted and dropped data. The paste filter job is to "normalize" external data which often needs to be handled differently than content produced by the editor.
This setting defaults to
'semantic-content'in Chrome, Opera and Safari (all Blink and Webkit based browsers) due to messy HTML which these browsers keep in the clipboard. In other browsers it defaults tonull.Defaults to
'semantic-content' in Chrome and Safari and `null` in other browsers -
The file that provides the Microsoft Word cleanup function for pasting operations.
Note: This is a global configuration shared by all editor instances present on the page.
// Load from the 'pastefromword' plugin 'filter' sub folder (custom.js file) using a path relative to the CKEditor installation folder. CKEDITOR.config.pasteFromWordCleanupFile = 'plugins/pastefromword/filter/custom.js'; // Load from the 'pastefromword' plugin 'filter' sub folder (custom.js file) using a full path (including the CKEditor installation folder). CKEDITOR.config.pasteFromWordCleanupFile = '/ckeditor/plugins/pastefromword/filter/custom.js'; // Load custom.js file from the 'customFilters' folder (located in server's root) using the full URL. CKEDITOR.config.pasteFromWordCleanupFile = 'http://my.example.com/customFilters/custom.js';Defaults to
<plugin path> + 'filter/default.js' -
since 3.1.0
pasteFromWordNumberedHeadingToList : BooleanCKEDITOR.config#pasteFromWordNumberedHeadingToListWhether to transform Microsoft Word outline numbered headings into lists.
config.pasteFromWordNumberedHeadingToList = true;Defaults to
false -
Whether to prompt the user about the clean up of content being pasted from Microsoft Word.
config.pasteFromWordPromptCleanup = true;Defaults to
false -
since 3.1.0 deprecated 4.13.0
pasteFromWordRemoveFontStyles : BooleanCKEDITOR.config#pasteFromWordRemoveFontStylesSee pasteTools_removeFontStyles.
Important note: Prior to version 4.6.0 this configuration option defaulted to
true.Defaults to
false -
Whether to remove element styles that cannot be managed with the editor. Note that this option does not handle font-specific styles, which depend on the pasteTools_removeFontStyles setting instead.
config.pasteFromWordRemoveStyles = false;Defaults to
true -
since 4.6.2
pasteFromWord_heuristicsEdgeList : BooleanCKEDITOR.config#pasteFromWord_heuristicsEdgeListActivates a heuristic that helps detect lists pasted into the editor in Microsoft Edge.
The reason why this heuristic is needed is that on pasting Microsoft Edge removes any Word-specific metadata allowing to identify lists.
// Disables list heuristics for Edge. config.pasteFromWord_heuristicsEdgeList = false;Defaults to
true -
Flag decides whether embedding images pasted with Word content is enabled or not.
Note: Please be aware that embedding images requires Clipboard API support, available only in modern browsers, that is indicated by CKEDITOR.plugins.clipboard.isCustomDataTypesSupported flag.
// Disable embedding images pasted from Word. config.pasteFromWord_inlineImages = false;Defaults to
true -
since 4.12.0 deprecated 4.13.0
pasteFromWord_keepZeroMargins : BooleanCKEDITOR.config#pasteFromWord_keepZeroMargins -
Whether the
marginstyle of a pasted element that equals to 0 should be removed.// Disable removing `margin:0`, `margin-left:0`, etc. config.pasteTools_keepZeroMargins = true;Note: Please remember to update the Advanced Content Filter when you want to keep margins that other plugins don't use like
topandbottom.Defaults to
false -
since 4.13.0 deprecated 4.13.0
pasteTools_removeFontStyles : BooleanCKEDITOR.config#pasteTools_removeFontStylesWhether to ignore all font-related formatting styles, including:
- font size,
- font family,
- font foreground and background color.
config.pasteTools_removeFontStyles = true;Important note: This configuration option is deprecated. Either configure a proper Advanced Content Filter for the editor or use the CKEDITOR.editor.afterPasteFromWord event.
Defaults to
false -
plugins : String | String[]CKEDITOR.config#pluginsComma-separated list of plugins to be used in an editor instance. Note that the actual plugins that are to be loaded could still be affected by two other settings: extraPlugins and removePlugins.
Defaults to
"<default list of plugins>" -
protectedSource : ArrayCKEDITOR.config#protectedSourceA list of regular expressions to be executed on input HTML, indicating HTML source code that when matched, must not be available in the WYSIWYG mode for editing.
config.protectedSource.push( /<\?[\s\S]*?\?>/g ); // PHP code config.protectedSource.push( /<%[\s\S]*?%>/g ); // ASP code config.protectedSource.push( /(<asp:[^\>]+>[\s|\S]*?<\/asp:[^\>]+>)|(<asp:[^\>]+\/>)/gi ); // ASP.NET codeDefaults to
[] -
If
true, makes the editor start in read-only state. Otherwise, it will check if the linked<textarea>element has thedisabledattribute.Read more in the documentation and see the example.
config.readOnly = true;CKEDITOR.editor.setReadOnlyDefaults to
false -
removeButtons : String | String[]CKEDITOR.config#removeButtonsList of toolbar button names that must not be rendered. This will also work for non-button toolbar items, like the Font drop-down list.
config.removeButtons = 'Underline,JustifyCenter';Since version 4.20.0 you can also pass an array of button names:
config.removeButtons = [ 'Underline', 'JustifyCenter' ];This configuration option should not be overused. The recommended way is to use the removePlugins setting to remove features from the editor or even better, create a custom editor build with just the features that you will use. In some cases though, a single plugin may define a set of toolbar buttons and
removeButtonsmay be useful when just a few of them are to be removed. -
The dialog contents to removed. It's a string composed by dialog name and tab name with a colon between them.
Separate each pair with semicolon (see example).
Note: All names are case-sensitive.
Note: Be cautious when specifying dialog tabs that are mandatory, like
'info', dialog functionality might be broken because of this!config.removeDialogTabs = 'table:advanced;image:Link';Defaults to
'' -
removeFormatAttributes : StringCKEDITOR.config#removeFormatAttributesA comma separated list of elements attributes to be removed when executing the
remove formatcommand.Defaults to
'class,style,lang,width,height,align,hspace,valign' -
removeFormatTags : StringCKEDITOR.config#removeFormatTagsA comma separated list of elements to be removed when executing the
remove formatcommand. Note that only inline elements are allowed.Defaults to
'b,big,cite,code,del,dfn,em,font,i,ins,kbd,q,s,samp,small,span,strike,strong,sub,sup,tt,u,var' -
removePlugins : String | String[]CKEDITOR.config#removePluginsA list of plugins that must not be loaded. This setting makes it possible to avoid loading some plugins defined in the plugins setting without having to touch it.
Note: A plugin required by another plugin cannot be removed and will cause an error to be thrown. So for example if
contextmenuis required bytabletools, it can only be removed iftabletoolsis not loaded.config.removePlugins = 'elementspath,save,font';Defaults to
'' -
The dimensions for which the editor resizing is enabled. Possible values are
both,vertical, andhorizontal.Read more in the documentation and see the example.
config.resize_dir = 'both';Defaults to
'vertical' -
resize_enabled : BooleanCKEDITOR.config#resize_enabledWhether to enable the resizing feature. If this feature is disabled, the resize handle will not be visible.
Read more in the documentation and see the example.
config.resize_enabled = false;Defaults to
true -
resize_maxHeight : NumberCKEDITOR.config#resize_maxHeightThe maximum editor height, in pixels, when resizing the editor interface by using the resize handle.
Read more in the documentation and see the example.
config.resize_maxHeight = 600;Defaults to
3000 -
resize_maxWidth : NumberCKEDITOR.config#resize_maxWidthThe maximum editor width, in pixels, when resizing the editor interface by using the resize handle.
Read more in the documentation and see the example.
config.resize_maxWidth = 750;Defaults to
3000 -
resize_minHeight : NumberCKEDITOR.config#resize_minHeightThe minimum editor height, in pixels, when resizing the editor interface by using the resize handle. Note: It falls back to editor's actual height if it is smaller than the default value.
Read more in the documentation and see the example.
config.resize_minHeight = 600;Defaults to
250 -
resize_minWidth : NumberCKEDITOR.config#resize_minWidthThe minimum editor width, in pixels, when resizing the editor interface by using the resize handle. Note: It falls back to editor's actual width if it is smaller than the default value.
Read more in the documentation and see the example.
config.resize_minWidth = 500;Defaults to
750 -
scayt_autoStartup : BooleanCKEDITOR.config#scayt_autoStartupAutomatically enables SCAYT on editor startup. When set to
true, this option turns on SCAYT automatically after loading the editor.Read more in the documentation and see the SDK sample.
config.scayt_autoStartup = true;Defaults to
false -
scayt_contextCommands : StringCKEDITOR.config#scayt_contextCommandsCustomizes the display of SCAYT context menu commands ("Add Word", "Ignore", "Ignore All", "Options", "Languages", "Dictionaries" and "About"). This must be a string with one or more of the following words separated by a pipe character (
'|'):off– Disables all options.all– Enables all options.ignore– Enables the "Ignore" option.ignoreall– Enables the "Ignore All" option.add– Enables the "Add Word" option.option– Enables the "Options" menu item.language– Enables the "Languages" menu item.dictionary– Enables the "Dictionaries" menu item.about– Enables the "About" menu item.
Please note that availability of the "Options", "Languages" and "Dictionaries" items also depends on the scayt_uiTabs option.
Read more in the documentation and see the SDK sample.
Example:
// Show "Add Word", "Ignore" and "Ignore All" in the context menu. config.scayt_contextCommands = 'add|ignore|ignoreall';Defaults to
'ignoreall|add' -
scayt_contextMenuItemsOrder : StringCKEDITOR.config#scayt_contextMenuItemsOrderDefines the order of SCAYT context menu items by groups. This must be a string with one or more of the following words separated by a pipe character (
'|'):suggest– The main suggestion word list.moresuggest– The "More suggestions" word list.control– SCAYT commands, such as "Ignore" and "Add Word".
Read more in the documentation and see the SDK sample.
Example:
config.scayt_contextMenuItemsOrder = 'moresuggest|control|suggest';Defaults to
'suggest|moresuggest|control' -
scayt_customDictionaryIds : StringCKEDITOR.config#scayt_customDictionaryIdsLinks SCAYT to custom dictionaries. This is a string containing the dictionary IDs separated by commas (
','). Available only for the licensed version.Refer to SCAYT documentation for more details.
Read more in the documentation and see the SDK sample.
config.scayt_customDictionaryIds = '3021,3456,3478';Defaults to
'' -
scayt_customPunctuation : StringCKEDITOR.config#scayt_customPunctuationThe parameter that receives a string with characters that will considered as separators.
Read more in the documentation and see the SDK sample.
// additional separator. config.scayt_customPunctuation = '-';Defaults to
'' -
scayt_customerId : StringCKEDITOR.config#scayt_customerIdSets the customer ID for SCAYT. Used for hosted users only. Required for migration from free to trial or paid versions.
Read more in the documentation and see the SDK sample.
// Load SCAYT using my customer ID. config.scayt_customerId = 'your-encrypted-customer-id';Defaults to
'1:WvF0D4-UtPqN1-43nkD4-NKvUm2-daQqk3-LmNiI-z7Ysb4-mwry24-T8YrS3-Q2tpq2' -
scayt_disableOptionsStorage : ArrayCKEDITOR.config#scayt_disableOptionsStorageDisables storing of SCAYT options between sessions. Option storing will be turned off after a page refresh. The following settings can be used:
'options'– Disables storing of all SCAYT Ignore options.'ignore-all-caps-words'– Disables storing of the "Ignore All-Caps Words" option.'ignore-domain-names'– Disables storing of the "Ignore Domain Names" option.'ignore-words-with-mixed-cases'– Disables storing of the "Ignore Words with Mixed Case" option.'ignore-words-with-numbers'– Disables storing of the "Ignore Words with Numbers" option.'lang'– Disables storing of the SCAYT spell check language.'all'– Disables storing of all SCAYT options.
Read more in the documentation and see the SDK sample.
Example:
// Disabling one option. config.scayt_disableOptionsStorage = 'all'; // Disabling several options. config.scayt_disableOptionsStorage = ['lang', 'ignore-domain-names', 'ignore-words-with-numbers'];Defaults to
'' -
scayt_elementsToIgnore : StringCKEDITOR.config#scayt_elementsToIgnoreSpecifies the names of tags that will be skipped while spell checking. This is a string containing tag names separated by commas (
','). Please note that the'style'tag would be added to specified tags list.Read more in the documentation and see the SDK sample.
config.scayt_elementsToIgnore = 'del,pre';Defaults to
'style' -
scayt_handleCheckDirty : StringCKEDITOR.config#scayt_handleCheckDirtyIf set to
true, it overrides the checkDirty functionality of CKEditor to fix SCAYT issues with incorrectcheckDirtybehavior. If set tofalse, it provides better performance on big preloaded text.Read more in the documentation and see the SDK sample.
config.scayt_handleCheckDirty = 'false';Defaults to
'true' -
scayt_handleUndoRedo : StringCKEDITOR.config#scayt_handleUndoRedoConfigures undo/redo behavior of SCAYT in CKEditor. If set to
true, it overrides the undo/redo functionality of CKEditor to fix SCAYT issues with incorrect undo/redo behavior. If set tofalse, it provides better performance on text undo/redo.Read more in the documentation and see the SDK sample.
config.scayt_handleUndoRedo = 'false';Defaults to
'true' -
Enables the "Ignore All-Caps Words" option by default. You may need to disable option storing for this setting to be effective because option storage has a higher priority.
Read more in the documentation and see the SDK sample.
config.scayt_ignoreAllCapsWords = true;Defaults to
false -
Enables the "Ignore Domain Names" option by default. You may need to disable option storing for this setting to be effective because option storage has a higher priority.
Read more in the documentation and see the SDK sample.
config.scayt_ignoreDomainNames = true;Defaults to
false -
since 4.5.6
scayt_ignoreWordsWithMixedCases : BooleanCKEDITOR.config#scayt_ignoreWordsWithMixedCasesEnables the "Ignore Words with Mixed Case" option by default. You may need to disable option storing for this setting to be effective because option storage has a higher priority.
Read more in the documentation and see the SDK sample.
config.scayt_ignoreWordsWithMixedCases = true;Defaults to
false -
Enables the "Ignore Words with Numbers" option by default. You may need to disable option storing for this setting to be effective because option storage has a higher priority.
Read more in the documentation and see the SDK sample.
config.scayt_ignoreWordsWithNumbers = true;Defaults to
false -
since 4.5.6
scayt_inlineModeImmediateMarkup : BooleanCKEDITOR.config#scayt_inlineModeImmediateMarkupEnables SCAYT initialization when inline CKEditor is not focused. When set to
true, SCAYT markup is displayed in both inline editor states, focused and unfocused, so the SCAYT instance is not destroyed.Read more in the documentation and see the SDK sample.
config.scayt_inlineModeImmediateMarkup = true;Defaults to
false -
scayt_maxSuggestions : NumberCKEDITOR.config#scayt_maxSuggestionsDefines the number of SCAYT suggestions to show in the main context menu. Possible values are:
0(zero) – No suggestions are shown in the main context menu. All entries will be listed in the "More Suggestions" sub-menu.- Positive number – The maximum number of suggestions to show in the context menu. Other entries will be shown in the "More Suggestions" sub-menu.
- Negative number – Five suggestions are shown in the main context menu. All other entries will be listed in the "More Suggestions" sub-menu.
Read more in the documentation and see the SDK sample.
Examples:
// Display only three suggestions in the main context menu. config.scayt_maxSuggestions = 3; // Do not show the suggestions directly. config.scayt_maxSuggestions = 0;Defaults to
3 -
scayt_minWordLength : NumberCKEDITOR.config#scayt_minWordLengthDefines the minimum length of words that will be collected from the editor content for spell checking. Possible value is any positive number.
Read more in the documentation and see the SDK sample.
Examples:
// Set the minimum length of words that will be collected from editor text. config.scayt_minWordLength = 5;Defaults to
3 -
scayt_moreSuggestions : StringCKEDITOR.config#scayt_moreSuggestionsEnables and disables the "More Suggestions" sub-menu in the context menu. Possible values are
'on'and'off'.Read more in the documentation and see the SDK sample.
// Disables the "More Suggestions" sub-menu. config.scayt_moreSuggestions = 'off';Defaults to
'on' -
scayt_sLang : StringCKEDITOR.config#scayt_sLangSets the default spell checking language for SCAYT. Possible values are:
'da_DK','de_DE','el_GR','en_CA','en_GB','en_US','es_ES','fi_FI','fr_CA','fr_FR','it_IT','nb_NO''nl_NL','sv_SE'.Customers with dedicated SCAYT license may also set
'pt_BR'and'pt_PT'.Read more in the documentation and see the SDK sample.
// Sets SCAYT to German. config.scayt_sLang = 'de_DE';Defaults to
'en_US' -
scayt_serviceHost : StringCKEDITOR.config#scayt_serviceHostSets the host for the WebSpellChecker service (
ssrv.cgi) full path.Read more in the documentation and see the SDK sample.
// Defines the host for the WebSpellChecker service (ssrv.cgi) path. config.scayt_serviceHost = 'my-host';Defaults to
'svc.webspellchecker.net' -
scayt_servicePath : StringCKEDITOR.config#scayt_servicePathSets the path to the WebSpellChecker service (
ssrv.cgi).Read more in the documentation and see the SDK sample.
// Defines the path to the WebSpellChecker service (ssrv.cgi). config.scayt_servicePath = 'my-path/ssrv.cgi';Defaults to
'spellcheck31/script/ssrv.cgi' -
scayt_servicePort : StringCKEDITOR.config#scayt_servicePortSets the port for the WebSpellChecker service (
ssrv.cgi) full path.Read more in the documentation and see the SDK sample.
// Defines the port for the WebSpellChecker service (ssrv.cgi) path. config.scayt_servicePort = '2330';Defaults to
'80' -
scayt_serviceProtocol : StringCKEDITOR.config#scayt_serviceProtocolSets the protocol for the WebSpellChecker service (
ssrv.cgi) full path.Read more in the documentation and see the SDK sample.
// Defines the protocol for the WebSpellChecker service (ssrv.cgi) path. config.scayt_serviceProtocol = 'https';Defaults to
'http' -
scayt_srcUrl : StringCKEDITOR.config#scayt_srcUrlSets the URL to SCAYT core. Required to switch to the licensed version of SCAYT.
Refer to SCAYT documentation for more details.
Read more in the documentation and see the SDK sample.
config.scayt_srcUrl = "http://my-host/spellcheck/lf/scayt/scayt.js";Defaults to
'//svc.webspellchecker.net/spellcheck31/wscbundle/wscbundle.js' -
scayt_uiTabs : StringCKEDITOR.config#scayt_uiTabsCustomizes the SCAYT dialog and SCAYT toolbar menu to show particular tabs and items. This setting must contain a
1(enabled) or0(disabled) value for each of the following entries, in this precise order, separated by a comma (','):'Options','Languages', and'Dictionary'.Read more in the documentation and see the SDK sample.
// Hides the "Languages" tab. config.scayt_uiTabs = '1,0,1';Defaults to
'1,1,1' -
scayt_userDictionaryName : StringCKEDITOR.config#scayt_userDictionaryNameActivates a User Dictionary in SCAYT. The user dictionary name must be used. Available only for the licensed version.
Refer to SCAYT documentation for more details.
Read more in the documentation and see the SDK sample.
config.scayt_userDictionaryName = 'MyDictionary';Defaults to
'' -
sharedSpaces : ObjectCKEDITOR.config#sharedSpacesMakes it possible to place some of the editor UI blocks, like the toolbar and the elements path, in any element on the page.
The elements used to store the UI blocks can be shared among several editor instances. In that case only the blocks relevant to the active editor instance will be displayed.
Read more in the documentation and see the example.
// Place the toolbar inside the element with an ID of "someElementId" and the // elements path into the element with an ID of "anotherId". config.sharedSpaces = { top: 'someElementId', bottom: 'anotherId' }; // Place the toolbar inside the element with an ID of "someElementId". The // elements path will remain attached to the editor UI. config.sharedSpaces = { top: 'someElementId' }; // (Since 4.5.0) // Place the toolbar inside a DOM element passed by a reference. The // elements path will remain attached to the editor UI. var htmlElement = document.getElementById( 'someElementId' ); config.sharedSpaces = { top: htmlElement };Note: The Maximize and Editor Resize features are not supported in the shared space environment and should be disabled in this context.
config.removePlugins = 'maximize,resize'; -
shiftEnterMode : NumberCKEDITOR.config#shiftEnterModeSimilarly to the enterMode setting, it defines the behavior of the Shift+Enter key combination.
The allowed values are the following constants that cause the behavior outlined below:
- CKEDITOR.ENTER_P (1) – New
<p>paragraphs are created. - CKEDITOR.ENTER_BR (2) – Lines are broken with
<br>elements. - CKEDITOR.ENTER_DIV (3) – New
<div>blocks are created.
Read more in the documentation and see the example.
Example:
config.shiftEnterMode = CKEDITOR.ENTER_P;Defaults to
CKEDITOR.ENTER_BR - CKEDITOR.ENTER_P (1) – New
-
shiftLineBreaks : Boolean | FunctionCKEDITOR.config#shiftLineBreaksIndicates if line breaks (
br) should be moved outside inline elements.Note: This is a global configuration that applies to all instances.
By default, all children
brelements, placed at the end of an inline element, are shifted outside that element. Shifted elements are attached at the end of the parent block element. It allows producing more clean HTML output without an abundance of orphaned styling markers. This logic can be changed by disabling shifting line breaks or providing a custom function allowing to conditionally choose proper behavior.shiftLineBreaks = true
Shift line breaks outside inline element:
<p><strong>hello, world!<br><br></strong></p>will become:
<p><strong>hello, world!</strong><br><br></p>shiftLineBreaks = false
Keep line breaks inside an inline element:
<p><strong>hello, world!<br><br></strong></p>shiftLineBreaks = customFunction
Provide a callback function allowing to decide if a line break should be shifted:
CKEDITOR.config.shiftLineBreaks = function() { if ( condition ) { // Shift line break outside element. return true; } // Keep line break inside element. return false; }You can also decide to return the CKEDITOR.htmlParser.text or CKEDITOR.htmlParser.element node that will be attached at the end of the last
brnode inside an inline element.As an example, you may want to add an additional
filler to make sure that a user will be able to place caret after break lines:CKEDITOR.config.shiftLineBreaks = function() { // Append `nbsp;` character at the end. return new CKEDITOR.htmlParser.text( ' ' ); }resulting in:
<p><strong>hello, world!<br><br> </strong></p>Defaults to
true -
skin : StringCKEDITOR.config#skinThe editor skin name. Note that it is not possible to have editors with different skin settings in the same page. In such case just one of the skins will be used for all editors.
This is a shortcut to CKEDITOR.skinName.
It is possible to install skins outside the default
skinfolder in the editor installation. In that case, the absolute URL path to that folder should be provided, separated by a comma ('skin_name,skin_path').config.skin = 'moono'; config.skin = 'myskin,/customstuff/myskin/'; -
The number of columns to be generated by the smilies matrix.
config.smiley_columns = 6;Defaults to
8 -
smiley_descriptions : ArrayCKEDITOR.config#smiley_descriptionsThe description to be used for each of the smileys defined in the smiley_images setting. Each entry in this array list must match its relative pair in the smiley_images setting.
// Default settings. config.smiley_descriptions = [ 'smiley', 'sad', 'wink', 'laugh', 'frown', 'cheeky', 'blush', 'surprise', 'indecision', 'angry', 'angel', 'cool', 'devil', 'crying', 'enlightened', 'no', 'yes', 'heart', 'broken heart', 'kiss', 'mail' ]; // Use textual emoticons as description. config.smiley_descriptions = [ ':)', ':(', ';)', ':D', ':/', ':P', ':*)', ':-o', ':|', '>:(', 'o:)', '8-)', '>:-)', ';(', '', '', '', '', '', ':-*', '' ];Defaults to
['smiley', 'sad', 'wink', 'laugh', 'frown', 'cheeky', 'blush', 'surprise', 'indecision', 'angry', 'angel', 'cool', 'devil', 'crying', 'enlightened', 'no', 'yes', 'heart', 'broken heart', 'kiss', 'mail'] -
smiley_images : ArrayCKEDITOR.config#smiley_imagesThe file names for the smileys to be displayed. These files must be contained inside the URL path defined with the smiley_path setting.
// This is actually the default value. config.smiley_images = [ 'regular_smile.png','sad_smile.png','wink_smile.png','teeth_smile.png','confused_smile.png','tongue_smile.png', 'embarrassed_smile.png','omg_smile.png','whatchutalkingabout_smile.png','angry_smile.png','angel_smile.png','shades_smile.png', 'devil_smile.png','cry_smile.png','lightbulb.png','thumbs_down.png','thumbs_up.png','heart.png', 'broken_heart.png','kiss.png','envelope.png' ];Defaults to
['regular_smile.png', 'sad_smile.png', 'wink_smile.png', 'teeth_smile.png', 'confused_smile.png', 'tongue_smile.png', 'embarrassed_smile.png', 'omg_smile.png', 'whatchutalkingabout_smile.png', 'angry_smile.png', 'angel_smile.png', 'shades_smile.png', 'devil_smile.png', 'cry_smile.png', 'lightbulb.png', 'thumbs_down.png', 'thumbs_up.png', 'heart.png', 'broken_heart.png', 'kiss.png', 'envelope.png'] -
smiley_path : StringCKEDITOR.config#smiley_pathThe base path used to build the URL for the smiley images. It must end with a slash.
config.smiley_path = 'http://www.example.com/images/smileys/'; config.smiley_path = '/images/smileys/';Defaults to
CKEDITOR.basePath + 'plugins/smiley/images/' -
sourceAreaTabSize : NumberCKEDITOR.config#sourceAreaTabSizeControls the
tab-sizeCSS property of the source editing area. Use it to set the width of the tab character in the source view. Enter an integer to denote the number of spaces that the tab will contain.Note: Works only with dataIndentationChars set to
'\t'. Please consider that not all browsers support thetab-sizeCSS property yet.// Set tab-size to 10 characters. config.sourceAreaTabSize = 10;CKEDITOR.config.dataIndentationCharsDefaults to
4 -
specialChars : ArrayCKEDITOR.config#specialCharsThe list of special characters visible in the "Special Character" dialog window.
config.specialChars = [ '"', '’', [ '&custom;', 'Custom label' ] ]; config.specialChars = config.specialChars.concat( [ '"', [ '’', 'Custom label' ] ] );Defaults to
['!', '"', '#', '$', '%', '&', "'", '(', ')', '*', '+', '-', '.', '/', '0', '1', '2', '3', '4', '5', '6', '7', '8', '9', ':', ';', '<', '=', '>', '?', '@', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z', '[', ']', '^', '_', '`', 'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z', '{', '|', '}', '~', '€', '‘', '’', '“', '”', '–', '—', '¡', '¢', '£', '¤', '¥', '¦', '§', '¨', '©', 'ª', '«', '¬', '®', '¯', '°', '²', '³', '´', 'µ', '¶', '·', '¸', '¹', 'º', '»', '¼', '½', '¾', '¿', 'À', 'Á', 'Â', 'Ã', 'Ä', 'Å', 'Æ', 'Ç', 'È', 'É', 'Ê', 'Ë', 'Ì', 'Í', 'Î', 'Ï', 'Ð', 'Ñ', 'Ò', 'Ó', 'Ô', 'Õ', 'Ö', '×', 'Ø', 'Ù', 'Ú', 'Û', 'Ü', 'Ý', 'Þ', 'ß', 'à', 'á', 'â', 'ã', 'ä', 'å', 'æ', 'ç', 'è', 'é', 'ê', 'ë', 'ì', 'í', 'î', 'ï', 'ð', 'ñ', 'ò', 'ó', 'ô', 'õ', 'ö', '÷', 'ø', 'ù', 'ú', 'û', 'ü', 'ý', 'þ', 'ÿ', 'Œ', 'œ', 'Ŵ', 'Ŷ', 'ŵ', 'ŷ', '‚', '‛', '„', '…', '™', '►', '•', '→', '⇒', '⇔', '♦', '≈'] -
startupFocus : String | BooleanCKEDITOR.config#startupFocusWhether an editable element should have focus when the editor is loading for the first time.
// Focus at the beginning of the editable. config.startupFocus = true;Since CKEditor 4.9.0,
startupFocuscan be explicitly set to either thestartor theendof the editable:// Focus at the beginning of the editable. config.startupFocus = 'start'; // Focus at the end of the editable. config.startupFocus = 'end';Defaults to
false -
startupMode : StringCKEDITOR.config#startupModeThe mode to load at the editor startup. It depends on the plugins loaded. By default, the
wysiwygandsourcemodes are available.config.startupMode = 'source';Defaults to
'wysiwyg' -
startupOutlineBlocks : BooleanCKEDITOR.config#startupOutlineBlocksWhether to automaticaly enable the show block" command when the editor loads.
config.startupOutlineBlocks = true;Defaults to
false -
startupShowBorders : BooleanCKEDITOR.config#startupShowBordersWhether to automatically enable the "show borders" command when the editor loads.
config.startupShowBorders = false;Defaults to
true -
The "styles definition set" to use in the editor. They will be used in the styles combo and the style selector of the div container.
The styles may be defined in the page containing the editor, or can be loaded on demand from an external file. In the second case, if this setting contains only a name, the
styles.jsfile will be loaded from the CKEditor root folder (what ensures backward compatibility with CKEditor 4.0).Otherwise, this setting has the
name:urlsyntax, making it possible to set the URL from which the styles file will be loaded. Note that thenamehas to be equal to the name used in CKEDITOR.stylesSet.add while registering the styles set.Note: Since 4.1.0 it is possible to set
stylesSettofalseto prevent loading any styles set.Read more in the documentation and see the example.
// Do not load any file. The styles set is empty. config.stylesSet = false; // Load the 'mystyles' styles set from the styles.js file. config.stylesSet = 'mystyles'; // Load the 'mystyles' styles set from a relative URL. config.stylesSet = 'mystyles:/editorstyles/styles.js'; // Load the 'mystyles' styles set from a full URL. config.stylesSet = 'mystyles:http://www.example.com/editorstyles/styles.js'; // Load from a list of definitions. config.stylesSet = [ { name: 'Strong Emphasis', element: 'strong' }, { name: 'Emphasis', element: 'em' }, ... ];Defaults to
'default' -
A regular expression that defines whether a CSS rule will be skipped by the Stylesheet Parser plugin. A CSS rule matching the regular expression will be ignored and will not be available in the Styles drop-down list.
Read more in the documentation and see the example.
// Ignore rules for body and caption elements, classes starting with "high", and any class defined for no specific element. config.stylesheetParser_skipSelectors = /(^body\.|^caption\.|\.high|^\.)/i;CKEDITOR.config.stylesheetParser_validSelectorsDefaults to
/(^body\.|^\.)/i -
A regular expression that defines which CSS rules will be used by the Stylesheet Parser plugin. A CSS rule matching the regular expression will be available in the Styles drop-down list.
Read more in the documentation and see the example.
// Only add rules for p and span elements. config.stylesheetParser_validSelectors = /\^(p|span)\.\w+/;CKEDITOR.config.stylesheetParser_skipSelectorsDefaults to
/\w+\.\w+/ -
tabIndex : NumberCKEDITOR.config#tabIndexThe editor
tabindexvalue.Read more in the documentation and see the example.
config.tabIndex = 1;Defaults to
0 -
tabSpaces : NumberCKEDITOR.config#tabSpacesInstructs the editor to add a number of spaces (
) to the text when hitting the Tab key. If set to zero, the Tab key will be used to move the cursor focus to the next element in the page, out of the editor focus.config.tabSpaces = 4;Defaults to
0 -
Changes the available values of the "Cell Type" field inside the "Cell Properties" dialog. If it's set to
false(the default value), the "Cell Type" field will contain two options:- "Data",
- "Header".
If the option is set to
true, the "Cell Type" field in the "Cell Properties" dialog will contain three possible values:- "Data",
- "Column Header",
- "Row Header".
Column and row header options updates table headers (
th) with thescopeattribute that may improve accessibility experience in more complex tables. Read the w3.org guide about using the scope attribute to associate header cells and data cells in data tables to learn more.If this config variable is set to
trueand there is athelement without thescopeattribute in the editor's content, its "Cell Type" value will be set to an empty value. To avoid that issue, tables withthelements need to be migrated. The sample transformation that adds[scope=col]to all scopelessthelements is presented below:editor.filter.addTransformations( [ [ { element: 'th', left: function( el ) { return !el.attributes.scope; }, right: function( el ) { el.attributes.scope = 'col'; } } ] ] );The transformation is added to the editor using CKEDITOR.filter.addTransformations.
Defaults to
false -
templates : StringCKEDITOR.config#templatesThe templates definition set to use. It accepts a list of names separated by comma. It must match definitions loaded with the templates_files setting.
config.templates = 'my_templates';Defaults to
'default' -
templates_files : String[]CKEDITOR.config#templates_filesThe list of templates definition files to load.
config.templates_files = [ '/editor_templates/site_default.js', 'http://www.example.com/user_templates.js' ];For a sample template file see
templates/default.js. For more information on template definiton see CKEDITOR.plugins.templates.collectionDefinition. -
templates_replaceContent : BooleanCKEDITOR.config#templates_replaceContentWhether the "Replace actual contents" checkbox is checked by default in the Templates dialog.
config.templates_replaceContent = false;Defaults to
true -
Customizes the human-readable title of this editor. This title is displayed in tooltips and impacts various accessibility aspects, e.g. it is commonly used by screen readers for distinguishing editor instances and for navigation. Accepted values are a string or
false.Note: When
config.titleis set globally, the same value will be applied to all editor instances loaded with this config. This may adversely affect accessibility as screen reader users will be unable to distinguish particular editor instances and navigate between them.Note: Setting
config.title = falsemay also impair accessibility in a similar way.Note: Please do not confuse this property with CKEDITOR.editor.name which identifies the instance in the CKEDITOR.instances literal.
// Sets the title to 'My WYSIWYG editor.'. The original title of the element (if it exists) // will be restored once the editor instance is destroyed. config.title = 'My WYSIWYG editor.'; // Do not touch the title. If the element already has a title, it remains unchanged. // Also if no `title` attribute exists, nothing new will be added. config.title = false;See also: * CKEDITOR.editor.title * CKEDITOR.editor.name * CKEDITOR.editor.applicationTitle * CKEDITOR.config.applicationTitle
Defaults to
based on editor.name -
toolbar : Array | StringCKEDITOR.config#toolbarThe toolbox (alias toolbar) definition. It is a toolbar name or an array of toolbars (strips), each one being also an array, containing a list of UI items.
If set to
null, the toolbar will be generated automatically using all available buttons and toolbarGroups as a toolbar groups layout.In CKEditor 4.5.0+ you can generate your toolbar customization code by using the visual toolbar configurator.
// Defines a toolbar with only one strip containing the "Source" button, a // separator, and the "Bold" and "Italic" buttons. config.toolbar = [ [ 'Source', '-', 'Bold', 'Italic' ] ]; // Similar to the example above, defines a "Basic" toolbar with only one strip containing three buttons. // Note that this setting is composed by "toolbar_" added to the toolbar name, which in this case is called "Basic". // This second part of the setting name can be anything. You must use this name in the CKEDITOR.config.toolbar setting // in order to instruct the editor which `toolbar_(name)` setting should be used. config.toolbar_Basic = [ [ 'Source', '-', 'Bold', 'Italic' ] ]; // Load toolbar_Name where Name = Basic. config.toolbar = 'Basic';Defaults to
null -
toolbarCanCollapse : BooleanCKEDITOR.config#toolbarCanCollapseWhether the toolbar can be collapsed by the user. If disabled, the Collapse Toolbar button will not be displayed.
config.toolbarCanCollapse = true;Defaults to
false -
When enabled, causes the Arrow keys navigation to cycle within the current toolbar group. Otherwise the Arrow keys will move through all items available in the toolbar. The Tab key will still be used to quickly jump among the toolbar groups.
config.toolbarGroupCycling = false;Defaults to
true -
toolbarGroups : ArrayCKEDITOR.config#toolbarGroupsThe toolbar groups definition.
If the toolbar layout is not explicitly defined by the toolbar setting, then this setting is used to group all defined buttons (see CKEDITOR.ui.addButton). Buttons are associated with toolbar groups by the
toolbarproperty in their definition objects.New groups may be dynamically added during the editor and plugin initialization by CKEDITOR.ui.addToolbarGroup. This is only possible if the default setting was used.
// Default setting. config.toolbarGroups = [ { name: 'document', groups: [ 'mode', 'document', 'doctools' ] }, { name: 'clipboard', groups: [ 'clipboard', 'undo' ] }, { name: 'editing', groups: [ 'find', 'selection', 'spellchecker' ] }, { name: 'forms' }, '/', { name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ] }, { name: 'paragraph', groups: [ 'list', 'indent', 'blocks', 'align', 'bidi' ] }, { name: 'links' }, { name: 'insert' }, '/', { name: 'styles' }, { name: 'colors' }, { name: 'tools' }, { name: 'others' }, { name: 'about' } ];Defaults to
see example -
toolbarLocation : StringCKEDITOR.config#toolbarLocationThe part of the user interface where the toolbar will be rendered. For the default editor implementation, the recommended options are
'top'and'bottom'.Please note that this option is only applicable to classic (
iframe-based) editor. In case of inline editor the toolbar position is set dynamically depending on the position of the editable element on the screen.Read more in the documentation and see the example.
config.toolbarLocation = 'bottom';Defaults to
'top' -
toolbarStartupExpanded : BooleanCKEDITOR.config#toolbarStartupExpandedWhether the toolbar must start expanded when the editor is loaded.
Setting this option to
falsewill affect the toolbar only when toolbarCanCollapse is set totrue:config.toolbarCanCollapse = true; config.toolbarStartupExpanded = false;Defaults to
true -
uiColor : StringCKEDITOR.config#uiColorThe base user interface color to be used by the editor. Not all skins are compatible with this setting.
Read more in the documentation and see the example.
// Using a color code. config.uiColor = '#AADC6E'; // Using an HTML color name. config.uiColor = 'Gold'; -
undoStackSize : NumberCKEDITOR.config#undoStackSizeThe number of undo steps to be saved. The higher value is set, the more memory is used for it.
config.undoStackSize = 50;Defaults to
20 -
A regular expression that defines which image types are supported by the Upload Image plugin.
// Accepts only png and jpeg image types. config.uploadImage_supportedTypes = /image\/(png|jpeg)/;Defaults to
/image\/(jpeg|png|gif|bmp)/ -
The URL where files should be uploaded.
An empty string means that the option is disabled.
Defaults to
'' -
Indicates that some of the editor features, like alignment and text direction, should use the "computed value" of the feature to indicate its on/off state instead of using the "real value".
If enabled in a Left-To-Right written document, the "Left Justify" alignment button will be shown as active, even if the alignment style is not explicitly applied to the current paragraph in the editor.
config.useComputedState = false;Defaults to
true -
The version check feature adds a notification system to the editor that informs users if the editor version is secure. It is highly recommended to stay up to date with the editor version to ensure that the editor is secure and provides the best editing experience to users.
If the current version is below the latest published secure version, a user will be prompted about the available update. This feature is integrated with the Notification plugin, the About dialog, and developer console logs.
You can manually disable this feature by setting the option to
false, but we strongly recommend upgrading the editor instead.- For CKEditor 4.22.* and below, this option is enabled by default.
- For CKEditor 4 LTS (4.23.0 and above), this option is disabled by default.
Starting July 1st, 2024, we have enabled security notifications for editor instances accessed through https://cdn.ckeditor.com/. To learn more about these changes, please read this article: https://ckeditor.com/blog/important-update-for-ckeditor-4-users. You can control security notifications for CDN-based editors using the
config.versionCheckoption. -
since 4.17.0
widget_keystrokeInsertLineAfter : NumberCKEDITOR.config#widget_keystrokeInsertLineAfterDefines the keyboard shortcut for inserting a line after selected widget. Default combination is
Shift+Enter. New element tag is based on enterMode option.config.widget_keystrokeInsertLineAfter = 'CKEDITOR.SHIFT + 40'; // Shift + Arrow DownDefaults to
CKEDITOR.SHIFT+13 -
since 4.17.0
widget_keystrokeInsertLineBefore : NumberCKEDITOR.config#widget_keystrokeInsertLineBeforeDefines the keyboard shortcut for inserting a line before selected widget. Default combination is
Shift+Alt+Enter. New element tag is based on enterMode option.config.widget_keystrokeInsertLineBefore = 'CKEDITOR.SHIFT + 38'; // Shift + Arrow UpDefaults to
CKEDITOR.SHIFT+CKEDITOR.ALT+13 -
width : String | NumberCKEDITOR.config#widthThe editor UI outer width. This configuration option accepts an integer (to denote a value in pixels) or any CSS-defined length unit.
Unlike the height setting, this one will set the outer width of the entire editor UI, not for the editing area only.
Note: This configuration option is ignored by inline editor.
Read more in the documentation and see the example.
config.width = 850; // 850 pixels wide. config.width = '75%'; // CSS unit.Defaults to
''