diff options
Diffstat (limited to 'public/bower_components/ckeditor/samples/old/codesnippet')
| -rw-r--r-- | public/bower_components/ckeditor/samples/old/codesnippet/codesnippet.html | 236 |
1 files changed, 236 insertions, 0 deletions
diff --git a/public/bower_components/ckeditor/samples/old/codesnippet/codesnippet.html b/public/bower_components/ckeditor/samples/old/codesnippet/codesnippet.html new file mode 100644 index 0000000..46e1e4c --- /dev/null +++ b/public/bower_components/ckeditor/samples/old/codesnippet/codesnippet.html @@ -0,0 +1,236 @@ +<!DOCTYPE html> +<!-- +Copyright (c) 2003-2018, CKSource - Frederico Knabben. All rights reserved. +For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license +--> +<html> +<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"> + <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://sdk.ckeditor.com/samples/codesnippet.html">brand new version in CKEditor SDK</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="http://highlightjs.org">highlight.js</a>. + </p> + <p> + You can adjust the appearance of code snippets using the <code><a href="https://docs.ckeditor.com/ckeditor4/docs/#!/api/CKEDITOR.config-cfg-codeSnippet_theme">codeSnippet_theme</a></code> configuration variable + (see <a href="http://highlightjs.org/static/test.html">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 8. + </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="http://highlightjs.org/static/test.html">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://docs.ckeditor.com/ckeditor4/docs/#!/api/CKEDITOR.plugins.codesnippet.highlighter">Highlighter API</a> + and the <a href="https://docs.ckeditor.com/ckeditor4/docs/#!/api/CKEDITOR.plugins.codesnippet-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 = [ + 'monokai_sublime', 'default', 'arta', 'ascetic', 'atelier-dune.dark', 'atelier-dune.light', 'atelier-forest.dark', 'atelier-forest.light', 'atelier-heath.dark', 'atelier-heath.light', 'atelier-lakeside.dark', 'atelier-lakeside.light', 'atelier-seaside.dark', 'atelier-seaside.light', 'brown_paper', 'dark', 'docco', 'far', 'foundation', 'github', 'googlecode', 'idea', 'ir_black', 'magula', 'mono-blue', 'monokai', 'obsidian', 'paraiso.dark', 'paraiso.light', 'pojoaque', 'railscasts', 'rainbow', 'school_book', 'solarized_dark', 'solarized_light', 'sunburst', 'tomorrow-night-blue', 'tomorrow-night-bright', 'tomorrow-night-eighties', 'tomorrow-night', 'tomorrow', 'vs', 'xcode', 'zenburn' + ], + 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-2018, <a class="samples" href="https://cksource.com/">CKSource</a> - Frederico + Knabben. All rights reserved. + </p> + </div> +</body> +</html> |