使用javascript类的多个编辑器_Javascript_Php_Jquery_Ajax_Ckeditor

使用javascript类的多个编辑器

javascript php jquery ajax ckeditor

使用javascript类的多个编辑器,javascript,php,jquery,ajax,ckeditor,Javascript,Php,Jquery,Ajax,Ckeditor,我尝试使用CKEDITOR编辑我的网站内容。但是使用了很多CKEDITOR，我将所有javascript函数都放在一个类中，但不确定它是如何工作的。谁能帮我看看我需要换哪一部分有2个文件与我的问题相关： 1） php（使用Ckeditor更新网站内容的主页） 2） CmsAjaxClass.js（类包含Ajax和Ckeditor的所有操作） test.php <!DOCTYPE html> <html> <head> <titl

我尝试使用CKEDITOR编辑我的网站内容。但是使用了很多CKEDITOR，我将所有javascript函数都放在一个类中，但不确定它是如何工作的。谁能帮我看看我需要换哪一部分

有2个文件与我的问题相关：

1） php（使用Ckeditor更新网站内容的主页）

2） CmsAjaxClass.js（类包含Ajax和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>

<!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>

我不太明白你的问题

但这些行看起来仍然像是打字错误

        <script>
            var editor1 = new CmsAjaxClass("editor1") ;
            var editor1 = new CmsAjaxClass("editor2") ;
        </script>

我猜您想要

this.onFocus=function（）{

您可以在类中保留对编辑器的引用

this.editor = CKEDITOR.inline( editorName, {
    on: {
        blur: this.onBlur,
    }
});

这有助于

this.editor.on('blur', function(){});
this.editor.updateElement();

谢谢@sabithpocker和@DaniëlKnippers 最后，当触发“模糊”操作时，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>

<!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>

我从未见过您初始化CKEditor，即，

CKEditor.replace（“editor1”）

。我想您的文本字段仍然是常规文本字段？查看文档以获取帮助=>是的，现在仍然是常规文本字段。CKEDITOR.inline是内联CKEDITOR的初始化，但在此之前，我使一个文本字段的脚本工作正常。一旦我改为类，它就不再工作了。@Daniëlknippers根据此，

textarea

不被接受为内联编辑主机。您可以试试

.replace（）吗

取而代之的是？@DaniëlKnippers正如您在屏幕截图中看到的那样，内联编辑器现在正在工作。但是Ajax函数不起作用。是的，我知道这一点，但这不是主要问题。我想使用javascript类为不同的文本区域执行Ajax。我已经删除了onFocus。但是感谢您的帮助。onFocus（）对此。onFocus我更改了所有其他与打字错误相关的内容。请尝试将从

内联

返回的编辑器实例作为属性保留在类中。这可能会帮助您缩小问题范围。检查更新的答案我已更改了您告诉我的所有错误。javascript现在正在工作，但它从未更新我作为s输入的最新内容霍恩在截图中。

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!");
            }
        });
    }
}