diff options
Diffstat (limited to 'samples/old/inlineall.html')
| -rwxr-xr-x | samples/old/inlineall.html | 325 |
1 files changed, 325 insertions, 0 deletions
diff --git a/samples/old/inlineall.html b/samples/old/inlineall.html new file mode 100755 index 0000000..2685b43 --- /dev/null +++ b/samples/old/inlineall.html @@ -0,0 +1,325 @@ +<!DOCTYPE html> +<!-- +Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved. +For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license +--> +<html> + +<head> + <meta charset="utf-8"> + <title>Massive inline editing — CKEditor Sample</title> + <script src="../../ckeditor.js"></script> + <script> + + // This code is generally not necessary, but it is here to demonstrate + // how to customize specific editor instances on the fly. This fits well + // this demo because we have editable elements (like headers) that + // require less features. + + // The "instanceCreated" event is fired for every editor instance created. + CKEDITOR.on('instanceCreated', function (event) { + var editor = event.editor, + element = editor.element; + + // Customize editors for headers and tag list. + // These editors don't need features like smileys, templates, iframes etc. + if (element.is('h1', 'h2', 'h3') || element.getAttribute('id') == 'taglist') { + // Customize the editor configurations on "configLoaded" event, + // which is fired after the configuration file loading and + // execution. This makes it possible to change the + // configurations before the editor initialization takes place. + editor.on('configLoaded', function () { + + // Remove unnecessary plugins to make the editor simpler. + editor.config.removePlugins = 'colorbutton,find,flash,font,' + + 'forms,iframe,image,newpage,removeformat,' + + 'smiley,specialchar,stylescombo,templates'; + + // Rearrange the layout of the toolbar. + editor.config.toolbarGroups = [ + {name: 'editing', groups: ['basicstyles', 'links']}, + {name: 'undo'}, + {name: 'clipboard', groups: ['selection', 'clipboard']}, + {name: 'about'} + ]; + }); + } + }); + + </script> + <link href="sample.css" rel="stylesheet"> + <style> + /* The following styles are just to make the page look nice. */ + + /* Workaround to show Arial Black in Firefox. */ + @font-face { + font-family: 'arial-black'; + src: local('Arial Black'); + } + + *[contenteditable="true"] { + padding: 10px; + } + + #container { + width: 960px; + margin: 30px auto 0; + } + + #header { + overflow: hidden; + padding: 0 0 30px; + border-bottom: 5px solid #05B2D2; + position: relative; + } + + #headerLeft, + #headerRight { + width: 49%; + overflow: hidden; + } + + #headerLeft { + float: left; + padding: 10px 1px 1px; + } + + #headerLeft h2, + #headerLeft h3 { + text-align: right; + margin: 0; + overflow: hidden; + font-weight: normal; + } + + #headerLeft h2 { + font-family: "Arial Black", arial-black; + font-size: 4.6em; + line-height: 1.1; + text-transform: uppercase; + } + + #headerLeft h3 { + font-size: 2.3em; + line-height: 1.1; + margin: .2em 0 0; + color: #666; + } + + #headerRight { + float: right; + padding: 1px; + } + + #headerRight p { + line-height: 1.8; + text-align: justify; + margin: 0; + } + + #headerRight p+p { + margin-top: 20px; + } + + #headerRight>div { + padding: 20px; + margin: 0 0 0 30px; + font-size: 1.4em; + color: #666; + } + + #columns { + color: #333; + overflow: hidden; + padding: 20px 0; + } + + #columns>div { + float: left; + width: 33.3%; + } + + #columns #column1>div { + margin-left: 1px; + } + + #columns #column3>div { + margin-right: 1px; + } + + #columns>div>div { + margin: 0px 10px; + padding: 10px 20px; + } + + #columns blockquote { + margin-left: 15px; + } + + #tagLine { + border-top: 5px solid #05B2D2; + padding-top: 20px; + } + + #taglist { + display: inline-block; + margin-left: 20px; + font-weight: bold; + margin: 0 0 0 20px; + } + </style> +</head> + +<body> + <div> + <h1 class="samples"><a href="index.html">CKEditor Samples</a> » Massive inline editing</h1> + <div class="warning deprecated"> + This sample is not maintained anymore. Check out its <a + href="https://ckeditor.com/docs/ckeditor4/latest/examples/inline.html">brand new version in CKEditor + Examples</a>. + </div> + <div class="description"> + <p>This sample page demonstrates the inline editing feature - CKEditor instances will be created + automatically from page elements with <strong>contentEditable</strong> attribute set to value + <strong>true</strong>:</p> + <pre class="samples"><div <strong>contenteditable="true</strong>" > ... </div></pre> + <p>Click inside of any element below to start editing.</p> + </div> + </div> + <div id="container"> + <div id="header"> + <div id="headerLeft"> + <h2 id="sampleTitle" contenteditable="true"> + CKEditor<br> Goes Inline! + </h2> + <h3 contenteditable="true"> + Lorem ipsum dolor sit amet dolor duis blandit vestibulum faucibus a, tortor. + </h3> + </div> + <div id="headerRight"> + <div contenteditable="true"> + <p> + Lorem ipsum dolor sit amet enim. Etiam ullamcorper. Suspendisse a pellentesque dui, non felis. + Maecenas malesuada elit lectus felis, malesuada ultricies. + </p> + <p> + Curabitur et ligula. Ut molestie a, ultricies porta urna. Vestibulum commodo volutpat a, + convallis ac, laoreet enim. Phasellus fermentum in, dolor. Pellentesque facilisis. Nulla + imperdiet sit amet magna. Vestibulum dapibus, mauris nec malesuada fames ac. + </p> + </div> + </div> + </div> + <div id="columns"> + <div id="column1"> + <div contenteditable="true"> + <h3> + Fusce vitae porttitor + </h3> + <p> + <strong> + Lorem ipsum dolor sit amet dolor. Duis blandit vestibulum faucibus a, tortor. + </strong> + </p> + <p> + Proin nunc justo felis mollis tincidunt, risus risus pede, posuere cubilia Curae, Nullam + euismod, enim. Etiam nibh ultricies dolor ac dignissim erat volutpat. Vivamus fermentum <a + href="https://ckeditor.com/">nisl nulla sem in</a> metus. Maecenas wisi. Donec nec erat + volutpat. + </p> + <blockquote> + <p> + Fusce vitae porttitor a, euismod convallis nisl, blandit risus tortor, pretium. + Vehicula vitae, imperdiet vel, ornare enim vel sodales rutrum + </p> + </blockquote> + <blockquote> + <p> + Libero nunc, rhoncus ante ipsum non ipsum. Nunc eleifend pede turpis id sollicitudin + fringilla. Phasellus ultrices, velit ac arcu. + </p> + </blockquote> + <p>Pellentesque nunc. Donec suscipit erat. Pellentesque habitant morbi tristique ullamcorper.</p> + <p><s>Mauris mattis feugiat lectus nec mauris. Nullam vitae ante.</s></p> + </div> + </div> + <div id="column2"> + <div contenteditable="true"> + <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"> + <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="column3"> + <div contenteditable="true"> + <p> + <img src="assets/inlineall/logo.png" alt="CKEditor logo" style="float:left"> + </p> + <p>Quisque justo neque, mattis sed, fermentum ultrices <strong>posuere cubilia Curae</strong>, + Vestibulum elit metus, quis placerat ut, lectus. Ut sagittis, nunc libero, egestas consequat + lobortis velit rutrum ut, faucibus turpis. Fusce porttitor, nulla quis turpis. Nullam laoreet + vel, consectetuer tellus suscipit ultricies, hendrerit wisi. Donec odio nec velit ac nunc sit + amet, accumsan cursus aliquet. Vestibulum ante sit amet sagittis mi.</p> + <h3> + Nullam laoreet vel consectetuer tellus suscipit + </h3> + <ul> + <li>Ut sagittis, nunc libero, egestas consequat lobortis velit rutrum ut, faucibus turpis.</li> + <li>Fusce porttitor, nulla quis turpis. Nullam laoreet vel, consectetuer tellus suscipit + ultricies, hendrerit wisi.</li> + <li>Mauris eget tellus. Donec non felis. Nam eget dolor. Vestibulum enim. Donec.</li> + </ul> + <p>Quisque justo neque, mattis sed, <a href="https://ckeditor.com/">fermentum ultrices posuere + cubilia</a> Curae, Vestibulum elit metus, quis placerat ut, lectus.</p> + <p>Nullam laoreet vel, consectetuer tellus suscipit ultricies, hendrerit wisi. Ut sagittis, nunc + libero, egestas consequat lobortis velit rutrum ut, faucibus turpis. Fusce porttitor, nulla quis + turpis.</p> + <p>Donec odio nec velit ac nunc sit amet, accumsan cursus aliquet. Vestibulum ante sit amet sagittis + mi. Sed in nonummy faucibus turpis. Mauris eget tellus. Donec non felis. Nam eget dolor. + Vestibulum enim. Donec.</p> + </div> + </div> + </div> + <div id="tagLine"> + Tags of this article: + <p id="taglist" contenteditable="true"> + inline, editing, floating, CKEditor + </p> + </div> + </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-2019, <a class="samples" href="https://cksource.com/">CKSource</a> + - Frederico Knabben. All rights reserved. + </p> + </div> +</body> + +</html>
\ No newline at end of file |