Multiple Ckeditor using javascript Class

debugcn Published at Dev

Eddy Goh

I try to use CKEDITOR to edit my website content. But there are a lot of CKEDITOR used, I put all the javascript functions in a Class, but not sure how it works. Anybody could help to see which part i need to change?

There are 2 files associated with my problems:

1) test.php (main page for update the content of website using Ckeditor)

2) CmsAjaxClass.js (Class contains all operation of Ajax and Ckeditor)

test.php

<!DOCTYPE html>
<html>
    <head>
        <title>A Simple Page with CKEditor</title>
        <!-- Make sure the path to CKEditor is correct. -->
        <script src="ckeditor/ckeditor.js"></script>
    </head>
    <script src="assets/js/jquery.js" type="text/javascript"></script> 
    <body>
        <div>
        </div>
        <form method="post" action="test2.php">
            <h1>Editor1</h1>
            <textarea name="editor1" id="editor1"><?php
                    include_once('php/get_cms.php');
                    echo get_cms(1);
                ?></textarea>
            _____________________________________<br/>
            <h1>Editor2</h1>
            <textarea name="editor2" id="editor2"><?php
                    include_once('php/get_cms.php');
                    echo get_cms(2);
                ?></textarea>
            <script src="assets/js/CmsAjaxClass.js"></script>
            <script>
                var editor1 = new CmsAjaxClass("editor1", document.getElementById("editor1").value) ;
                var editor2 = new CmsAjaxClass("editor2", document.getElementById("editor2").value) ;
            </script>
        </form>
    </body>
</html>

CmsAjaxClass.js

function CmsAjaxClass(editorName, seteditorData)
{
    //For nested Class usage
    var myClass = this;

    //Declare editorName to keep the editor name
    this.editorName = editorName;

    //Declare dataString to keep the data retrieve from editor
    this.seteditorData = seteditorData;

    //Function to update the CKEDITOR before it is parsed
    this.updateCkeditor = function() {
        for ( instance in CKEDITOR.instances )
        {
            CKEDITOR.instances[instance].updateElement();
        }
    }

    //Function to run the AJAX if the element is blured
    this.onBlur = function() {  
        //Update the Ckeditor data first before retrieve edited data
        myClass.updateCkeditor();

        //Retrieve edited data from HTML DOM
        myClass.seteditorData = seteditorData;

        //Call AJAX function to pass the value
        myClass.startAjax();
    }

    //Catch the focus and blur status of inline toolbar
    this.editor = CKEDITOR.inline( editorName, {
        on: {
            //focus: onFocus,
            blur: myClass.onBlur,
            }
    });

    //Declare which cms section we currently editing, parse the integer from the id of the textarea
    this.setcmsID = parseInt(editorName.replace("editor",""));

    //Create an AJAX function
    this.startAjax = function() {
        alert(this.seteditorData);
        $.ajax
        ({
            type: "POST",
            url: "test2.php",
            data: {editorData: this.seteditorData, cmsID: this.setcmsID},
            cache: false,
            beforeSend: function()
            {
                //Loading
            },
            success: function(result)
            {
                alert("Successfully updated!");
            }
        });
    }
}

enter image description here

Eddy Goh

Thanks @sabithpocker and @DaniëlKnippers Finally it works, the Ckeditor update database when "blur" action is triggered.

test.php

<!DOCTYPE html>
<html>
    <head>
        <title>A Simple Page with CKEditor</title>
        <!-- Make sure the path to CKEditor is correct. -->
        <script src="ckeditor/ckeditor.js"></script>
    </head>
    <script src="assets/js/jquery.js" type="text/javascript"></script> 
    <body>
        <div>
        </div>
        <form method="post" action="test2.php">
            <h1>Editor1</h1>
            <textarea name="editor1" id="editor1"><?php
                    include_once('php/get_cms.php');
                    echo get_cms(1);
                ?></textarea>
            _____________________________________<br/>
            <h1>Editor2</h1>
            <textarea name="editor2" id="editor2"><?php
                    include_once('php/get_cms.php');
                    echo get_cms(2);
                ?></textarea>
            <script src="assets/js/CmsAjaxClass.js"></script>
            <script>
                var editor1 = new CmsAjaxClass("editor1") ;
                var editor2 = new CmsAjaxClass("editor2") ;
            </script>
        </form>
    </body>
</html>

CmsAjaxClass.js

function CmsAjaxClass(editorName)
{
    //For nested Class usage
    var myClass = this;

    //Declare editorName to keep the editor name
    this.editorName = editorName;

    //Declare dataString to keep the data retrieve from editor
    this.seteditorData;

    //Function to update the CKEDITOR before it is parsed
    this.updateCkeditor = function() {
        for ( instance in CKEDITOR.instances )
        {
            CKEDITOR.instances[instance].updateElement();
        }
    }

    //Function to run the AJAX if the element is blured
    this.onBlur = function() {  
        //Update the Ckeditor data first before retrieve edited data
        myClass.updateCkeditor();

        //Retrieve edited data from HTML DOM
        myClass.seteditorData = document.getElementById(editorName).value;

        //Call AJAX function to pass the value
        myClass.startAjax();
    }

    //Catch the focus and blur status of inline toolbar
    this.editor = CKEDITOR.inline( editorName, {
        on: {
            //focus: onFocus,
            blur: myClass.onBlur,
            }
    });

    //Declare which cms section we currently editing, parse the integer from the id of the textarea
    this.setcmsID = parseInt(editorName.replace("editor",""));

    //Create an AJAX function
    this.startAjax = function() {
        alert(this.seteditorData);
        $.ajax
        ({
            type: "POST",
            url: "test2.php",
            data: {editorData: this.seteditorData, cmsID: this.setcmsID},
            cache: false,
            beforeSend: function()
            {
                //Loading
            },
            success: function(result)
            {
                alert("Successfully updated!");
            }
        });
    }
}

Collected from the Internet

Please contact [email protected] to delete if infringement.