CKEditor in CodeIgniter

Viewed 51515

I wanna load CKEditor in CodeIgniter,I search a lot,but can't understand their way.

I placed ckeditor in application/plugins folder and now I wanna make editor ,so I do following in Controller Method.

include APPPATH.'plugins/ckeditor/ckeditor.php';
$CKEditor = new CKEditor();
$CKEditor->basePath = '/'.APPPATH.'plugins/ckeditor/';
$initialValue = '<p>This is some <strong>sample text</strong>.</p>';
echo $CKEditor->editor("editor1", $initialValue);

but it makes simple teaxaria only ,with

This is some sample text.

value. where is the problem and how should I solve it?

7 Answers
  1. Download CKEditor package from https://ckeditor.com/ckeditor-4/download/
  2. Unzip folder in your Codeigniter project folder at your preferred location.
  3. Include the <script> element loading CKEditor in your page.
  4. Use the CKEDITOR.replace() method to replace the existing <textarea> element with CKEditor.

See the following example:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>A Simple Page with 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>
            <script>
                // Replace the <textarea id="editor1"> with a CKEditor
                // instance, using default configuration.
                CKEDITOR.replace( 'editor1' );
            </script>
        </form>
    </body>
</html>

I think the simplest way to use Ckeditor is through CDN, Use this in your view file and

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CKEditor</title>
<script src="https://cdn.ckeditor.com/ckeditor5/18.0.0/classic/ckeditor.js"></script>
</head>
<body>
<textarea name="editor" id="editor" rows="10" cols="80" placeholder="Insert text here" class="form-control"></textarea>
<script>
ClassicEditor
.create( document.querySelector( '#editor' ) )
.then( editor => {
console.log( editor );
} )
.catch( error => {
console.error( error );
} );
</script>
</body>
</html>

for more information and styling of ckeditor and use of different styles of ckeditor you can visit the https://cdn.ckeditor.com/#ckeditor5

If you are looking for Document editor of Ckeditor then follow the below link https://ckeditor.com/docs/ckeditor5/latest/builds/guides/quick-start.html#document-editor

use the example and you will be able to insert the document editor in your view file

Related