Rich Text Editor – CKEditor Simple Usage

August 25, 2017 5:29 pm by ATS Staff

Download CKEditor Library and use the following code to implement simple rich text editor with the following formatting capabilities:

– Bold
– Italic
– Underline
– Bullets
– Numbering

<!-- Include Library -->
<script src="ckeditor/ckeditor.js"></script>

<!-- Elements -->
<textarea name="text1" id="text1" ></textarea>
<input type="button" value=" Save " onclick="ckeditor_get_element_value('text1');" />

<script>
	// Instantiate CKEditor
	CKEDITOR.replace( "text1", {
		toolbarGroups: [
			{"name":"basicstyles","groups":["basicstyles"]},							
			{"name":"paragraph","groups":["list","blocks"]}
		],
		width:["1100px"],
		removePlugins: "elementspath",
		removeButtons: "Strike,Subscript,Superscript,Anchor,Styles,Specialchar,Blockquote,CreateDiv"
	});

	// Get Textarea Value
	function ckeditor_get_element_value(field_name) {
		return CKEDITOR.instances[field_name].getData();
	}
</script>