Switch toolchain from yarn to npm
This commit is contained in:
@@ -0,0 +1,103 @@
|
||||
<!DOCTYPE html>
|
||||
<!--
|
||||
Copyright (c) 2003-2020, CKSource - Frederico Knabben. All rights reserved.
|
||||
For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
|
||||
-->
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>AutoGrow Plugin — CKEditor Sample</title>
|
||||
<script src="../../../ckeditor.js"></script>
|
||||
<link rel="stylesheet" href="../../../samples/old/sample.css">
|
||||
<meta name="ckeditor-sample-name" content="AutoGrow plugin">
|
||||
<meta name="ckeditor-sample-group" content="Plugins">
|
||||
<meta name="ckeditor-sample-description" content="Using the AutoGrow plugin in order to make the editor grow to fit the size of its content.">
|
||||
<meta name="description" content="Try the latest sample of CKEditor 4 and learn more about customizing your WYSIWYG editor with endless possibilities.">
|
||||
</head>
|
||||
<body>
|
||||
<h1 class="samples">
|
||||
<a href="../../../samples/old/index.html">CKEditor Samples</a> » Using AutoGrow Plugin
|
||||
</h1>
|
||||
<div class="warning deprecated">
|
||||
This sample is not maintained anymore. Check out its <a href="https://ckeditor.com/docs/ckeditor4/latest/examples/autogrow.html">brand new version in CKEditor Examples</a>.
|
||||
</div>
|
||||
<div class="description">
|
||||
<p>
|
||||
This sample shows how to configure CKEditor instances to use the
|
||||
<strong>AutoGrow</strong> (<code>autogrow</code>) plugin that lets the editor window expand
|
||||
and shrink depending on the amount and size of content entered in the editing area.
|
||||
</p>
|
||||
<p>
|
||||
In its default implementation the <strong>AutoGrow feature</strong> can expand the
|
||||
CKEditor window infinitely in order to avoid introducing scrollbars to the editing area.
|
||||
</p>
|
||||
<p>
|
||||
It is also possible to set a maximum height for the editor window. Once CKEditor
|
||||
editing area reaches the value in pixels specified in the
|
||||
<code><a class="samples" href="https://ckeditor.com/docs/ckeditor4/latest/api/CKEDITOR_config.html#cfg-autoGrow_maxHeight">autoGrow_maxHeight</a></code>
|
||||
configuration setting, scrollbars will be added and the editor window will no longer expand.
|
||||
</p>
|
||||
<p>
|
||||
To add a CKEditor instance using the <code>autogrow</code> plugin and its
|
||||
<code>autoGrow_maxHeight</code> attribute, insert the following JavaScript call to your code:
|
||||
</p>
|
||||
<pre class="samples">
|
||||
CKEDITOR.replace( '<em>textarea_id</em>', {
|
||||
<strong>extraPlugins: 'autogrow',</strong>
|
||||
autoGrow_maxHeight: 800,
|
||||
|
||||
// Remove the Resize plugin as it does not make sense to use it in conjunction with the AutoGrow plugin.
|
||||
removePlugins: 'resize'
|
||||
});</pre>
|
||||
<p>
|
||||
Note that <code><em>textarea_id</em></code> in the code above is the <code>id</code> attribute of
|
||||
the <code><textarea></code> element to be replaced with CKEditor. The maximum height should
|
||||
be given in pixels.
|
||||
</p>
|
||||
</div>
|
||||
<form action="../../../samples/sample_posteddata.php" method="post">
|
||||
<p>
|
||||
<label for="editor1">
|
||||
CKEditor using the <code>autogrow</code> plugin with its default configuration:
|
||||
</label>
|
||||
<textarea cols="80" id="editor1" name="editor1" rows="10"><p>This is some <strong>sample text</strong>. You are using <a href="https://ckeditor.com/">CKEditor</a>.</p></textarea>
|
||||
<script>
|
||||
|
||||
CKEDITOR.replace( 'editor1', {
|
||||
extraPlugins: 'autogrow',
|
||||
removePlugins: 'resize'
|
||||
});
|
||||
|
||||
</script>
|
||||
</p>
|
||||
<p>
|
||||
<label for="editor2">
|
||||
CKEditor using the <code>autogrow</code> plugin with maximum height set to 400 pixels:
|
||||
</label>
|
||||
<textarea cols="80" id="editor2" name="editor2" rows="10"><p>This is some <strong>sample text</strong>. You are using <a href="https://ckeditor.com/">CKEditor</a>.</p></textarea>
|
||||
<script>
|
||||
|
||||
CKEDITOR.replace( 'editor2', {
|
||||
extraPlugins: 'autogrow',
|
||||
autoGrow_maxHeight: 400,
|
||||
removePlugins: 'resize'
|
||||
});
|
||||
|
||||
</script>
|
||||
</p>
|
||||
<p>
|
||||
<input type="submit" value="Submit">
|
||||
</p>
|
||||
</form>
|
||||
<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-2020, <a class="samples" href="https://cksource.com/">CKSource</a> - Frederico
|
||||
Knabben. All rights reserved.
|
||||
</p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,115 @@
|
||||
<!DOCTYPE html>
|
||||
<!--
|
||||
Copyright (c) 2003-2020, CKSource - Frederico Knabben. All rights reserved.
|
||||
For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
|
||||
-->
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>BBCode Plugin — CKEditor Sample</title>
|
||||
<script src="../../../ckeditor.js"></script>
|
||||
<script src="../../../samples/old/sample.js"></script>
|
||||
<link rel="stylesheet" href="../../../samples/old/sample.css">
|
||||
<meta name="ckeditor-sample-required-plugins" content="sourcearea">
|
||||
<meta name="ckeditor-sample-name" content="Output for BBCode">
|
||||
<meta name="ckeditor-sample-group" content="Additional Plugins">
|
||||
<meta name="ckeditor-sample-description" content="Configuring CKEditor to produce BBCode tags instead of HTML.">
|
||||
<meta name="description" content="Try the latest sample of CKEditor 4 and learn more about customizing your WYSIWYG editor with endless possibilities.">
|
||||
</head>
|
||||
<body>
|
||||
<h1 class="samples">
|
||||
<a href="../../../samples/old/index.html">CKEditor Samples</a> » BBCode Plugin
|
||||
</h1>
|
||||
<div class="warning deprecated">
|
||||
This sample is not maintained anymore. Check out its <a href="https://ckeditor.com/docs/ckeditor4/latest/examples/bbcode.html">brand new version in CKEditor Examples</a>.
|
||||
</div>
|
||||
<div class="description">
|
||||
<p>
|
||||
This sample shows how to configure CKEditor to output <a href="http://en.wikipedia.org/wiki/BBCode">BBCode</a> format instead of HTML.
|
||||
Please note that the editor configuration was modified to reflect what is needed in a BBCode editing environment.
|
||||
Smiley images, for example, were stripped to the emoticons that are commonly used in some BBCode dialects.
|
||||
</p>
|
||||
<p>
|
||||
Please note that currently there is no standard for the BBCode markup language, so its implementation
|
||||
for different platforms (message boards, blogs etc.) can vary. This means that before using CKEditor to
|
||||
output BBCode you may need to adjust the implementation to your own environment.
|
||||
</p>
|
||||
<p>
|
||||
A snippet of the configuration code can be seen below; check the source of this page for
|
||||
a full definition:
|
||||
</p>
|
||||
<pre class="samples">
|
||||
CKEDITOR.replace( 'editor1', {
|
||||
<strong>extraPlugins: 'bbcode',</strong>
|
||||
toolbar: [
|
||||
[ 'Source', '-', 'Save', 'NewPage', '-', 'Undo', 'Redo' ],
|
||||
[ 'Find', 'Replace', '-', 'SelectAll', 'RemoveFormat' ],
|
||||
[ 'Link', 'Unlink', 'Image' ],
|
||||
'/',
|
||||
[ 'FontSize', 'Bold', 'Italic', 'Underline' ],
|
||||
[ 'NumberedList', 'BulletedList', '-', 'Blockquote' ],
|
||||
[ 'TextColor', '-', 'Smiley', 'SpecialChar', '-', 'Maximize' ]
|
||||
],
|
||||
... <i>some other configurations omitted here</i>
|
||||
}); </pre>
|
||||
</div>
|
||||
<form action="../../../samples/sample_posteddata.php" method="post">
|
||||
<p>
|
||||
<label for="editor1">
|
||||
Editor 1:
|
||||
</label>
|
||||
<textarea cols="80" id="editor1" name="editor1" rows="10">This is some [b]sample text[/b]. You are using [url=https://ckeditor.com/]CKEditor[/url].</textarea>
|
||||
<script>
|
||||
|
||||
// Replace the <textarea id="editor"> with an CKEditor
|
||||
// instance, using the "bbcode" plugin, shaping some of the
|
||||
// editor configuration to fit BBCode environment.
|
||||
CKEDITOR.replace( 'editor1', {
|
||||
extraPlugins: 'bbcode',
|
||||
// Remove unused plugins.
|
||||
removePlugins: 'bidi,dialogadvtab,div,filebrowser,flash,format,forms,horizontalrule,iframe,justify,liststyle,pagebreak,showborders,stylescombo,table,tabletools,templates',
|
||||
// Width and height are not supported in the BBCode format, so object resizing is disabled.
|
||||
disableObjectResizing: true,
|
||||
// Define font sizes in percent values.
|
||||
fontSize_sizes: "30/30%;50/50%;100/100%;120/120%;150/150%;200/200%;300/300%",
|
||||
toolbar: [
|
||||
[ 'Source', '-', 'Save', 'NewPage', '-', 'Undo', 'Redo' ],
|
||||
[ 'Find', 'Replace', '-', 'SelectAll', 'RemoveFormat' ],
|
||||
[ 'Link', 'Unlink', 'Image', 'Smiley', 'SpecialChar' ],
|
||||
'/',
|
||||
[ 'Bold', 'Italic', 'Underline' ],
|
||||
[ 'FontSize' ],
|
||||
[ 'TextColor' ],
|
||||
[ 'NumberedList', 'BulletedList', '-', 'Blockquote' ],
|
||||
[ 'Maximize' ]
|
||||
],
|
||||
// Strip CKEditor smileys to those commonly used in BBCode.
|
||||
smiley_images: [
|
||||
'regular_smile.png', 'sad_smile.png', 'wink_smile.png', 'teeth_smile.png', 'tongue_smile.png',
|
||||
'embarrassed_smile.png', 'omg_smile.png', 'whatchutalkingabout_smile.png', 'angel_smile.png',
|
||||
'shades_smile.png', 'cry_smile.png', 'kiss.png'
|
||||
],
|
||||
smiley_descriptions: [
|
||||
'smiley', 'sad', 'wink', 'laugh', 'cheeky', 'blush', 'surprise',
|
||||
'indecision', 'angel', 'cool', 'crying', 'kiss'
|
||||
]
|
||||
});
|
||||
|
||||
</script>
|
||||
</p>
|
||||
<p>
|
||||
<input type="submit" value="Submit">
|
||||
</p>
|
||||
</form>
|
||||
<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-2020, <a class="samples" href="https://cksource.com/">CKSource</a> - Frederico
|
||||
Knabben. All rights reserved.
|
||||
</p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,237 @@
|
||||
<!DOCTYPE html>
|
||||
<!--
|
||||
Copyright (c) 2003-2020, CKSource - Frederico Knabben. All rights reserved.
|
||||
For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
|
||||
-->
|
||||
<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="http://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="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://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 = [
|
||||
'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-2020, <a class="samples" href="https://cksource.com/">CKSource</a> - Frederico
|
||||
Knabben. All rights reserved.
|
||||
</p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,87 @@
|
||||
<!DOCTYPE html>
|
||||
<!--
|
||||
Copyright (c) 2003-2020, CKSource - Frederico Knabben. All rights reserved.
|
||||
For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
|
||||
-->
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Using DevTools Plugin — CKEditor Sample</title>
|
||||
<script src="../../../ckeditor.js"></script>
|
||||
<link rel="stylesheet" href="../../../samples/old/sample.css">
|
||||
<meta name="ckeditor-sample-name" content="Developer Tools plugin">
|
||||
<meta name="ckeditor-sample-group" content="Plugins">
|
||||
<meta name="ckeditor-sample-description" content="Using the Developer Tools plugin to display information about dialog window UI elements to allow for easier customization.">
|
||||
<meta name="description" content="Try the latest sample of CKEditor 4 and learn more about customizing your WYSIWYG editor with endless possibilities.">
|
||||
</head>
|
||||
<body>
|
||||
<h1 class="samples">
|
||||
<a href="../../../samples/old/index.html">CKEditor Samples</a> » Using the Developer Tools Plugin
|
||||
</h1>
|
||||
<div class="warning deprecated">
|
||||
This sample is not maintained anymore. Check out its <a href="https://ckeditor.com/docs/ckeditor4/latest/examples/devtools.html">brand new version in CKEditor Examples</a>.
|
||||
</div>
|
||||
<div class="description">
|
||||
<p>
|
||||
This sample shows how to configure CKEditor instances to use the
|
||||
<strong>Developer Tools</strong> (<code>devtools</code>) plugin that displays
|
||||
information about dialog window elements, including the name of the dialog window,
|
||||
tab, and UI element. Please note that the tooltip also contains a link to the
|
||||
<a href="https://ckeditor.com/docs/ckeditor4/latest/api/index.html">CKEditor JavaScript API</a>
|
||||
documentation for each of the selected elements.
|
||||
</p>
|
||||
<p>
|
||||
This plugin is aimed at developers who would like to customize their CKEditor
|
||||
instances and create their own plugins. By default it is turned off; it is
|
||||
usually useful to only turn it on in the development phase. Note that it works with
|
||||
all CKEditor dialog windows, including the ones that were created by custom plugins.
|
||||
</p>
|
||||
<p>
|
||||
To add a CKEditor instance using the <strong>devtools</strong> plugin, insert
|
||||
the following JavaScript call into your code:
|
||||
</p>
|
||||
<pre class="samples">
|
||||
CKEDITOR.replace( '<em>textarea_id</em>', {
|
||||
<strong>extraPlugins: 'devtools'</strong>
|
||||
});</pre>
|
||||
<p>
|
||||
Note that <code><em>textarea_id</em></code> in the code above is the <code>id</code> attribute of
|
||||
the <code><textarea></code> element to be replaced with CKEditor.
|
||||
</p>
|
||||
</div>
|
||||
<form action="../../../samples/sample_posteddata.php" method="post">
|
||||
<p>
|
||||
<label for="editor1">
|
||||
Editor 1:
|
||||
</label>
|
||||
<textarea cols="80" id="editor1" name="editor1" rows="10"><p>This is some <strong>sample text</strong>. You are using <a href="https://ckeditor.com/">CKEditor</a>.</p></textarea>
|
||||
<script>
|
||||
|
||||
// This call can be placed at any point after the
|
||||
// <textarea>, or inside a <head><script> in a
|
||||
// window.onload event handler.
|
||||
|
||||
// Replace the <textarea id="editor"> with an CKEditor
|
||||
// instance, using default configurations.
|
||||
CKEDITOR.replace( 'editor1', {
|
||||
extraPlugins: 'devtools'
|
||||
});
|
||||
|
||||
</script>
|
||||
</p>
|
||||
<p>
|
||||
<input type="submit" value="Submit">
|
||||
</p>
|
||||
</form>
|
||||
<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-2020, <a class="samples" href="https://cksource.com/">CKSource</a> - Frederico
|
||||
Knabben. All rights reserved.
|
||||
</p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@@ -0,0 +1,103 @@
|
||||
<!DOCTYPE html>
|
||||
<!--
|
||||
Copyright (c) 2003-2020, CKSource - Frederico Knabben. All rights reserved.
|
||||
For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
|
||||
-->
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CKEditor Easy Image Sample</title>
|
||||
<script src="../../../ckeditor.js"></script>
|
||||
<link rel="stylesheet" href="../../../samples/css/samples.css">
|
||||
<link rel="stylesheet" href="../../../samples/toolbarconfigurator/lib/codemirror/neo.css">
|
||||
<meta name="description" content="Try the latest sample of CKEditor 4 and learn more about customizing your WYSIWYG editor with endless possibilities.">
|
||||
</head>
|
||||
<body id="main">
|
||||
|
||||
<style>
|
||||
.adjoined-bottom:before {
|
||||
height: 270px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<nav class="navigation-a">
|
||||
<div class="grid-container">
|
||||
<ul class="navigation-a-left grid-width-70">
|
||||
<li><a href="https://ckeditor.com">Project Homepage</a></li>
|
||||
<li><a href="https://github.com/ckeditor/ckeditor4/issues">I found a bug</a></li>
|
||||
<li><a href="https://github.com/ckeditor/ckeditor4" class="icon-pos-right icon-navigation-a-github">Fork CKEditor on GitHub</a></li>
|
||||
</ul>
|
||||
<ul class="navigation-a-right grid-width-30">
|
||||
<li><a href="https://ckeditor.com/blog/">CKEditor Blog</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<header class="header-a">
|
||||
<div class="grid-container">
|
||||
<h1 class="header-a-logo grid-width-30">
|
||||
<img src="../../../samples/img/logo.svg" onerror="this.src='../../../samples/img/logo.png'; this.onerror=null;" alt="CKEditor Sample">
|
||||
</h1>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<div class="adjoined-top">
|
||||
<div class="grid-container">
|
||||
<div class="content grid-width-100">
|
||||
<h1>Easy Image Demo</h1>
|
||||
<p>This sample shows the progress of work on Easy Image. Drop an image file into the editor to see how easily images can be handled.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="adjoined-bottom">
|
||||
<div class="grid-container">
|
||||
<div class="grid-width-100">
|
||||
<div id="editor">
|
||||
<h1>Apollo 11</h1>
|
||||
<figure class="image easyimage">
|
||||
<img alt="Saturn V carrying Apollo 11" src="../../../samples/img/logo.png">
|
||||
</figure>
|
||||
<p><strong>Apollo 11</strong> was the spaceflight that landed the first humans, Americans <a href="http://en.wikipedia.org/wiki/Neil_Armstrong">Neil Armstrong</a> and <a href="http://en.wikipedia.org/wiki/Buzz_Aldrin">Buzz Aldrin</a>, on the Moon on July 20, 1969, at 20:18 UTC. Armstrong became the first to step onto the lunar surface 6 hours later on July 21 at 02:56 UTC.</p>
|
||||
<figure class="easyimage easyimage-side">
|
||||
<img alt="Saturn V carrying Apollo 11" src="../../image2/samples/assets/image1.jpg">
|
||||
<figcaption>Saturn V carrying Apollo 11</figcaption>
|
||||
</figure>
|
||||
<p>Armstrong spent about <s>three and a half</s> two and a half hours outside the spacecraft, Aldrin slightly less; and together they collected 47.5 pounds (21.5 kg) of lunar material for return to Earth. A third member of the mission, <a href="http://en.wikipedia.org/wiki/Michael_Collins_(astronaut)">Michael Collins</a>, piloted the <a href="http://en.wikipedia.org/wiki/Apollo_Command/Service_Module">command</a> spacecraft alone in lunar orbit until Armstrong and Aldrin returned to it for the trip back to Earth.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<footer class="footer-a grid-container">
|
||||
<div class="grid-container">
|
||||
<p class="grid-width-100">
|
||||
CKEditor – The text editor for the Internet – <a class="samples" href="https://ckeditor.com/">https://ckeditor.com</a>
|
||||
</p>
|
||||
<p class="grid-width-100" id="copy">
|
||||
Copyright © 2003-2020, <a class="samples" href="https://cksource.com/">CKSource</a> – Frederico Knabben. All rights reserved.
|
||||
</p>
|
||||
</div>
|
||||
</footer>
|
||||
<script>
|
||||
CKEDITOR.replace( 'editor', {
|
||||
plugins: 'easyimage,autogrow,sourcearea,toolbar,undo,wysiwygarea,list,liststyle,format,link,basicstyles,pastefromword',
|
||||
toolbar: [
|
||||
{ name: 'document', items: [ 'Source', 'Undo', 'Redo' ] },
|
||||
{ name: 'basicstyles', items: [ 'Bold', 'Italic', 'Strike', '-', 'RemoveFormat' ] },
|
||||
{ name: 'paragraph', items: [ 'NumberedList', 'BulletedList' ] },
|
||||
{ name: 'links', items: [ 'Link', 'Unlink', 'Anchor' ] },
|
||||
{ name: 'insert', items: [ 'EasyImageUpload' ] },
|
||||
{ name: 'styles', items: [ 'Format' ] }
|
||||
],
|
||||
cloudServices_uploadUrl: 'https://33333.cke-cs.com/easyimage/upload/',
|
||||
// Note: this is a token endpoint to be used for CKEditor 4 samples / developer tests only. Images uploaded using the testing token service may be deleted automatically at any moment.
|
||||
// To create your own token URL please visit https://ckeditor.com/ckeditor-cloud-services/.
|
||||
cloudServices_tokenUrl: 'https://33333.cke-cs.com/token/dev/ijrDsqFix838Gh3wGO3F77FSW94BwcLXprJ4APSp3XQ26xsUHTi0jcb1hoBt',
|
||||
height: 500
|
||||
} );
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,122 @@
|
||||
<!DOCTYPE html>
|
||||
<!--
|
||||
Copyright (c) 2003-2020, CKSource - Frederico Knabben. All rights reserved.
|
||||
For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
|
||||
-->
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Emoji plugin — CKEditor Sample</title>
|
||||
<script src="../../../ckeditor.js"></script>
|
||||
<link rel="stylesheet" href="../../../samples/css/samples.css">
|
||||
<meta name="description" content="Try the latest sample of CKEditor 4 and learn more about customizing your WYSIWYG editor with endless possibilities.">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<style>
|
||||
.adjoined-bottom:before {
|
||||
height: 270px;
|
||||
}
|
||||
.content ul.sample-data {
|
||||
margin: 0;
|
||||
}
|
||||
.content .sample-data p {
|
||||
font-size: 1rem;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<nav class="navigation-a">
|
||||
<div class="grid-container">
|
||||
<ul class="navigation-a-left grid-width-70">
|
||||
<li><a href="https://ckeditor.com">Project Homepage</a></li>
|
||||
<li><a href="https://github.com/ckeditor/ckeditor4/issues">I found a bug</a></li>
|
||||
<li><a href="https://github.com/ckeditor/ckeditor4" class="icon-pos-right icon-navigation-a-github">Fork CKEditor on GitHub</a></li>
|
||||
</ul>
|
||||
<ul class="navigation-a-right grid-width-30">
|
||||
<li><a href="https://ckeditor.com/blog/">CKEditor Blog</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<header class="header-a">
|
||||
<div class="grid-container">
|
||||
<h1 class="header-a-logo grid-width-30">
|
||||
<img src="../../../samples/img/logo.svg" onerror="this.src='../../../samples/img/logo.png'; this.onerror=null;" alt="CKEditor Sample">
|
||||
</h1>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<div class="adjoined-top">
|
||||
<div class="grid-container">
|
||||
<div class="content grid-width-100">
|
||||
<h1>Emoji plugin with dropdown menu</h1>
|
||||
<p>This sample shows the progress of work on Emoji. Type “ : ” and 2 letters to start inserting emoji.</p>
|
||||
<p>Some emoji to type in editor:</p>
|
||||
<ul class="sample-data">
|
||||
<li><p>:beaming_face_with_smiling_eyes:</p></li>
|
||||
<li><p>:skull:</p></li>
|
||||
<li><p>:tractor:</p></li>
|
||||
<li><p>:sparkles:</p></li>
|
||||
<li><p>:bug:</p></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="adjoined-bottom">
|
||||
<div class="grid-container">
|
||||
<div class="grid-width-100">
|
||||
<div id="editor">
|
||||
<h1>This is emoji sample.</h1>
|
||||
<p>Type <code>:</code> and 2 letters to show suggestion box with emoji.</p>
|
||||
<p>You can also select emoji icon in toolbar and select interesting emoji from drop down menu.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<footer class="footer-a grid-container">
|
||||
<div class="grid-container">
|
||||
<p class="grid-width-100">
|
||||
CKEditor – The text editor for the Internet – <a class="samples" href="https://ckeditor.com/">https://ckeditor.com</a>
|
||||
</p>
|
||||
<p class="grid-width-100" id="copy">
|
||||
Copyright © 2003-2020, <a class="samples" href="https://cksource.com/">CKSource</a> – Frederico Knabben. All rights reserved.
|
||||
</p>
|
||||
</div>
|
||||
</footer>
|
||||
<script>
|
||||
'use strict';
|
||||
|
||||
( function() {
|
||||
|
||||
var editor = CKEDITOR.replace( 'editor', {
|
||||
extraPlugins: 'emoji',
|
||||
toolbarGroups: [
|
||||
{ name: 'document', groups: [ 'mode', 'document', 'doctools' ] },
|
||||
{ name: 'clipboard', groups: [ 'clipboard', 'undo' ] },
|
||||
{ name: 'editing', groups: [ 'find', 'selection', 'spellchecker', 'editing' ] },
|
||||
{ name: 'forms', groups: [ 'forms' ] },
|
||||
{ name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ] },
|
||||
{ name: 'paragraph', groups: [ 'list', 'indent', 'blocks', 'align', 'bidi', 'paragraph' ] },
|
||||
{ name: 'links', groups: [ 'links' ] },
|
||||
{ name: 'colors', groups: [ 'colors' ] },
|
||||
'/',
|
||||
{ name: 'insert', groups: [ 'insert' ] },
|
||||
{ name: 'styles', groups: [ 'styles' ] },
|
||||
{ name: 'tools', groups: [ 'tools' ] },
|
||||
{ name: 'others', groups: [ 'others' ] },
|
||||
{ name: 'about', groups: [ 'about' ] }
|
||||
],
|
||||
|
||||
removeButtons: 'Save,Preview,Print,Templates,Cut,Copy,Paste,PasteText,PasteFromWord,Find,Replace,SelectAll,Scayt,Form,Checkbox,Radio,TextField,Textarea,Select,Button,ImageButton,HiddenField,Strike,Subscript,Superscript,CopyFormatting,RemoveFormat,Outdent,Indent,Blockquote,CreateDiv,JustifyLeft,JustifyCenter,JustifyRight,JustifyBlock,BidiLtr,BidiRtl,Language,Anchor,Flash,Image,Table,HorizontalRule,Smiley,SpecialChar,Iframe,PageBreak,Maximize,ShowBlocks,About'
|
||||
} );
|
||||
|
||||
} )();
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 32 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 26 KiB |
@@ -0,0 +1,69 @@
|
||||
<!DOCTYPE html>
|
||||
<!--
|
||||
Copyright (c) 2003-2020, CKSource - Frederico Knabben. All rights reserved.
|
||||
For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
|
||||
-->
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>New Image plugin — CKEditor Sample</title>
|
||||
<script src="../../../ckeditor.js"></script>
|
||||
<script>
|
||||
if ( CKEDITOR.env.ie && CKEDITOR.env.version < 9 )
|
||||
CKEDITOR.tools.enableHtml5Elements( document );
|
||||
</script>
|
||||
<link href="../../../samples/old/sample.css" rel="stylesheet">
|
||||
<meta name="ckeditor-sample-name" content="New Image plugin">
|
||||
<meta name="ckeditor-sample-group" content="Plugins">
|
||||
<meta name="ckeditor-sample-description" content="Using the new Image plugin to insert captioned images and adjust their dimensions.">
|
||||
<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.">
|
||||
</head>
|
||||
<body>
|
||||
<h1 class="samples">
|
||||
<a href="../../../samples/old/index.html">CKEditor Samples</a> » New Image plugin
|
||||
</h1>
|
||||
<div class="warning deprecated">
|
||||
This sample is not maintained anymore. Check out its <a href="https://ckeditor.com/docs/ckeditor4/latest/examples/image2.html">brand new version in CKEditor Examples</a>.
|
||||
</div>
|
||||
|
||||
<div class="description">
|
||||
<p>
|
||||
This editor is using the new <strong>Image</strong> (<code>image2</code>) plugin, which implements a dynamic <em>click-and-drag</em> resizing
|
||||
and easy captioning of the images.
|
||||
</p>
|
||||
<p>
|
||||
To use the new plugin, extend <code><a class="samples" href="https://ckeditor.com/docs/ckeditor4/latest/api/CKEDITOR_config.html#cfg-extraPlugins">config.extraPlugins</a></code>:
|
||||
</p>
|
||||
<pre class="samples">
|
||||
CKEDITOR.replace( '<em>textarea_id</em>', {
|
||||
<strong>extraPlugins: 'image2'</strong>
|
||||
} );
|
||||
</pre>
|
||||
</div>
|
||||
|
||||
<textarea id="editor1" cols="10" rows="10">
|
||||
<h1>Apollo 11</h1><figure class="image" style="float: right"><img alt="Saturn V" src="assets/image1.jpg" width="200" /><figcaption>Roll out of Saturn V on launch pad</figcaption></figure><p><strong>Apollo 11</strong> was the spaceflight that landed the first humans, Americans <a href="http://en.wikipedia.org/wiki/Neil_Armstrong" title="Neil Armstrong">Neil Armstrong</a> and <a href="http://en.wikipedia.org/wiki/Buzz_Aldrin" title="Buzz Aldrin">Buzz Aldrin</a>, on the Moon on July 20, 1969, at 20:18 UTC. Armstrong became the first to step onto the lunar surface 6 hours later on July 21 at 02:56 UTC.</p><p>Armstrong spent about <s>three and a half</s> two and a half hours outside the spacecraft, Aldrin slightly less; and together they collected 47.5 pounds (21.5&nbsp;kg) of lunar material for return to Earth. A third member of the mission, <a href="http://en.wikipedia.org/wiki/Michael_Collins_(astronaut)" title="Michael Collins (astronaut)">Michael Collins</a>, piloted the <a href="http://en.wikipedia.org/wiki/Apollo_Command/Service_Module" title="Apollo Command/Service Module">command</a> spacecraft alone in lunar orbit until Armstrong and Aldrin returned to it for the trip back to Earth.</p><h2>Broadcasting and <em>quotes</em> <a id="quotes" name="quotes"></a></h2><p>Broadcast on live TV to a world-wide audience, Armstrong stepped onto the lunar surface and described the event as:</p><blockquote><p>One small step for [a] man, one giant leap for mankind.</p></blockquote><p>Apollo 11 effectively ended the <a href="http://en.wikipedia.org/wiki/Space_Race" title="Space Race">Space Race</a> and fulfilled a national goal proposed in 1961 by the late U.S. President <a href="http://en.wikipedia.org/wiki/John_F._Kennedy" title="John F. Kennedy">John F. Kennedy</a> in a speech before the United States Congress:</p><blockquote><p>[...] before this decade is out, of landing a man on the Moon and returning him safely to the Earth.</p></blockquote><figure class="image" style="float: right"><img alt="The Eagle" src="assets/image2.jpg" style="width: 200px" /><figcaption>The Eagle in lunar orbit</figcaption></figure><h2>Technical details <a id="tech-details" name="tech-details"></a></h2><p>Launched by a <strong>Saturn V</strong> rocket from <a href="http://en.wikipedia.org/wiki/Kennedy_Space_Center" title="Kennedy Space Center">Kennedy Space Center</a> in Merritt Island, Florida on July 16, Apollo 11 was the fifth manned mission of <a href="http://en.wikipedia.org/wiki/NASA" title="NASA">NASA</a>&#39;s Apollo program. The Apollo spacecraft had three parts:</p><ol><li><strong>Command Module</strong> with a cabin for the three astronauts which was the only part which landed back on Earth</li><li><strong>Service Module</strong> which supported the Command Module with propulsion, electrical power, oxygen and water</li><li><strong>Lunar Module</strong> for landing on the Moon.</li></ol><p>After being sent to the Moon by the Saturn V&#39;s upper stage, the astronauts separated the spacecraft from it and travelled for three days until they entered into lunar orbit. Armstrong and Aldrin then moved into the Lunar Module and landed in the <a href="http://en.wikipedia.org/wiki/Mare_Tranquillitatis" title="Mare Tranquillitatis">Sea of Tranquility</a>. They stayed a total of about 21 and a half hours on the lunar surface. After lifting off in the upper part of the Lunar Module and rejoining Collins in the Command Module, they returned to Earth and landed in the <a href="http://en.wikipedia.org/wiki/Pacific_Ocean" title="Pacific Ocean">Pacific Ocean</a> on July 24.</p><hr /><p style="text-align:right"><small>Source: <a href="http://en.wikipedia.org/wiki/Apollo_11">Wikipedia.org</a></small></p>
|
||||
</textarea>
|
||||
|
||||
<script>
|
||||
|
||||
CKEDITOR.replace( 'editor1', {
|
||||
extraPlugins: 'image2',
|
||||
height: 450
|
||||
} );
|
||||
|
||||
</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-2020, <a class="samples" href="https://cksource.com/">CKSource</a> - Frederico
|
||||
Knabben. All rights reserved.
|
||||
</p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
+45
-3
@@ -1,4 +1,4 @@
|
||||
<!DOCTYPE html>
|
||||
<!DOCTYPE html>
|
||||
<!--
|
||||
Copyright (c) 2003-2020, CKSource - Frederico Knabben. All rights reserved.
|
||||
For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
|
||||
@@ -47,9 +47,48 @@ For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
|
||||
|
||||
<h2 class="samples">Plugins</h2>
|
||||
<dl class="samples">
|
||||
<dt><a class="samples" href="codesnippet/codesnippet.html">Code Snippet plugin</a> <span class="new">New!</span></dt>
|
||||
<dd>Try the latest sample of CKEditor 4 and learn more about customizing your WYSIWYG editor with endless possibilities.</dd>
|
||||
|
||||
<dt><a class="samples" href="image2/image2.html">New Image plugin</a> <span class="new">New!</span></dt>
|
||||
<dd>Try the latest sample of CKEditor 4 and learn more about customizing your WYSIWYG editor with endless possibilities.</dd>
|
||||
|
||||
<dt><a class="samples" href="mathjax/mathjax.html">Mathematics plugin</a> <span class="new">New!</span></dt>
|
||||
<dd>Try the latest sample of CKEditor 4 and learn more about customizing your WYSIWYG editor with endless possibilities.</dd>
|
||||
|
||||
<dt><a class="samples" href="sourcedialog/sourcedialog.html">Editing source code in a dialog</a> <span class="new">New!</span></dt>
|
||||
<dd>Try the latest sample of CKEditor 4 and learn more about customizing your WYSIWYG editor with endless possibilities.</dd>
|
||||
|
||||
<dt><a class="samples" href="autogrow/autogrow.html">AutoGrow plugin</a></dt>
|
||||
<dd>Try the latest sample of CKEditor 4 and learn more about customizing your WYSIWYG editor with endless possibilities.</dd>
|
||||
|
||||
<dt><a class="samples" href="bbcode/bbcode.html">Output for BBCode</a></dt>
|
||||
<dd>Try the latest sample of CKEditor 4 and learn more about customizing your WYSIWYG editor with endless possibilities.</dd>
|
||||
|
||||
<dt><a class="samples" href="devtools/devtools.html">Developer Tools plugin</a></dt>
|
||||
<dd>Try the latest sample of CKEditor 4 and learn more about customizing your WYSIWYG editor with endless possibilities.</dd>
|
||||
|
||||
<dt><a class="samples" href="docprops/docprops.html">Document Properties plugin</a></dt>
|
||||
<dd>Try the latest sample of CKEditor 4 and learn more about customizing your WYSIWYG editor with endless possibilities.</dd>
|
||||
|
||||
<dt><a class="samples" href="magicline/magicline.html">Magicline plugin</a></dt>
|
||||
<dd>Try the latest sample of CKEditor 4 and learn more about customizing your WYSIWYG editor with endless possibilities.</dd>
|
||||
|
||||
<dt><a class="samples" href="placeholder/placeholder.html">Placeholder plugin</a></dt>
|
||||
<dd>Try the latest sample of CKEditor 4 and learn more about customizing your WYSIWYG editor with endless possibilities.</dd>
|
||||
|
||||
<dt><a class="samples" href="sharedspace/sharedspace.html">Shared-Space plugin</a></dt>
|
||||
<dd>Try the latest sample of CKEditor 4 and learn more about customizing your WYSIWYG editor with endless possibilities.</dd>
|
||||
|
||||
<dt><a class="samples" href="stylesheetparser/stylesheetparser.html">Stylesheet Parser plugin</a></dt>
|
||||
<dd>Try the latest sample of CKEditor 4 and learn more about customizing your WYSIWYG editor with endless possibilities.</dd>
|
||||
|
||||
<dt><a class="samples" href="tableresize/tableresize.html">TableResize plugin</a></dt>
|
||||
<dd>Try the latest sample of CKEditor 4 and learn more about customizing your WYSIWYG editor with endless possibilities.</dd>
|
||||
|
||||
<dt><a class="samples" href="uicolor/uicolor.html">UIColor plugin</a></dt>
|
||||
<dd>Try the latest sample of CKEditor 4 and learn more about customizing your WYSIWYG editor with endless possibilities.</dd>
|
||||
|
||||
<dt><a class="samples" href="wysiwygarea/fullpage.html">Full page support</a></dt>
|
||||
<dd>Try the latest sample of CKEditor 4 and learn more about customizing your WYSIWYG editor with endless possibilities.</dd>
|
||||
</dl>
|
||||
@@ -104,13 +143,16 @@ For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
|
||||
<dt><a class="samples" href="dialog/dialog.html">Using the JavaScript API to customize dialog windows</a></dt>
|
||||
<dd>Try the latest sample of CKEditor 4 and learn more about customizing your WYSIWYG editor with endless possibilities.</dd>
|
||||
|
||||
<dt><a class="samples" href="divarea/divarea.html">Replace Textarea with a "DIV-based" editor</a></dt>
|
||||
<dd>Try the latest sample of CKEditor 4 and learn more about customizing your WYSIWYG editor with endless possibilities.</dd>
|
||||
|
||||
<dt><a class="samples" href="enterkey/enterkey.html">Using the "Enter" key in CKEditor</a></dt>
|
||||
<dd>Try the latest sample of CKEditor 4 and learn more about customizing your WYSIWYG editor with endless possibilities.</dd>
|
||||
|
||||
<dt><a class="samples" href="htmlwriter/outputforflash.html">Output for Flash</a></dt>
|
||||
<dt><a class="samples" href="htmlwriter/outputhtml.html">Output HTML</a></dt>
|
||||
<dd>Try the latest sample of CKEditor 4 and learn more about customizing your WYSIWYG editor with endless possibilities.</dd>
|
||||
|
||||
<dt><a class="samples" href="htmlwriter/outputhtml.html">Output HTML</a></dt>
|
||||
<dt><a class="samples" href="htmlwriter/outputforflash.html">Output for Flash</a></dt>
|
||||
<dd>Try the latest sample of CKEditor 4 and learn more about customizing your WYSIWYG editor with endless possibilities.</dd>
|
||||
|
||||
<dt><a class="samples" href="toolbar/toolbar.html">Toolbar Configurations</a></dt>
|
||||
|
||||
@@ -0,0 +1,39 @@
|
||||
<!DOCTYPE html>
|
||||
<!--
|
||||
Copyright (c) 2003-2020, CKSource - Frederico Knabben. All rights reserved.
|
||||
For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
|
||||
-->
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Mathematical Formulas — CKEditor Sample</title>
|
||||
<script src="../../../ckeditor.js"></script>
|
||||
<link href="../../../samples/old/sample.css" rel="stylesheet">
|
||||
<meta name="ckeditor-sample-name" content="Mathematics plugin">
|
||||
<meta name="ckeditor-sample-group" content="Plugins">
|
||||
<meta name="ckeditor-sample-description" content="Create mathematical equations in TeX and display them in visual form.">
|
||||
<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.">
|
||||
<script>
|
||||
CKEDITOR.disableAutoInline = true;
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<h1 class="samples">
|
||||
<a href="../../../samples/old/index.html">CKEditor Samples</a> » Mathematical Formulas
|
||||
</h1>
|
||||
<div class="warning deprecated">
|
||||
This sample is not maintained anymore. Check out its <a href="https://ckeditor.com/docs/ckeditor4/latest/examples/mathjax.html">brand new version in CKEditor Examples</a>.
|
||||
</div>
|
||||
<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-2020, <a class="samples" href="https://cksource.com/">CKSource</a> - Frederico
|
||||
Knabben. All rights reserved.
|
||||
</p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,147 @@
|
||||
<!DOCTYPE html>
|
||||
<!--
|
||||
Copyright (c) 2003-2020, CKSource - Frederico Knabben. All rights reserved.
|
||||
For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
|
||||
-->
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Mentions — CKEditor Sample</title>
|
||||
<script src="../../../ckeditor.js"></script>
|
||||
<link rel="stylesheet" href="../../../samples/css/samples.css">
|
||||
<meta name="description" content="Try the latest sample of CKEditor 4 and learn more about customizing your WYSIWYG editor with endless possibilities.">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<style>
|
||||
.adjoined-bottom:before {
|
||||
height: 270px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<nav class="navigation-a">
|
||||
<div class="grid-container">
|
||||
<ul class="navigation-a-left grid-width-70">
|
||||
<li><a href="https://ckeditor.com">Project Homepage</a></li>
|
||||
<li><a href="https://github.com/ckeditor/ckeditor4/issues">I found a bug</a></li>
|
||||
<li><a href="https://github.com/ckeditor/ckeditor4" class="icon-pos-right icon-navigation-a-github">Fork CKEditor on GitHub</a></li>
|
||||
</ul>
|
||||
<ul class="navigation-a-right grid-width-30">
|
||||
<li><a href="https://ckeditor.com/blog/">CKEditor Blog</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<header class="header-a">
|
||||
<div class="grid-container">
|
||||
<h1 class="header-a-logo grid-width-30">
|
||||
<img src="../../../samples/img/logo.svg" onerror="this.src='../../../samples/img/logo.png'; this.onerror=null;" alt="CKEditor Sample">
|
||||
</h1>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<div class="adjoined-top">
|
||||
<div class="grid-container">
|
||||
<div class="content grid-width-100">
|
||||
<h1>Mentions Demo</h1>
|
||||
<p>This sample shows Mentions feature in action. Type “ @ ” to open simple autocompletion with array feed, “ $ ” (min 1 character) to open asynchronous autocompletion with URL string feed or “ # ” (min 2 characters) to open asynchronous autocompletion with custom source of data.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="adjoined-bottom">
|
||||
<div class="grid-container">
|
||||
<div class="grid-width-100">
|
||||
<div id="editor">
|
||||
<h1>Mentions plugin</h1>
|
||||
<p>Feel free to mention @anna, @cris, @thomas or anyone else.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<footer class="footer-a grid-container">
|
||||
<div class="grid-container">
|
||||
<p class="grid-width-100">
|
||||
CKEditor – The text editor for the Internet – <a class="samples" href="https://ckeditor.com/">https://ckeditor.com</a>
|
||||
</p>
|
||||
<p class="grid-width-100" id="copy">
|
||||
Copyright © 2003-2020, <a class="samples" href="https://cksource.com/">CKSource</a> – Frederico Knabben. All rights reserved.
|
||||
</p>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script>
|
||||
'use strict';
|
||||
|
||||
( function() {
|
||||
|
||||
var data = [
|
||||
{ id: 1, name: 'john', fullName: 'John Doe' },
|
||||
{ id: 2, name: 'thomas', fullName: 'Thomas Doe' },
|
||||
{ id: 3, name: 'anna', fullName: 'Anna Doe' },
|
||||
{ id: 4, name: 'annabelle', fullName: 'Annabelle Doe' },
|
||||
{ id: 5, name: 'cris', fullName: 'Cris Doe' },
|
||||
{ id: 6, name: 'julia', fullName: 'Julia Doe' }
|
||||
];
|
||||
|
||||
CKEDITOR.replace( 'editor', {
|
||||
height: 240,
|
||||
extraPlugins: 'mentions,easyimage,sourcearea,toolbar,undo,wysiwygarea,basicstyles',
|
||||
extraAllowedContent: 'h1',
|
||||
toolbar: [
|
||||
{ name: 'document', items: [ 'Source', 'Undo', 'Redo' ] },
|
||||
{ name: 'basicstyles', items: [ 'Bold', 'Italic', 'Strike' ] },
|
||||
],
|
||||
mentions: [
|
||||
|
||||
{
|
||||
feed: CKEDITOR.tools.array.map( data, function( item ) {
|
||||
return item.name;
|
||||
} ),
|
||||
minChars: 0
|
||||
},
|
||||
{
|
||||
feed: '{encodedQuery}',
|
||||
marker: '$',
|
||||
minChars: 1,
|
||||
template: '<li data-id="{id}">{fullName}</li>'
|
||||
},
|
||||
{
|
||||
feed: dataCallback,
|
||||
marker: '#',
|
||||
template: '<li data-id="{id}">{name} ({fullName})</li>'
|
||||
}
|
||||
],
|
||||
on: {
|
||||
instanceReady: function() {
|
||||
// We have to stub ajax.load function.
|
||||
CKEDITOR.ajax.load = function( query, callback ) {
|
||||
var results = data.filter( function( item ) {
|
||||
return item.name.indexOf( query ) === 0;
|
||||
} );
|
||||
|
||||
setTimeout( function() {
|
||||
callback( JSON.stringify( results ) );
|
||||
}, Math.random() * 500 );
|
||||
}
|
||||
}
|
||||
}
|
||||
} );
|
||||
|
||||
function dataCallback( opts, callback ) {
|
||||
setTimeout( function() {
|
||||
callback(
|
||||
data.filter( function( item ) {
|
||||
return item.name.indexOf( opts.query ) === 0;
|
||||
} )
|
||||
);
|
||||
}, Math.random() * 500 );
|
||||
}
|
||||
|
||||
} )();
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,76 @@
|
||||
<!DOCTYPE html>
|
||||
<!--
|
||||
Copyright (c) 2003-2020, CKSource - Frederico Knabben. All rights reserved.
|
||||
For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
|
||||
-->
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Placeholder Plugin — CKEditor Sample</title>
|
||||
<script src="../../../ckeditor.js"></script>
|
||||
<script src="../../../samples/old/sample.js"></script>
|
||||
<link rel="stylesheet" href="../../../samples/old/sample.css">
|
||||
<meta name="ckeditor-sample-name" content="Placeholder plugin">
|
||||
<meta name="ckeditor-sample-group" content="Plugins">
|
||||
<meta name="ckeditor-sample-description" content="Using the Placeholder plugin to create uneditable sections that can only be created and modified with a proper dialog window.">
|
||||
<meta name="description" content="Try the latest sample of CKEditor 4 and learn more about customizing your WYSIWYG editor with endless possibilities.">
|
||||
</head>
|
||||
<body>
|
||||
<h1 class="samples">
|
||||
<a href="../../../samples/old/index.html">CKEditor Samples</a> » Using the Placeholder Plugin
|
||||
</h1>
|
||||
<div class="warning deprecated">
|
||||
This sample is not maintained anymore. Check out its <a href="https://ckeditor.com/docs/ckeditor4/latest/examples/placeholder.html">brand new version in CKEditor Examples</a>.
|
||||
</div>
|
||||
<div class="description">
|
||||
<p>
|
||||
This sample shows how to configure CKEditor instances to use the
|
||||
<strong>Placeholder</strong> plugin that lets you insert read-only elements
|
||||
into your content. To enter and modify read-only text, use the
|
||||
<strong>Create Placeholder</strong> <span class="button_icon" data-icon="placeholder"> </span> button and its matching dialog window.
|
||||
</p>
|
||||
<p>
|
||||
To add a CKEditor instance that uses the <code>placeholder</code> plugin and a related
|
||||
<strong>Create Placeholder</strong> <span class="button_icon" data-icon="placeholder"> </span> toolbar button, insert the following JavaScript
|
||||
call to your code:
|
||||
</p>
|
||||
<pre class="samples">
|
||||
CKEDITOR.replace( '<em>textarea_id</em>', {
|
||||
<strong>extraPlugins: 'placeholder',</strong>
|
||||
toolbar: [ [ 'Source', 'Bold' ], [<strong>'CreatePlaceholder'</strong>] ]
|
||||
});</pre>
|
||||
<p>
|
||||
Note that <code><em>textarea_id</em></code> in the code above is the <code>id</code> attribute of
|
||||
the <code><textarea></code> element to be replaced with CKEditor.
|
||||
</p>
|
||||
</div>
|
||||
<form action="../../../samples/sample_posteddata.php" method="post">
|
||||
<p>
|
||||
<label for="editor1">
|
||||
CKEditor using the <code>placeholder</code> plugin with its default configuration:
|
||||
</label>
|
||||
<textarea cols="80" id="editor1" name="editor1" rows="10"><p>This is a [[sample placeholder]]. You are using <a href="https://ckeditor.com/">CKEditor</a>. </p></textarea>
|
||||
<script>
|
||||
|
||||
CKEDITOR.replace( 'editor1', {
|
||||
extraPlugins: 'placeholder'
|
||||
});
|
||||
|
||||
</script>
|
||||
</p>
|
||||
<p>
|
||||
<input type="submit" value="Submit">
|
||||
</p>
|
||||
</form>
|
||||
<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-2020, <a class="samples" href="https://cksource.com/">CKSource</a> - Frederico
|
||||
Knabben. All rights reserved.
|
||||
</p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,123 @@
|
||||
<!DOCTYPE html>
|
||||
<!--
|
||||
Copyright (c) 2003-2020, CKSource - Frederico Knabben. All rights reserved.
|
||||
For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
|
||||
-->
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Shared-Space Plugin — CKEditor Sample</title>
|
||||
<script src="../../../ckeditor.js"></script>
|
||||
<link rel="stylesheet" href="../../../samples/old/sample.css">
|
||||
<meta name="ckeditor-sample-name" content="Shared-Space plugin">
|
||||
<meta name="ckeditor-sample-group" content="Plugins">
|
||||
<meta name="ckeditor-sample-description" content="Having the toolbar and the bottom bar spaces shared by different editor instances.">
|
||||
<meta name="description" content="Try the latest sample of CKEditor 4 and learn more about customizing your WYSIWYG editor with endless possibilities.">
|
||||
</head>
|
||||
<body>
|
||||
<h1 class="samples">
|
||||
<a href="../../../samples/old/index.html">CKEditor Samples</a> » Sharing Toolbar and Bottom-bar Spaces
|
||||
</h1>
|
||||
<div class="warning deprecated">
|
||||
This sample is not maintained anymore. Check out its <a href="https://ckeditor.com/docs/ckeditor4/latest/examples/sharedspace.html">brand new version in CKEditor Examples</a>.
|
||||
</div>
|
||||
<div class="description">
|
||||
<p>
|
||||
This sample shows several editor instances that share the very same spaces for both the toolbar and the bottom bar.
|
||||
</p>
|
||||
</div>
|
||||
<div id="top">
|
||||
<!-- This div will handle all toolbars -->
|
||||
</div>
|
||||
|
||||
<div style="height: 300px; overflow: auto; border: 1px solid #afafaf; padding: 20px; margin: 20px;">
|
||||
|
||||
<div id="framed1" style="width: 49%; float: left; margin-bottom: 20px;"></div>
|
||||
<div id="framed2" style="width: 49%; float: right; margin-bottom: 20px;"></div>
|
||||
|
||||
<hr style="clear: both; margin: 20px 0;">
|
||||
|
||||
<div contenteditable="true" id="inline1" style="width: 49%; float: left;">
|
||||
<h3>
|
||||
Integer condimentum sit amet
|
||||
</h3>
|
||||
<p>
|
||||
<strong>Aenean nonummy a, mattis varius. Cras aliquet.</strong>
|
||||
Praesent <a href="https://ckeditor.com/">magna non mattis ac, rhoncus nunc</a>, rhoncus eget, cursus pulvinar mollis.</p>
|
||||
<p>Proin id nibh. Sed eu libero posuere sed, lectus. Phasellus dui gravida gravida feugiat mattis ac, felis.</p>
|
||||
<p>Integer condimentum sit amet, tempor elit odio, a dolor non ante at sapien. Sed ac lectus. Nulla ligula quis eleifend mi, id leo velit pede cursus arcu id nulla ac lectus. Phasellus vestibulum. Nunc viverra enim quis diam.</p>
|
||||
</div>
|
||||
<div contenteditable="true" id="inline2" style="width: 49%; float: right;">
|
||||
<h3>
|
||||
Praesent wisi accumsan sit amet nibh
|
||||
</h3>
|
||||
<p>Donec ullamcorper, risus tortor, pretium porttitor. Morbi quam quis lectus non leo.</p>
|
||||
<p style="margin-left: 40px; ">Integer faucibus scelerisque. Proin faucibus at, aliquet vulputate, odio at eros. Fusce <a href="https://ckeditor.com/">gravida, erat vitae augue</a>. Fusce urna fringilla gravida.</p>
|
||||
<p>In hac habitasse platea dictumst. Praesent wisi accumsan sit amet nibh. Maecenas orci luctus a, lacinia quam sem, posuere commodo, odio condimentum tempor, pede semper risus. Suspendisse pede. In hac habitasse platea dictumst. Nam sed laoreet sit amet erat. Integer.</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div id="bottom">
|
||||
<!-- This div will handle all toolbars -->
|
||||
</div>
|
||||
|
||||
<script>
|
||||
|
||||
// Turn off automatic editor creation first.
|
||||
CKEDITOR.disableAutoInline = true;
|
||||
|
||||
CKEDITOR.inline( 'inline1', {
|
||||
extraPlugins: 'sharedspace',
|
||||
removePlugins: 'floatingspace,resize',
|
||||
sharedSpaces: {
|
||||
top: 'top',
|
||||
bottom: 'bottom'
|
||||
}
|
||||
});
|
||||
|
||||
CKEDITOR.inline( 'inline2', {
|
||||
extraPlugins: 'sharedspace',
|
||||
removePlugins: 'floatingspace,resize',
|
||||
sharedSpaces: {
|
||||
top: 'top',
|
||||
bottom: 'bottom'
|
||||
}
|
||||
});
|
||||
|
||||
CKEDITOR.appendTo( 'framed1', {
|
||||
extraPlugins: 'sharedspace',
|
||||
removePlugins: 'maximize,resize',
|
||||
sharedSpaces: {
|
||||
top: 'top',
|
||||
bottom: 'bottom'
|
||||
}
|
||||
},
|
||||
document.getElementById( 'inline1' ).innerHTML
|
||||
);
|
||||
|
||||
CKEDITOR.appendTo( 'framed2', {
|
||||
extraPlugins: 'sharedspace',
|
||||
removePlugins: 'maximize,resize',
|
||||
sharedSpaces: {
|
||||
top: 'top',
|
||||
bottom: 'bottom'
|
||||
}
|
||||
},
|
||||
document.getElementById( 'inline2' ).innerHTML
|
||||
);
|
||||
|
||||
</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-2020, <a class="samples" href="https://cksource.com/">CKSource</a> - Frederico
|
||||
Knabben. All rights reserved.
|
||||
</p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,122 @@
|
||||
<!DOCTYPE html>
|
||||
<!--
|
||||
Copyright (c) 2003-2020, CKSource - Frederico Knabben. All rights reserved.
|
||||
For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
|
||||
-->
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Editing source code in a dialog — CKEditor Sample</title>
|
||||
<script src="../../../ckeditor.js"></script>
|
||||
<link rel="stylesheet" href="../../../samples/old/sample.css">
|
||||
<meta name="ckeditor-sample-name" content="Editing source code in a dialog">
|
||||
<meta name="ckeditor-sample-group" content="Plugins">
|
||||
<meta name="ckeditor-sample-description" content="Editing HTML content of both inline and classic editor instances.">
|
||||
<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;
|
||||
float: left;
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h1 class="samples">
|
||||
<a href="../../../samples/old/index.html">CKEditor Samples</a> » Editing source code in a dialog
|
||||
</h1>
|
||||
<div class="warning deprecated">
|
||||
This sample is not maintained anymore. Check out its <a href="https://ckeditor.com/docs/ckeditor4/latest/examples/sourcearea.html">brand new version in CKEditor Examples</a>.
|
||||
</div>
|
||||
<div class="description">
|
||||
<p>
|
||||
<strong>Sourcedialog</strong> plugin provides an easy way to edit raw HTML content
|
||||
of an editor, similarly to what is possible with <strong>Sourcearea</strong>
|
||||
plugin for classic (<code>iframe</code>-based) instances but using dialogs. Thanks to that, it's also possible
|
||||
to manipulate raw content of inline editor instances.
|
||||
</p>
|
||||
<p>
|
||||
This plugin extends the toolbar with a button,
|
||||
which opens a dialog window with a source code editor. It works with both classic
|
||||
and inline instances. To enable this
|
||||
plugin, basically add <code>extraPlugins: 'sourcedialog'</code> to editor's
|
||||
config:
|
||||
</p>
|
||||
<pre class="samples">
|
||||
// Inline editor.
|
||||
CKEDITOR.inline( 'editable', {
|
||||
<strong>extraPlugins: 'sourcedialog'</strong>
|
||||
});
|
||||
|
||||
// Classic (iframe-based) editor.
|
||||
CKEDITOR.replace( 'textarea_id', {
|
||||
<strong>extraPlugins: 'sourcedialog'</strong>,
|
||||
removePlugins: 'sourcearea'
|
||||
});
|
||||
</pre>
|
||||
<p>
|
||||
Note that you may want to include <code>removePlugins: 'sourcearea'</code>
|
||||
in your config when using <strong>Sourcedialog</strong> in classic editor instances.
|
||||
This prevents feature redundancy.
|
||||
</p>
|
||||
<p>
|
||||
Note that <code>editable</code> in the code above is the <code>id</code>
|
||||
attribute of the <code><div></code> element to be converted into an inline instance.
|
||||
</p>
|
||||
<p>
|
||||
Note that <code><em>textarea_id</em></code> in the code above is the <code>id</code> attribute of
|
||||
the <code><textarea></code> element to be replaced with CKEditor.
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<label for="editor1">
|
||||
Inline editor:
|
||||
</label>
|
||||
<div id="editor1" contenteditable="true" style="padding: 5px 20px;">
|
||||
<p>This is some <strong>sample text</strong>. You are using <a href="https://ckeditor.com/">CKEditor</a>.</p>
|
||||
</div>
|
||||
</div>
|
||||
<br>
|
||||
<div>
|
||||
<label for="editor2">
|
||||
Classic editor:
|
||||
</label>
|
||||
<textarea cols="80" id="editor2" name="editor2" rows="10">
|
||||
This is some <strong>sample text</strong>. You are using <a href="https://ckeditor.com/">CKEditor</a>.
|
||||
</textarea>
|
||||
</div>
|
||||
<script>
|
||||
|
||||
// We need to turn off the automatic editor creation first.
|
||||
CKEDITOR.disableAutoInline = true;
|
||||
|
||||
var config = {
|
||||
toolbarGroups: [
|
||||
{ name: 'mode' },
|
||||
{ name: 'basicstyles' },
|
||||
{ name: 'links' }
|
||||
],
|
||||
extraPlugins: 'sourcedialog',
|
||||
removePlugins: 'sourcearea'
|
||||
}
|
||||
|
||||
CKEDITOR.inline( 'editor1', config );
|
||||
CKEDITOR.replace( 'editor2', config );
|
||||
|
||||
</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-2020, <a class="samples" href="https://cksource.com/">CKSource</a>
|
||||
- Frederico Knabben. All rights reserved.
|
||||
</p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
+70
@@ -0,0 +1,70 @@
|
||||
body
|
||||
{
|
||||
font-family: Arial, Verdana, sans-serif;
|
||||
font-size: 12px;
|
||||
color: #222;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
/* preserved spaces for rtl list item bullets. (#6249)*/
|
||||
ol,ul,dl
|
||||
{
|
||||
padding-right:40px;
|
||||
}
|
||||
|
||||
h1,h2,h3,h4
|
||||
{
|
||||
font-family: Georgia, Times, serif;
|
||||
}
|
||||
|
||||
h1.lightBlue
|
||||
{
|
||||
color: #00A6C7;
|
||||
font-size: 1.8em;
|
||||
font-weight:normal;
|
||||
}
|
||||
|
||||
h3.green
|
||||
{
|
||||
color: #739E39;
|
||||
font-weight:normal;
|
||||
}
|
||||
|
||||
span.markYellow { background-color: yellow; }
|
||||
span.markGreen { background-color: lime; }
|
||||
|
||||
img.left
|
||||
{
|
||||
padding: 5px;
|
||||
margin-right: 5px;
|
||||
float:left;
|
||||
border:2px solid #DDD;
|
||||
}
|
||||
|
||||
img.right
|
||||
{
|
||||
padding: 5px;
|
||||
margin-right: 5px;
|
||||
float:right;
|
||||
border:2px solid #DDD;
|
||||
}
|
||||
|
||||
a.green
|
||||
{
|
||||
color:#739E39;
|
||||
}
|
||||
|
||||
table.grey
|
||||
{
|
||||
background-color : #F5F5F5;
|
||||
}
|
||||
|
||||
table.grey th
|
||||
{
|
||||
background-color : #DDD;
|
||||
}
|
||||
|
||||
ul.square
|
||||
{
|
||||
list-style-type : square;
|
||||
}
|
||||
+86
@@ -0,0 +1,86 @@
|
||||
<!DOCTYPE html>
|
||||
<!--
|
||||
Copyright (c) 2003-2020, CKSource - Frederico Knabben. All rights reserved.
|
||||
For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
|
||||
-->
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Using Stylesheet Parser Plugin — CKEditor Sample</title>
|
||||
<script src="../../../ckeditor.js"></script>
|
||||
<script src="../../../samples/old/sample.js"></script>
|
||||
<link rel="stylesheet" href="../../../samples/old/sample.css">
|
||||
<meta name="ckeditor-sample-required-plugins" content="stylescombo">
|
||||
<meta name="ckeditor-sample-name" content="Stylesheet Parser plugin">
|
||||
<meta name="ckeditor-sample-description" content="Using the Stylesheet Parser plugin to fill the Styles drop-down list based on the CSS classes available in the document stylesheet.">
|
||||
<meta name="ckeditor-sample-group" content="Plugins">
|
||||
<meta name="description" content="Try the latest sample of CKEditor 4 and learn more about customizing your WYSIWYG editor with endless possibilities.">
|
||||
</head>
|
||||
<body>
|
||||
<h1 class="samples">
|
||||
<a href="../../../samples/old/index.html">CKEditor Samples</a> » Using the Stylesheet Parser Plugin
|
||||
</h1>
|
||||
<div class="warning deprecated">
|
||||
This sample is not maintained anymore. Check out its <a href="https://ckeditor.com/docs/ckeditor4/latest/examples/styles.html">brand new version in CKEditor Examples</a>.
|
||||
</div>
|
||||
<div class="description">
|
||||
<p>
|
||||
This sample shows how to configure CKEditor instances to use the
|
||||
<strong>Stylesheet Parser</strong> (<code>stylesheetparser</code>) plugin that fills
|
||||
the <strong>Styles</strong> drop-down list based on the CSS rules available in the document stylesheet.
|
||||
</p>
|
||||
<p>
|
||||
To add a CKEditor instance using the <code>stylesheetparser</code> plugin, insert
|
||||
the following JavaScript call into your code:
|
||||
</p>
|
||||
<pre class="samples">
|
||||
CKEDITOR.replace( '<em>textarea_id</em>', {
|
||||
<strong>extraPlugins: 'stylesheetparser'</strong>
|
||||
});</pre>
|
||||
<p>
|
||||
Note that <code><em>textarea_id</em></code> in the code above is the <code>id</code> attribute of
|
||||
the <code><textarea></code> element to be replaced with CKEditor.
|
||||
</p>
|
||||
</div>
|
||||
<form action="../../../samples/sample_posteddata.php" method="post">
|
||||
<p>
|
||||
<label for="editor1">
|
||||
CKEditor using the <code>stylesheetparser</code> plugin with its default configuration:
|
||||
</label>
|
||||
<textarea cols="80" id="editor1" name="editor1" rows="10"><p>This is some <strong>sample text</strong>. You are using <a href="https://ckeditor.com/">CKEditor</a>.</p></textarea>
|
||||
<script>
|
||||
|
||||
// This call can be placed at any point after the
|
||||
// <textarea>, or inside a <head><script> in a
|
||||
// window.onload event handler.
|
||||
|
||||
// Replace the <textarea id="editor"> with an CKEditor
|
||||
// instance, using default configurations.
|
||||
CKEDITOR.replace( 'editor1' , {
|
||||
extraPlugins: 'stylesheetparser',
|
||||
|
||||
// Stylesheet for the contents.
|
||||
contentsCss: 'assets/sample.css',
|
||||
|
||||
// Do not load the default Styles configuration.
|
||||
stylesSet: []
|
||||
});
|
||||
|
||||
</script>
|
||||
</p>
|
||||
<p>
|
||||
<input type="submit" value="Submit">
|
||||
</p>
|
||||
</form>
|
||||
<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-2020, <a class="samples" href="https://cksource.com/">CKSource</a> - Frederico
|
||||
Knabben. All rights reserved.
|
||||
</p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,108 @@
|
||||
<!DOCTYPE html>
|
||||
<!--
|
||||
Copyright (c) 2003-2020, CKSource - Frederico Knabben. All rights reserved.
|
||||
For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
|
||||
-->
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Using TableResize Plugin — CKEditor Sample</title>
|
||||
<script src="../../../ckeditor.js"></script>
|
||||
<link rel="stylesheet" href="../../../samples/old/sample.css">
|
||||
<meta name="ckeditor-sample-name" content="TableResize plugin">
|
||||
<meta name="ckeditor-sample-group" content="Plugins">
|
||||
<meta name="ckeditor-sample-description" content="Using the TableResize plugin to enable table column resizing.">
|
||||
<meta name="description" content="Try the latest sample of CKEditor 4 and learn more about customizing your WYSIWYG editor with endless possibilities.">
|
||||
</head>
|
||||
<body>
|
||||
<h1 class="samples">
|
||||
<a href="../../../samples/old/index.html">CKEditor Samples</a> » Using the TableResize Plugin
|
||||
</h1>
|
||||
<div class="warning deprecated">
|
||||
This sample is not maintained anymore. Check out its <a href="https://ckeditor.com/docs/ckeditor4/latest/examples/table.html">brand new version in CKEditor Examples</a>.
|
||||
</div>
|
||||
<div class="description">
|
||||
<p>
|
||||
This sample shows how to configure CKEditor instances to use the
|
||||
<strong>TableResize</strong> (<code>tableresize</code>) plugin that allows
|
||||
the user to edit table columns by using the mouse.
|
||||
</p>
|
||||
<p>
|
||||
The TableResize plugin makes it possible to modify table column width. Hover
|
||||
your mouse over the column border to see the cursor change to indicate that
|
||||
the column can be resized. Click and drag your mouse to set the desired width.
|
||||
</p>
|
||||
<p>
|
||||
By default the plugin is turned off. To add a CKEditor instance using the
|
||||
TableResize plugin, insert the following JavaScript call into your code:
|
||||
</p>
|
||||
<pre class="samples">
|
||||
CKEDITOR.replace( '<em>textarea_id</em>', {
|
||||
<strong>extraPlugins: 'tableresize'</strong>
|
||||
});</pre>
|
||||
<p>
|
||||
Note that <code><em>textarea_id</em></code> in the code above is the <code>id</code> attribute of
|
||||
the <code><textarea></code> element to be replaced with CKEditor.
|
||||
</p>
|
||||
</div>
|
||||
<form action="../../../samples/sample_posteddata.php" method="post">
|
||||
<p>
|
||||
<label for="editor1">
|
||||
CKEditor using the <code>tableresize</code> plugin:
|
||||
</label>
|
||||
<textarea cols="80" id="editor1" name="editor1" rows="10">
|
||||
<table style="width: 500px;" border="1">
|
||||
<caption>
|
||||
A sample table</caption>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>
|
||||
Column 1</td>
|
||||
<td>
|
||||
Column 2</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
You can resize a table column.</td>
|
||||
<td>
|
||||
Hover your mouse over its border.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
Watch the cursor change.</td>
|
||||
<td>
|
||||
Now click and drag to resize.</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</textarea>
|
||||
<script>
|
||||
|
||||
// This call can be placed at any point after the
|
||||
// <textarea>, or inside a <head><script> in a
|
||||
// window.onload event handler.
|
||||
|
||||
// Replace the <textarea id="editor"> with an CKEditor
|
||||
// instance, using default configurations.
|
||||
CKEDITOR.replace( 'editor1', {
|
||||
extraPlugins: 'tableresize'
|
||||
});
|
||||
|
||||
</script>
|
||||
</p>
|
||||
<p>
|
||||
<input type="submit" value="Submit">
|
||||
</p>
|
||||
</form>
|
||||
<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-2020, <a class="samples" href="https://cksource.com/">CKSource</a> - Frederico
|
||||
Knabben. All rights reserved.
|
||||
</p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,107 @@
|
||||
<!DOCTYPE html>
|
||||
<!--
|
||||
Copyright (c) 2003-2020, CKSource - Frederico Knabben. All rights reserved.
|
||||
For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
|
||||
-->
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>UI Color Picker — CKEditor Sample</title>
|
||||
<script src="../../../ckeditor.js"></script>
|
||||
<link rel="stylesheet" href="../../../samples/old/sample.css">
|
||||
<meta name="ckeditor-sample-name" content="UIColor plugin">
|
||||
<meta name="ckeditor-sample-group" content="Plugins">
|
||||
<meta name="ckeditor-sample-description" content="Using the UIColor plugin to pick up skin color.">
|
||||
<meta name="description" content="Try the latest sample of CKEditor 4 and learn more about customizing your WYSIWYG editor with endless possibilities.">
|
||||
</head>
|
||||
<body>
|
||||
<h1 class="samples">
|
||||
<a href="../../../samples/old/index.html">CKEditor Samples</a> » UI Color Plugin
|
||||
</h1>
|
||||
<div class="warning deprecated">
|
||||
This sample is not maintained anymore. Check out its <a href="https://ckeditor.com/docs/ckeditor4/latest/examples/uicolorpicker.html">brand new version in CKEditor Examples</a>.
|
||||
</div>
|
||||
<div class="description">
|
||||
<p>
|
||||
This sample shows how to use the UI Color picker toolbar button to preview the skin color of the editor.
|
||||
<strong>Note:</strong>The UI skin color feature depends on the CKEditor skin
|
||||
compatibility. The Moono and Kama skins are examples of skins that work with it.
|
||||
</p>
|
||||
</div>
|
||||
<form action="../../../samples/sample_posteddata.php" method="post">
|
||||
<div id="ui-color-plugin">
|
||||
<p>
|
||||
If the <strong>uicolor</strong> plugin along with the dedicated <strong>UIColor</strong>
|
||||
toolbar button is added to CKEditor, the user will also be able to pick the color of the
|
||||
UI from the color palette available in the <strong>UI Color Picker</strong> dialog window.
|
||||
</p>
|
||||
<p>
|
||||
To insert a CKEditor instance with the <strong>uicolor</strong> plugin enabled,
|
||||
use the following JavaScript call:
|
||||
</p>
|
||||
<pre class="samples">
|
||||
CKEDITOR.replace( '<em>textarea_id</em>', {
|
||||
<strong>extraPlugins: 'uicolor',</strong>
|
||||
toolbar: [ [ 'Bold', 'Italic' ], [ <strong>'UIColor'</strong> ] ]
|
||||
});</pre>
|
||||
<h2>Used in themed instance</h2>
|
||||
<p>
|
||||
Click the <strong>UI Color Picker</strong> toolbar button to open up a color picker dialog.
|
||||
</p>
|
||||
<p>
|
||||
<textarea cols="80" id="editor1" name="editor1" rows="10"><p>This is some <strong>sample text</strong>. You are using <a href="https://ckeditor.com/">CKEditor</a>.</p></textarea>
|
||||
<script>
|
||||
|
||||
// Replace the <textarea id="editor"> with an CKEditor
|
||||
// instance, using default configurations.
|
||||
CKEDITOR.replace( 'editor1', {
|
||||
extraPlugins: 'uicolor',
|
||||
toolbar: [
|
||||
[ 'Bold', 'Italic', '-', 'NumberedList', 'BulletedList', '-', 'Link', 'Unlink' ],
|
||||
[ 'FontSize', 'TextColor', 'BGColor' ],
|
||||
[ 'UIColor' ]
|
||||
]
|
||||
});
|
||||
|
||||
</script>
|
||||
</p>
|
||||
<h2>Used in inline instance</h2>
|
||||
<p>
|
||||
Click the below editable region to display floating toolbar, then click <strong>UI Color Picker</strong> button.
|
||||
</p>
|
||||
<div id="editor2" contenteditable="true">
|
||||
<p>This is some <strong>sample text</strong>. You are using <a data-cke-saved-href="https://ckeditor.com/" href="https://ckeditor.com/">CKEditor</a>.</p>
|
||||
</div>
|
||||
<script>
|
||||
|
||||
// Disable automatic creation of inline instances.
|
||||
CKEDITOR.disableAutoInline = true;
|
||||
|
||||
// Replace the <div id="editor3"> with an inline CKEditor instance.
|
||||
CKEDITOR.inline( 'editor2', {
|
||||
extraPlugins: 'uicolor',
|
||||
toolbar: [
|
||||
[ 'Bold', 'Italic', '-', 'NumberedList', 'BulletedList', '-', 'Link', 'Unlink' ],
|
||||
[ 'FontSize', 'TextColor', 'BGColor' ],
|
||||
[ 'UIColor' ]
|
||||
]
|
||||
});
|
||||
|
||||
</script>
|
||||
</div>
|
||||
<p>
|
||||
<input type="submit" value="Submit">
|
||||
</p>
|
||||
</form>
|
||||
<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-2020, <a class="samples" href="https://cksource.com/">CKSource</a> - Frederico
|
||||
Knabben. All rights reserved.
|
||||
</p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user