HTML, Mobile, PHP, Tips & Trends, Tutorials, Web Development

CKeditor using javascript in HTML Pages

CKEditor is a rich web text editor, which can be used inside your HTML web pages. This HTML text editor allows many of the powerful editing functions found on desktop editors like Microsoft Word to your web. This is featured with many advantages like preparing your mail content, creating your blogs and so on. This post also explains you how to further modify or use your text editor in many ways, which may include show / hide buttons, control the buttons, etc,. CKeditor The tutorial contains three folders called ckeditor, js and css with PHP files. ckeditor —- ckeditor.js —- config.js // ckeditor configuration file ……. ……. jsjquery.min.js index.php ajaxPublish.php config.php blogPost.php blogClass.php Blog Table Blog table contains all the blog post details. CREATE TABLE blog( bid INT PRIMARY KEY AUTO_INCREMENT, title VARCHAR(300), body TEXT, created INT, statusCode ENUM('0','1','2') DEFAULT '1'); Enable PDO extension for PHP, find this in php.ini configuration file.


index.php Contains javascript code. $(“#publish”).click(function(){}- here publish is the ID name of the submit button. Using $(“#postTitle”).val() and editor.getData() calling subject and text area values. Always include CKEDITOR.replace(‘postBody’) after textarea tag.   [code lang=”js”] <script src="ckeditor/ckeditor.js"></script> <script src="js/jquery.min.js"></script> <script>// <![CDATA[ $(document).ready(function() { $("#publish").click(function(){ var postTitle = $("#postTitle").val(); var editorData = editor.getData(); var postBody=editorData.replace(/&nbsp;/gi,’ ‘); var dataString = ‘title=’+ postTitle +’&body=’+postBody; $.ajax({ type: "POST", url: "ajaxPublish.php", data: dataString, cache: false, beforeSend: function(){}, success: function(bid) { window.location.replace(‘blogPage.php?bid=’+bid); } }); return false; }); }) // ]]></script> [/code]