Clash Royale CLAN TAG#URR8PPP

CKEditor TypeError: c[a] is undefined in CodeIgniter

Im trying to install CKEditor in my codeigniter based website and I have followed this tutorial: CKEditor in Codeigniter Tutorial

But Im receiving this error: TypeError: c[a] is undefined

TypeError: c[a] is undefined

CKEDITOR.lang.load/d() ckeditor___ckeditor:230
CKEDITOR.scriptLoader</<.load/f() ckeditor___ckeditor:231
CKEDITOR.scriptLoader</<.load/x() ckeditor___ckeditor:231
CKEDITOR.scriptLoader</<.load/A() ckeditor___ckeditor:231
CKEDITOR.scriptLoader</<.load/u/g.$.onerror()


The folder which ckeditor folder is in: assets/js/ ( which will be: assets/js/ckeditor/ )

The CKEDITOR_BASEPATH is CKEDITOR_BASEPATH = 'http://localhost:5678/assets/js/ckeditor/';

CKEDITOR_BASEPATH = 'http://localhost:5678/assets/js/ckeditor/';

I have no idea what this error is and I can't find properly answers or fix to it.

Thanks in advance.

4 Answers
4

Use ckeditor in codeigniter
You need
1.Ckeditor helper : ckeditor_helper.php file put on system/helpers folder
2.Ckeditor-pacakge : http://ckeditor.com/download put on root directory

Write bellow code in controller file ex.Page.php
-------------------------------------------------------------------------
class Page extends CI_Controller
public $data;
public function __construct()
parent::__construct();
$this->load->helper('ckeditor'); //load helper

//load html view
public function add()
$this->data['ckeditor'] = array(
'id' => 'format', //ID of the textarea that will be replaced 'path' => '../ckeditor/',
'config' => array(
'toolbar' => "Full", //Using the Full toolbar
'width' => "auto", //a custom width
'height' => "300px", //a custom height
),
);
//Loading add File
$this->load->view('page/add', $this->data);



load view file
---------------------------------------------------------------------
add.php
<?php
$form_data = array('class'=>'form-horizontal', 'role'=>'form','id' => 'pagefrm','name' => 'pagefrm','enctype'=>'multipart/form-data');
echo form_open('Page/Newpage',$form_data); ?>
<div class="form-group">
<label class="col-md-3 control-label" for="example-email">Page Format </label>
<div class="col-md-6">
<textarea class="form-control ckeditor" name="format" id="format" ></textarea>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-5 col-sm-12">
<button type="submit" class="btn btn-primary waves-effect waves-light"> Add </button>
</div>
</div>
<?php echo form_close();?>
write js to your view file->
<script src="<?php echo base_url();?>assets/js/jquery.min.js"></script>
<script src="<?php echo base_url();?>assets/js/jquery.validate.js"></script>
<script src="<?php echo base_url();?>ckeditor/ckeditor.js"></script> //manage your path

Here you also validate not allowed blank content not allowed using validate.js
--------------------------------------------------------------------

<script type="text/javascript">
$(document).ready(function ()

// When the browser is ready...
$(function ()

// form validation
$("#pagefrm").validate(
// Specify the validation rules
rules:
format:
required: function (textarea)
CKEDITOR.instances['format'].updateElement();
// update textarea
var editorcontent = textarea.value.replace(/<[^>]*>/gi, ''); // strip tags
return editorcontent.length === 0;


,
// Specify the validation error messages
messages:
format: "Please enter page format"
,
ignore: ,
submitHandler: function (form)
form.submit();

);

);
);
</script>


//ckeditor_helper.php
//put on system/helpers/
<?php
if(!defined('BASEPATH')) exit('No direct script access allowed');
function form_ckeditor($data)

$data['language'] = isset($data['language']) ? $data['language'] : 'es';

$size = isset($data['width']) ? 'width: "'.$data['width'].'", ' : '';
$size .= isset($data['height']) ? 'height: "'.$data['height'].'", ' : '';

$options = ''.
$size.
'language: "'.$data['language'].'",

stylesCombo_stylesSet: "my_styles",

startupOutlineBlocks: true,
entities: false,
entities_latin: false,
entities_greek: false,
forcePasteAsPlainText: false,

filebrowserImageUploadUrl : "filexplorers/fckeditor_upload/image", // << My own file uploader
filebrowserImageBrowseUrl : "filexplorers/inlinebrowse/image", // << My own file browser
filebrowserImageWindowWidth : "80%",
filebrowserImageWindowHeight : "80%",


toolbar :[
["Source","-","FitWindow","ShowBlocks","-","Preview"],
["Undo","Redo","-","Find","Replace","-","SelectAll","RemoveFormat"],
["Cut","Copy","Paste","PasteText","PasteWord","-","Print","SpellCheck"],
["Form","Checkbox","Radio","TextField","Textarea","Select","Button","ImageButton","HiddenField"],
["About"],

"/",

["Bold","Italic","Underline"],
["OrderedList","UnorderedList","-","Blockquote","CreateDiv"],

["Image","Flash","Table"],

["Link","Unlink","Anchor"],
["Rule","SpecialChar"],
["Styles"]
]
';


$my_styles = 'CKEDITOR.addStylesSet("my_styles",
[
// Block Styles
name : "H3", element : "h3",
name : "Heading 4", element : "h4",
name : "Heading 5", element : "h5",
name : "Heading 6", element : "h6",
name : "Document Block", element : "div",
name : "Preformatted Text", element : "pre",
name : "Address", element : "address",

// Inline Styles
name: "Centered paragraph", element: "p", attributes: "class": "center" ,

name: "IMG bordered", element: "img", attributes: "class": "bordered" ,

name: "IMG left", element: "img", attributes: "class": "left" ,
name: "IMG right", element: "img", attributes: "class": "right" ,

name: "IMG left bordered", element: "img", attributes: "class": "left bordered" ,
name: "IMGright bordered", element: "img", attributes: "class": "right bordered" ,
]);';

return
// fix: move to <HEAD...
'< script type="text/javascript" src="'.base_url().'application/plugins/ckeditor/ckeditor.js"></ script>' .

// put the CKEditor
'< script type="text/javascript">' .
$my_styles .
'CKEDITOR.replace("'.$data['id'].'", ' . $options . ');</ script>';



I had same issue. CKEditor isn't identifying properly its own folder.
So you should set a CKEDITOR_BASEPATH variable before loading CKEditor.

It's briefly said here: (but there might be other places where it's explained better.)
http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.html#.basePath

Therefore implementation will be like this:

<script>
window.CKEDITOR_BASEPATH = 'http://example.com/path/to/libs/ckeditor/';
</script>


In my case i used window.CKEDITOR_BASEPATH = '/app/storereport/ckeditor/';

window.CKEDITOR_BASEPATH = '/app/storereport/ckeditor/';

Then load the main ckeditor.js script.

<script type="application/javascript"/>
$(document).ready(function ()
CKEDITOR.replace( 'product_content' ); // ID of element
);
</script>


I have also used Ckeditor on my CI project. Don't use this long way use these simple steps -

Export your Ckeditor library in your path assets/js/ as you have already done this.

Include this on your html page -
<script type="text/javascript" src="/assets/js/ckeditor/ckeditor.js"></script> on the top of your page .

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

After the html include script having code as-

CKEDITOR.replace( 'content' );

/* content is the name of the textarea field on which ckeditor is to be applied*/

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.