CKEDITOR

by merganser

HTML

<script src="https://cdn.ckeditor.com/4.16.2/standard/ckeditor.js"></script>

				
        
        
        <textarea cols="80" id="editor1" name="editor1" rows="10" data-sample="1" data-sample-short>

				  

				</textarea>

JavaScript

CKEDITOR.replace( 'editor1', {
				// Make the editing area bigger than default.
				height: 1000,
				width: 760,

				// Allow pasting any content.
				allowedContent: true,

				// Fit toolbar buttons inside 3 rows.
				toolbarGroups: [
					{ name: 'document', groups: [ 'mode', 'document', 'doctools' ] },
					{ name: 'clipboard', groups: [ 'clipboard', 'undo' ] },
					{ name: 'editing', groups: [ 'find', 'selection', 'spellchecker', 'editing' ] },
					{ name: 'forms', groups: [ 'forms' ] },
					'/',
					{ name: 'paragraph', groups: [ 'list', 'indent', 'blocks', 'align', 'bidi', 'paragraph' ] },
					{ name: 'links', groups: [ 'links' ] },
					{ name: 'insert', groups: [ 'insert' ] },
					'/',
					{ name: 'styles', groups: [ 'styles' ] },
					{ name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ] },
					{ name: 'colors', groups: [ 'colors' ] },
					{ name: 'tools', groups: [ 'tools' ] },
					{ name: 'others', groups: [ 'others' ] },
					{ name: 'about', groups: [ 'about' ] }
				],

				// Remove buttons irrelevant for pasting from external sources.
				removeButtons: 'ExportPdf,Form,Checkbox,Radio,TextField,Select,Textarea,Button,ImageButton,HiddenField,NewPage,CreateDiv,Flash,Iframe,About,ShowBlocks,Maximize',

				// An array of stylesheets to style the WYSIWYG area.
				// Note: it is recommended to keep your own styles in a separate file in order to make future updates painless.
				contentsCss: [
					CKEDITOR.basePath + 'contents.css',
					'assets/css/pastefromword.css'
				],

				// This is optional, but will let us define multiple different styles for multiple editors using the same CSS file.
				bodyClass: 'document-editor'
			} );