<html>\r
<head>\r
<meta charset="utf-8">\r
- <title>CKEditor Samples</title>\r
- <link rel="stylesheet" href="sample.css">\r
+ <title>CKEditor Sample</title>\r
+ <script src="../ckeditor.js"></script>\r
+ <script src="js/sample.js"></script>\r
+ <link rel="stylesheet" href="css/samples.css">\r
+ <link rel="stylesheet" href="toolbarconfigurator/lib/codemirror/neo.css">\r
</head>\r
-<body>\r
- <h1 class="samples">\r
- CKEditor Samples\r
- </h1>\r
- <div class="twoColumns">\r
- <div class="twoColumnsLeft">\r
- <h2 class="samples">\r
- Basic Samples\r
- </h2>\r
- <dl class="samples">\r
- <dt><a class="samples" href="replacebyclass.html">Replace textarea elements by class name</a></dt>\r
- <dd>Automatic replacement of all textarea elements of a given class with a CKEditor instance.</dd>\r
-\r
- <dt><a class="samples" href="replacebycode.html">Replace textarea elements by code</a></dt>\r
- <dd>Replacement of textarea elements with CKEditor instances by using a JavaScript call.</dd>\r
-\r
- <dt><a class="samples" href="jquery.html">Create editors with jQuery</a></dt>\r
- <dd>Creating standard and inline CKEditor instances with jQuery adapter.</dd>\r
- </dl>\r
-\r
- <h2 class="samples">\r
- Basic Customization\r
- </h2>\r
- <dl class="samples">\r
- <dt><a class="samples" href="uicolor.html">User Interface color</a></dt>\r
- <dd>Changing CKEditor User Interface color and adding a toolbar button that lets the user set the UI color.</dd>\r
-\r
- <dt><a class="samples" href="uilanguages.html">User Interface languages</a></dt>\r
- <dd>Changing CKEditor User Interface language and adding a drop-down list that lets the user choose the UI language.</dd>\r
- </dl>\r
-\r
-\r
- <h2 class="samples">Plugins</h2>
-<dl class="samples">
-<dt><a class="samples" href="plugins/magicline/magicline.html">Magicline plugin</a></dt>
-<dd>Using the Magicline plugin to access difficult focus spaces.</dd>
-
-<dt><a class="samples" href="plugins/wysiwygarea/fullpage.html">Full page support</a></dt>
-<dd>CKEditor inserted with a JavaScript call and used to edit the whole page from <html> to </html>.</dd>
-</dl>\r
+<body id="main">\r
+\r
+<nav class="navigation-a">\r
+ <div class="grid-container">\r
+ <ul class="navigation-a-left grid-width-70">\r
+ <li><a href="http://ckeditor.com">Project Homepage</a></li>\r
+ <li><a href="http://dev.ckeditor.com/">I found a bug</a></li>\r
+ <li><a href="http://github.com/ckeditor/ckeditor-dev" class="icon-pos-right icon-navigation-a-github">Fork CKEditor on GitHub</a></li>\r
+ </ul>\r
+ <ul class="navigation-a-right grid-width-30">\r
+ <li><a href="http://ckeditor.com/blog-list">CKEditor Blog</a></li>\r
+ </ul>\r
+ </div>\r
+</nav>\r
+\r
+<header class="header-a">\r
+ <div class="grid-container">\r
+ <h1 class="header-a-logo grid-width-30">\r
+ <a href="index.html"><img src="img/logo.png" alt="CKEditor Sample"></a>\r
+ </h1>\r
+\r
+ <nav class="navigation-b grid-width-70">\r
+ <ul>\r
+ <li><a href="index.html" class="button-a button-a-background">Start</a></li>\r
+ <li><a href="toolbarconfigurator/index.html" class="button-a">Toolbar configurator <span class="balloon-a balloon-a-nw">Edit your toolbar now!</span></a></li>\r
+ </ul>\r
+ </nav>\r
+ </div>\r
+</header>\r
+\r
+<main>\r
+ <div class="adjoined-top">\r
+ <div class="grid-container">\r
+ <div class="content grid-width-100">\r
+ <h1>Congratulations!</h1>\r
+ <p>\r
+ If you can see CKEditor below, it means that the installation succeeded.\r
+ You can now try out your new editor version, see its features, and when you are ready to move on, check some of the <a href="#sample-customize">most useful resources</a> recommended below.\r
+ </p>\r
+ </div>\r
</div>\r
- <div class="twoColumnsRight">\r
- <h2 class="samples">\r
- Inline Editing\r
- </h2>\r
- <dl class="samples">\r
- <dt><a class="samples" href="inlineall.html">Massive inline editor creation</a></dt>\r
- <dd>Turn all elements with <code>contentEditable = true</code> attribute into inline editors.</dd>\r
-\r
- <dt><a class="samples" href="inlinebycode.html">Convert element into an inline editor by code</a></dt>\r
- <dd>Conversion of DOM elements into inline CKEditor instances by using a JavaScript call.</dd>\r
-\r
- <dt><a class="samples" href="inlinetextarea.html">Replace textarea with inline editor</a> <span class="new">New!</span></dt>\r
- <dd>A form with a textarea that is replaced by an inline editor at runtime.</dd>\r
-\r
- \r
- </dl>\r
-\r
- <h2 class="samples">\r
- Advanced Samples\r
- </h2>\r
- <dl class="samples">\r
- <dt><a class="samples" href="datafiltering.html">Data filtering and features activation</a> <span class="new">New!</span></dt>\r
- <dd>Data filtering and automatic features activation basing on configuration.</dd>\r
-\r
- <dt><a class="samples" href="divreplace.html">Replace DIV elements on the fly</a></dt>\r
- <dd>Transforming a <code>div</code> element into an instance of CKEditor with a mouse click.</dd>\r
-\r
- <dt><a class="samples" href="appendto.html">Append editor instances</a></dt>\r
- <dd>Appending editor instances to existing DOM elements.</dd>\r
-\r
- <dt><a class="samples" href="ajax.html">Create and destroy editor instances for Ajax applications</a></dt>\r
- <dd>Creating and destroying CKEditor instances on the fly and saving the contents entered into the editor window.</dd>\r
-\r
- <dt><a class="samples" href="api.html">Basic usage of the API</a></dt>\r
- <dd>Using the CKEditor JavaScript API to interact with the editor at runtime.</dd>\r
-\r
- <dt><a class="samples" href="xhtmlstyle.html">XHTML-compliant style</a></dt>\r
- <dd>Configuring CKEditor to produce XHTML 1.1 compliant attributes and styles.</dd>\r
-\r
- <dt><a class="samples" href="readonly.html">Read-only mode</a></dt>\r
- <dd>Using the readOnly API to block introducing changes to the editor contents.</dd>\r
-\r
- <dt><a class="samples" href="tabindex.html">"Tab" key-based navigation</a></dt>\r
- <dd>Navigating among editor instances with tab key.</dd>\r
-\r
-\r
-
-<dt><a class="samples" href="plugins/dialog/dialog.html">Using the JavaScript API to customize dialog windows</a></dt>
-<dd>Using the dialog windows API to customize dialog windows without changing the original editor code.</dd>
-
-<dt><a class="samples" href="plugins/enterkey/enterkey.html">Using the "Enter" key in CKEditor</a></dt>
-<dd>Configuring the behavior of <em>Enter</em> and <em>Shift+Enter</em> keys.</dd>
-
-<dt><a class="samples" href="plugins/htmlwriter/outputforflash.html">Output for Flash</a></dt>
-<dd>Configuring CKEditor to produce HTML code that can be used with Adobe Flash.</dd>
-
-<dt><a class="samples" href="plugins/htmlwriter/outputhtml.html">Output HTML</a></dt>
-<dd>Configuring CKEditor to produce legacy HTML 4 code.</dd>
-
-<dt><a class="samples" href="plugins/toolbar/toolbar.html">Toolbar Configurations</a></dt>
-<dd>Configuring CKEditor to display full or custom toolbar layout.</dd>
+ </div>\r
+ <div class="adjoined-bottom">\r
+ <div class="grid-container">\r
+ <div class="grid-width-100">\r
+ <div id="editor">\r
+ <h1>Hello world!</h1>\r
+ <p>I'm an instance of <a href="http://ckeditor.com">CKEditor</a>.</p>\r
+ </div>\r
+ </div>\r
+ </div>\r
+ </div>\r
\r
- </dl>\r
+ <div class="grid-container">\r
+ <div class="content grid-width-100">\r
+ <section id="sample-customize">\r
+ <h2>Customize Your Editor</h2>\r
+ <p>Modular build and <a href="http://docs.ckeditor.com/#!/guide/dev_configuration">numerous configuration options</a> give you nearly endless possibilities to customize CKEditor. Replace the content of your <code><a href="../config.js">config.js</a></code> file with the following code and refresh this page (<strong>remember to clear the browser cache</strong>)!</p>\r
+ <pre class="cm-s-neo CodeMirror"><code><span style="padding-right: 0.1px;"><span class="cm-variable">CKEDITOR</span>.<span class="cm-property">editorConfig</span> <span class="cm-operator">=</span> <span class="cm-keyword">function</span>( <span class="cm-def">config</span> ) {</span>\r
+<span style="padding-right: 0.1px;"><span class="cm-tab"> </span><span class="cm-variable-2">config</span>.<span class="cm-property">language</span> <span class="cm-operator">=</span> <span class="cm-string">'es'</span>;</span>\r
+<span style="padding-right: 0.1px;"><span class="cm-tab"> </span><span class="cm-variable-2">config</span>.<span class="cm-property">uiColor</span> <span class="cm-operator">=</span> <span class="cm-string">'#F7B42C'</span>;</span>\r
+<span style="padding-right: 0.1px;"><span class="cm-tab"> </span><span class="cm-variable-2">config</span>.<span class="cm-property">height</span> <span class="cm-operator">=</span> <span class="cm-number">300</span>;</span>\r
+<span style="padding-right: 0.1px;"><span class="cm-tab"> </span><span class="cm-variable-2">config</span>.<span class="cm-property">toolbarCanCollapse</span> <span class="cm-operator">=</span> <span class="cm-atom">true</span>;</span>\r
+<span style="padding-right: 0.1px;">};</span></code></pre>\r
+ </section>\r
+\r
+ <section>\r
+ <h2>Toolbar Configuration</h2>\r
+ <p>If you want to reorder toolbar buttons or remove some of them, check <a href="toolbarconfigurator/index.html">this handy tool</a>!</p>\r
+ </section>\r
+\r
+ <section>\r
+ <h2>More Samples!</h2>\r
+ <p>Visit the <a href="http://sdk.ckeditor.com">CKEditor SDK</a> for a huge collection of samples showcasing editor features, with source code readily available to copy and use in your own implementation.</p>\r
+ </section>\r
+\r
+ <section>\r
+ <h2>Developer's Guide</h2>\r
+ <p>The most important resource for all developers working with CKEditor, integrating it with their websites and applications, and customizing to their needs. You can start from here:</p>\r
+ <ul>\r
+ <li><a href="http://docs.ckeditor.com/#!/guide/dev_installation">Getting Started</a> – Explains most crucial editor concepts and practices as well as the installation process and integration with your website.</li>\r
+ <li><a href="http://docs.ckeditor.com/#!/guide/dev_advanced_installation">Advanced Installation Concepts</a> – Describes how to upgrade, install additional components (plugins, skins), or create a custom build.</li>\r
+ </ul>\r
+ <p>When you have the basics sorted out, feel free to browse some more advanced sections like:</p>\r
+ <ul>\r
+ <li><a href="http://docs.ckeditor.com/#!/guide/dev_features">Functionality Overview</a> – Descriptions and samples of various editor features.</li>\r
+ <li><a href="http://docs.ckeditor.com/#!/guide/plugin_sdk_intro">Plugin SDK</a>, <a href="http://docs.ckeditor.com/#!/guide/widget_sdk_intro">Widget SDK</a>, and <a href="http://docs.ckeditor.com/#!/guide/skin_sdk_intro">Skin SDK</a> – Useful when you want to create your own editor components.</li>\r
+ </ul>\r
+ </section>\r
+\r
+ <section>\r
+ <h2>CKEditor JavaScript API</h2>\r
+ <p>CKEditor boasts a rich <a href="http://docs.ckeditor.com/#!/api">JavaScript API</a> that you can use to adjust the editor to your needs and integrate it with your website or application.</p>\r
+ </section>\r
</div>\r
</div>\r
- <div id="footer">\r
- <hr>\r
- <p>\r
- CKEditor - The text editor for the Internet - <a class="samples" href="http://ckeditor.com/">http://ckeditor.com</a>\r
+</main>\r
+\r
+<footer class="footer-a grid-container">\r
+ <div class="grid-container">\r
+ <p class="grid-width-100">\r
+ CKEditor – The text editor for the Internet – <a class="samples" href="http://ckeditor.com/">http://ckeditor.com</a>\r
</p>\r
- <p id="copy">\r
- Copyright © 2003-2015, <a class="samples" href="http://cksource.com/">CKSource</a> - Frederico Knabben. All rights reserved.\r
+ <p class="grid-width-100" id="copy">\r
+ Copyright © 2003-2015, <a class="samples" href="http://cksource.com/">CKSource</a> – Frederico Knabben. All rights reserved.\r
</p>\r
</div>\r
+</footer>\r
+<script>\r
+ initSample();\r
+</script>\r
+\r
</body>\r
</html>\r
Got questions, comments, patches, etc.? Contact Jason Woofenden