ckeditor4
Version:
JavaScript WYSIWYG web text editor.
309 lines (268 loc) • 9.25 kB
HTML
<!--
Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
CKEditor 4 LTS ("Long Term Support") is available under the terms of the Extended Support Model.
-->
<html lang="en">
<head>
<meta charset="utf-8">
<title>Code Snippet — CKEditor Sample</title>
<script src="../../../ckeditor.js"></script>
<link href="../../../samples/old/sample.css" rel="stylesheet">
<link href="../../../plugins/codesnippet/lib/highlight/styles/monokai-sublime.css" rel="stylesheet">
<meta name="ckeditor-sample-name" content="Code Snippet plugin">
<meta name="ckeditor-sample-group" content="Plugins">
<meta name="ckeditor-sample-description" content="View and modify code using the Code Snippet plugin.">
<meta name="ckeditor-sample-isnew" content="1">
<meta name="description" content="Try the latest sample of CKEditor 4 and learn more about customizing your WYSIWYG editor with endless possibilities.">
<style>
#editable
{
padding: 10px 20px;
}
</style>
</head>
<body>
<h1 class="samples">
<a href="../../../samples/old/index.html">CKEditor Samples</a> » Code Snippet Plugin
</h1>
<div class="warning deprecated">
This sample is not maintained anymore. Check out its <a href="https://ckeditor.com/docs/ckeditor4/latest/examples/codesnippet.html">brand new version in CKEditor Examples</a>.
</div>
<div class="description">
<p>
This editor is using the <strong><a href="https://ckeditor.com/cke4/addon/codesnippet">Code Snippet</a></strong> plugin which introduces beautiful code snippets.
By default the <code>codesnippet</code> plugin depends on the built-in client-side syntax highlighting
library <a href="https://highlightjs.org">highlight.js</a>.
</p>
<p>
You can adjust the appearance of code snippets using the <code><a href="https://ckeditor.com/docs/ckeditor4/latest/api/CKEDITOR_config.html#cfg-codeSnippet_theme">codeSnippet_theme</a></code> configuration variable
(see <a href="https://highlightjs.org/static/demo/">available themes</a>).
</p>
<p>
Select theme: <select id="select"></select>
</p>
<p>
The CKEditor instance below was created by using the following configuration settings:
</p>
<pre class="samples" id="sampleConfig">
CKEDITOR.replace( 'editor1', {
<strong>extraPlugins: 'codesnippet',</strong>
codeSnippet_theme: 'monokai-sublime'
} );
</pre>
<p id="ie8-warning">
Please note that this plugin is not compatible with Internet Explorer.
</p>
</div>
<textarea id="editor1">
<p>JavaScript code:</p>
<pre>
<code class="language-javascript">function isEmpty( object ) {
for ( var i in object ) {
if ( object.hasOwnProperty( i ) )
return false;
}
return true;
}</code></pre>
<p>SQL query:</p>
<pre>
<code class="language-sql">SELECT cust.id FROM cust LEFT JOIN loc ON ( cust.loc_id = loc.id ) WHERE cust.type IN ( 1, 2 );</code></pre>
<p>Unknown markup:</p>
<pre>
<code> ________________
/ \
| How about moo? | ^__^
\________________/ (oo)\_______
\ (__)\ )\/\
||----w |
|| ||
</code></pre>
</textarea>
<h2>Inline editor</h2>
<div class="description">
<p>
The following sample shows the <strong>Code Snippet</strong> plugin running inside
an inline CKEditor instance. The CKEditor instance below was created by using the following configuration settings:
</p>
<pre class="samples">
CKEDITOR.inline( 'editable', {
<strong>extraPlugins: 'codesnippet'</strong>
} );
</pre>
<p>
<strong>Note</strong>: The <a href="https://highlightjs.org/static/demo/">highlight.js themes</a>
must be loaded manually to be applied inside an inline editor instance, as the
<code>codeSnippet_theme</code> setting will not work in that case.
You need to include the stylesheet in the <code><head></code> section of the page, for example:
</p>
<pre class="samples">
<head>
...
<link href="path/to/highlight.js/styles/monokai-sublime.css" rel="stylesheet">
</head>
</pre>
</div>
<div id="editable" contenteditable="true">
<p>JavaScript code:</p>
<pre><code class="language-javascript">function isEmpty( object ) {
for ( var i in object ) {
if ( object.hasOwnProperty( i ) )
return false;
}
return true;
}</code></pre>
<p>SQL query:</p>
<pre><code class="language-sql">SELECT cust.id, cust.name, loc.city FROM cust LEFT JOIN loc ON ( cust.loc_id = loc.id ) WHERE cust.type IN ( 1, 2 );</code></pre>
<p>Unknown markup:</p>
<pre><code> ________________
/ \
| How about moo? | ^__^
\________________/ (oo)\_______
\ (__)\ )\/\
||----w |
|| ||
</code></pre>
</div>
<h2>Server-side Highlighting and Custom Highlighting Engines</h2>
<p>
The <a href="https://ckeditor.com/cke4/addon/codesnippetgeshi"><strong>Code Snippet GeSHi</strong></a> plugin is an
extension of the <strong>Code Snippet</strong> plugin which uses a server-side highligter.
</p>
<p>
It also is possible to replace the default highlighter with any library using
the <a href="https://ckeditor.com/docs/ckeditor4/latest/api/CKEDITOR_plugins_codesnippet_highlighter.html">Highlighter API</a>
and the <a href="https://ckeditor.com/docs/ckeditor4/latest/api/CKEDITOR_plugins_codesnippet.html#method-setHighlighter"><code>editor.plugins.codesnippet.setHighlighter()</code></a> method.
</p>
<script>
( function() {
CKEDITOR.disableAutoInline = true;
var config = {
extraPlugins: 'codesnippet',
toolbar: [
[ 'Source' ], [ 'Undo', 'Redo' ], [ 'Bold', 'Italic', 'Underline' ], [ 'CodeSnippet' ]
],
codeSnippet_theme: 'monokai-sublime',
height: 400
};
CKEDITOR.replace( 'editor1', config );
CKEDITOR.inline( 'editable', CKEDITOR.tools.extend( {}, config, {
extraPlugins: 'codesnippet'
}, true ) );
initThemeChange();
function initThemeChange() {
var templates = [
'1c-light',
'a11y-dark',
'a11y-light',
'agate',
'an-old-hope',
'androidstudio',
'arduino-light',
'arta',
'ascetic',
'atom-one-dark-reasonable',
'atom-one-dark',
'atom-one-light',
'brown-paper',
'codepen-embed',
'color-brewer',
'dark',
'default',
'devibeans',
'docco',
'far',
'felipec',
'foundation',
'github-dark-dimmed',
'github-dark',
'github',
'gml',
'googlecode',
'gradient-dark',
'gradient-light',
'grayscale',
'hybrid',
'idea',
'intellij-light',
'ir-black',
'isbl-editor-dark',
'isbl-editor-light',
'kimbie-dark',
'kimbie-light',
'lightfair',
'lioshi',
'magula',
'mono-blue',
'monokai-sublime',
'monokai',
'night-owl',
'nnfx-dark',
'nnfx-light',
'nord',
'obsidian',
'panda-syntax-dark',
'panda-syntax-light',
'paraiso-dark',
'paraiso-light',
'pojoaque',
'purebasic',
'qtcreator-dark',
'qtcreator-light',
'rainbow',
'routeros',
'school-book',
'shades-of-purple',
'srcery',
'stackoverflow-dark',
'stackoverflow-light',
'sunburst',
'tokyo-night-dark',
'tokyo-night-light',
'tomorrow-night-blue',
'tomorrow-night-bright',
'vs',
'vs2015',
'xcode',
'xt256'
],
pre = CKEDITOR.document.getById( 'sampleConfig' ),
select = CKEDITOR.document.getById( 'select' ),
codeTemplate = 'CKEDITOR.replace( \'editor1\', {\n' +
' <strong>extraPlugins: \'codesnippet\',</strong>\n' +
' codeSnippet_theme: \'{tpl}\'\n' +
'} );',
name, option;
while ( ( name = templates.shift() ) ) {
option = CKEDITOR.document.createElement( 'option', {
attributes: {
value: name
}
} );
option.setText( name );
select.append( option );
}
select.$.onchange = function() {
if ( CKEDITOR.instances.editor1 )
CKEDITOR.instances.editor1.destroy();
CKEDITOR.replace( 'editor1', CKEDITOR.tools.extend( {}, config, {
codeSnippet_theme: this.value
}, true ) );
pre.setHtml( codeTemplate.replace( '{tpl}', this.value ) );
};
}
if ( CKEDITOR.env.ie && CKEDITOR.env.version == 8 )
CKEDITOR.document.getById( 'ie8-warning' ).addClass( 'warning' );
}() );
</script>
<div id="footer">
<hr>
<p>
CKEditor - The text editor for the Internet - <a class="samples" href="https://ckeditor.com/">https://ckeditor.com</a>
</p>
<p id="copy">
Copyright © 2003-2025, <a class="samples" href="https://cksource.com/">CKSource</a> Holding sp. z o.o. All rights reserved.
</p>
</div>
</body>
</html>