How to display images in Froala Editor after ajax respond with a good link in Codeigniter?

Question

I'm using Codeigniter3 and Froala Editor for posting some content in my website and i'm also create an image upload when click on insert images in Froala Editor and after respond from Ajax as a link of images but it don't show in Froala Editor

Issue Images don't show in Froala editor But it has already upload to server(localhost).

Here is my Froala editor

<script>
    $(function () {
        $('#edit').editable({
            inlineMode: false,
            mediaManager: false,
            showInsertImage:true,
            imageUploadParam: 'up_img',
            setHTML:true,
            imageUploadURL: 'http://localhost/site/gotoadmin/image/edit_img',
              imageErrorCallback: function (data) { 
              if (data.errorCode == 1) {
                console.log ('bad link')
              }

              else if (data.errorCode == 2) {
                console.log ('bad response')
              }

              else if (data.errorCode == 3) {
                console.log ('upload error')
              }
          }
        })
    });
</script>

And This is a function in images controller using CI3 to upload images

public function edit_img() {

    $this->load->helper(array('form', 'url'));
    $config['upload_path'] = '../assets/img/editor';
    $config['image_library'] = 'gd2';
    $config['allowed_types'] = 'gif|jpg|png';
    $config['max_size'] = '1000000';
    $config['max_width'] = '102400';
    $config['max_height'] = '768000';
    $this->load->library('upload', $config);
    $token = $this->security->get_csrf_hash();

    $res = FALSE;
    if (!$this->upload->do_upload('up_img')) {
        $response = FALSE;
    } else {
        $data = $this->upload->data();
        $response = 'http://localhost/site/assets/img/editor/'.$data['file_name'];
    }
    echo stripslashes(json_encode($response));
}

Here is my respond data

"http://localhost/site/assets/img/editor/back.jpg" (This link is work when I copy past to browser I can see the images)

Thanks

Answer 1

The response should be a JSON. You response should be created differently:

$response = new StdClass;
$response->link = 'http://localhost/site/assets/img/editor/'.$data['file_name'];
echo stripslashes(json_encode($response));

There are more details about that on the Froala Editor Php Image Upload article.