rich text editor

Text editors are very useful while using backend to add contents for a page. These text editors allow you to add css styling in your content directly and will be displayed on the frontend as we posted. You can find a lot of text editors online that are free such as TINYMCE, FCKEDITOR, NICEDIT, BXE, MARKITUP, etc.. You can download them or use them online too. Basically, each text editors have their own requirements you need to follow while integrating it to your backend. Here, you will learn about CKEDITOR, the one i use more often than not.

STEPS TO FOLLOW

» Add js script that comes with the ckeditor as shown below.

» <script type="text/javascript" src="../ckeditor/ckeditor.js"> </script>

» Add another script at the footer of your backend file as shown below that will allow you to add style to your texts.

» <script> CKEDITOR.replace('description',{}); </script>

» This makes all those textareas with name description replaced by CKEDITOR which makes your work much easier.

» Your textarea will be changed into a rich text editor as shown below.

» Your textarea will be changed into a rich text editor as shown below.

If you need to embed images too in your textarea contents then you need to add this script instead of the one stated above.

<script>

CKEDITOR.replace('description', { "filebrowserBrowseUrl": "ckfinder/ckfinder.html", "filebrowserImageBrowseUrl": "ckfinder/ckfinder.html?type=Images", "filebrowserFlashBrowseUrl": "ckfinder/ckfinder.html?type=Flash", "filebrowserUploadUrl": "ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Files", "filebrowserImageUploadUrl": "ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Images", "filebrowserFlashUploadUrl": "ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Flash" });

</script>

Finally, open config.php file present on your ckfinder directory and replace the baseUrl value with your project url as shown below. It'll help you store your images on the project itself rather than the root directory of your server.

$config['backends'][] = array(
    'name'         => 'default',
    'adapter'      => 'local',
    'baseUrl'      => 'https://your-project-url/ckfinder/userfiles/',
    //'root'         => dirname(__FILE__), // Can be used to explicitly set the CKFinder user files directory.
    'chmodFiles'   => 0777,
    'chmodFolders' => 0755,
    'filesystemEncoding' => 'UTF-8',
);

1 Like 1 Dislike 0 Comment Share Tweet