Skip to main content

Implementation of CKEDITOR with javascript

Implementation of CKEDITOR with javascript

Html Portition
           
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>CKEditor</title>
        <!-- Make sure the path to CKEditor is correct. -->
        <script src="../ckeditor.js"></script>
    </head>
    <body>
        <form>
            <textarea name="editor1" id="editor1" rows="10" cols="80">
                This is my textarea to be replaced with CKEditor.
            </textarea>
        </form>
    </body>
</html>


Script Portition
<script>
    $(function(){
        CKEDITOR.replace( 'editor1', { // Here editor1 is id of textarea
            filebrowserUploadUrl: "../ckupload.php" // Controller Action
        });
     CKEDITOR.dtd.a.div = 1;
    });
</script>

ckupload.php
// filebrowserUploadUrl handing

    $url = WWW_ROOT.'images'. DS .'uploads'. DS .time()."_".$_FILES['upload']['name'];
    $default_url = Router::url('/', true).'app/webroot/images/uploads/'.time()."_".$_FILES['upload']['name'];
    //extensive suitability check before doing anything with the file…
    if(($_FILES['upload'] == "none") OR (empty($_FILES['upload']['name'])))
    {
       $message = "No file uploaded.";
    }
    elseif($_FILES['upload']["size"] == 0)
    {
       $message = "The file is of zero length.";
    }
    elseif(($_FILES['upload']["type"] != "image/pjpeg") AND ($_FILES['upload']["type"] != "image/jpeg") AND ($_FILES['upload']["type"] != "image/png"))
    {
       $message = "The image must be in either JPG or PNG format. Please upload a JPG or PNG instead.";
    }
    elseif(!is_uploaded_file($_FILES['upload']["tmp_name"]))
    {
       $message = "You may be attempting to hack our server. We're on to you; expect a knock on the door sometime soon.";
    }
    else{
        $message = "";
        if(move_uploaded_file($_FILES['upload']['tmp_name'], $url)) {
            chmod($url, 0755);
        } else{
            $message = "Error moving uploaded file. Check the script is granted Read/Write/Modify permissions.";
        }
    }
    $funcNum = $_GET['CKEditorFuncNum'] ;
    echo "<script type='text/javascript'>window.parent.CKEDITOR.tools.callFunction($funcNum, '$default_url', '$message');</script>";

Comments

  1. Thank you for posting helpful information about Implementation of CKEDITOR with javascript for PHP Development

    ReplyDelete
    Replies
    1. Thanks @Prajapati , if you need any PHP development help, let me know.

      Delete

Post a Comment

Popular posts from this blog

6 guaranteed steps how to create CRON JOB FUNTION in wordpress

Create Cron Job function in Wordpress plugin Step 1: Register function on plugin activate  register_activation_hook(__FILE__, 'activate_one'); Step 2: add_filter function for interval //Filter for Adding multiple intervals add_filter( 'cron_schedules', 'intervals_schedule' ); // define interval function   function intervals_schedule($schedules) {   $schedules['everyminute'] = array(    'interval' => 60, // Every 1 minutes    'display'  => __( 'Every 1 minutes' )   );   return $schedules;  } Step 3: Activate hook function   //Schedule a first action if it's not already scheduled   function activate_one() {   if (!wp_next_scheduled('wpyog_cron_action')) {    wp_schedule_event( time(), 'everyminute', 'wpyog_cron_action');   }  } Step 4: Cron hook function   //Hook into that action that'll fire after 1 minutes   add_action('wpyog_cron_action', 'execute_

How to Create a jQuery Autocomplete in Wordpress

How to Create a jquery-ui Autocomplete in wordpress. Autocomplete provides suggestions while you type into the text field. In Wordpress we fetch dynamically matched pattern. Include javascript and css files in header. Create action inside functions.php or inside plugin code. add_action('wp_head', 'custom_register_scripts'); function custom_register_scripts(){ wp_register_style( 'techsudhir_jquery_ui_css', plugin_dir_url(__FILE__) . 'css/jquery-ui.css', false,'1.0.0' ); wp_enqueue_style( 'techsudhir_jquery_ui_css' ); wp_register_script('techsudhir_jquery_ui_js',plugin_dir_url(__FILE__) . 'js/jquery-ui.js',array('jquery'),'1.1', false); wp_enqueue_script('techsudhir_jquery_ui_js'); wp_localize_script( 'techsudhir_autocomplete', 'jqueryAutocomplete', array( 'ajaxurl' => admin_url( 'admin-ajax.php' ) ) ); wp_enqueue_script( 'techsudhir_

Facebook Login

Step 1: Go on Apps & create new Apps Step 2: Enter the app name & choose category Step 3: Enter the site domain Script code <div id="fb-root"></div> <script   src="http://connect.facebook.net/en_US/all.js#appId=<?php echo '603609636351597';?>"> </script> <script>    FB.init({              appId:'<?php echo '603609636351597';?>', cookie:true,              status:true, xfbml:true           });   FB.getLoginStatus(function(response) {   }); Login function call on click function faceLogin(){  FB.login(function(response) {    if (response.authResponse) {  FB.api('/me', function(response) { $('input[id=facebook_login_fb]').val(response['id']); $('#fb_login_form').submit();  });    } else {  console.log('User cancelled login or did