CKEditor破坏了我的其他js应用程序，如何加载我自己的js文件

Question

这里发生了有趣的事情。我组装了一个外部应用程序，它加载了一个工作良好的网页。但是，当我建立一个CKEDITOR实例时，它会中断。Chrome吐出了一个错误：

未定义的TypeError:未定义不是函数

请注意，在我的代码中，未定义的错误将返回到以下函数：

URL.createObjectURL();

无论如何，下面是我如何建立一个编辑器实例。应该注意的是，如果我删除了这段代码，js applet就能正常工作。

jQuery(document).on("click", "#<?=$this->c_id;?>-launch-editor-<?php echo $this->section_num; ?>", 
    function(){
        //contentEditor.html("");
        contentEditor.hide();
        jQuery(".editor").append('
            <div class="content-top-container">
                <div class="name">
                    <div class="section-title">
                        Title: <?php echo $this->section_title; ?>
                    </div>
                    <img id="close-<?=$this->c_id;?><?php echo $this->section_num; ?>"
                         class="editor" src="../skins/blues/images/red-ex.png" 
                         title="Close" />
                </div>
            </div>
            <textarea class="editor-area" 
                      id="<?php echo $this->c_id; ?>-<?php echo $this->section_num; ?>-editor" 
                      name="<?php echo $this->section_num; ?>-editor">
                '+innerTextArea+'
            </textarea>
        ');

        contentEditor.fadeIn(1500);

        CKEDITOR.replace('
            <?php echo $this->c_id; ?>-<?php echo $this->section_num; ?>-editor', 
            {
                toolbar : 'Full',
                width : "1020px",
                codeSnippet_theme: 'monokai_sublime'
            });

            CKEDITOR.on( 'instanceReady', function( ev )
            {
                alert("CKEditor is loaded");
            });
        });

这段代码是导致问题的原因..。删除此代码允许其他一切正常工作：

CKEDITOR.replace('<?php echo $this->c_id; ?>-<?php echo $this->section_num; ?>-editor', 
{
    toolbar : 'Full',
    width : "1020px",
    codeSnippet_theme: 'monokai_sublime'
});

下面是我如何包括我的外部js文件。这就是加载ckeditor时停止工作的原因：

</table>
    <tr>
            <td style="width: 55px;"></td>
            <td style="width: 55px;"></td>
            <td><?php echo $this->section_title; ?></td>
            <td style="width: 125px; color: #0080ff;">
                <form>
                    <div class="launch-content-editor"
                        id="<?=$this->c_id;?>-launch-editor-<?=$sectionNumber;?>"
                        title="Launch Content Editor"><?php echo $contentStatus; ?></div>

                </form>
            </td>
            <td style="width: 125px; color: #0080ff;">
                <form>
                    <div class="launch-content-recorder"
                        id="<?=$this->c_id;?>-launch-recorder-<?=$sectionNumber;?>"
                        title="Launch Content Recorder"><?php echo $recordAudio; ?></div>
                </form>
            </td>
        </tr>
    </table>
<div class="content-editor">
<div class="editor"></div>
    <div class="content-bottom-container">              
        <section class="experiment">        
            <div class="inner" style="height: 5em;">        
                <audio id="audio" autoplay controls></audio>        
                <button class="recorder-btn" id="record-audio">Record</button>      
                <button class="recorder-btn" id="stop-recording-audio" disabled>Stop</button>       
                <h2 id="audio-url-preview"></h2>        
            </div>  
        </section>
    </div>
</div>
<script src="/skins/js/recordermp3.js"></script>
<script src="/skins/js/RecordRTC.js"></script>

Answer 1

经过几天的不眠之夜。数小时的搜索和大量的研究..。我发现这是因为CHROME预期如下：

window.webkitURL.createObjectURL(blob);

而不是我的原作：

URL.createObjectURL(blob);

CKEDITOR和我的客户应用程序现在都很和谐.*叹气

Answer 2

在我看来，您的问题可能是由于使用php注入内容ID而引起的。这似乎是“在您的表中，当单击启动内容编辑器链接时，该行的内容将加载到编辑器中。”因为PHP已经为每一行设置了ID值，所以不需要将它们包含在javascript中，因为您可以从单击的表行中检索它们。您可以为行中的HTML5数据字段省去一些麻烦，如下所示：

<td><?php echo $this->section_title; ?></td>
<td style="width: 125px; color: #0080ff;">
    <form>
        <div class="launch-content-editor" 
            data-cid="<?=$this->c_id;?>" 
            data-section-num="<?=$sectionNumber;?>"
            data-section-title="<?php echo $this->section_title; ?>"
            id="<?=$this->c_id;?>-launch-editor-<?=$sectionNumber;?>"
            title="Launch Content Editor"><?php echo $contentStatus; ?></div>
    </form>
</td>

然后，您可以在JavaScript中使用这些数据字段，而不必让PHP将它们注入脚本中：

$(document).on("click", ".launch-content-editor", function(e){
    var launcher = $(e.target);
    var sectionTitle = launcher.data('section-title');
    var cId = launcher.data('cid');
    var sectionNum = launcher.data('section-num');

    var editorTextAreaId = cId + '-' + sectionNum + '-editor';
    var innerTextArea = $('#' + cId + '-launch-editor-' + sectionNum).html();

    var newEditor = $('<div><div class="content-top-container"><div class="name"><div class="section-title">Title: ' + sectionTitle + '</div><img id="close-' + cId + sectionNum + '" class="editor" src="../skins/blues/images/red-ex.png" title="Close" /></div></div><textarea class="editor-area" id="' + editorTextAreaId + '" name="' + sectionNum + '-editor">' + innerTextArea + '</textarea></div>');

    $('.editor').append(newEditor);

    CKEDITOR.replace(editorTextAreaId, {
        toolbar : 'Full',
        width : "1020px",
        codeSnippet_theme: 'monokai_sublime'
    });
});

$(document).ready(function() {
    CKEDITOR.on( 'instanceReady', function( ev ){
        alert("CKEditor is loaded");
    });
});

另外，应该在调用替换之前设置CKEDITOR.on()调用，或者在注册instanceReady回调之前加载编辑器。

这是小提琴：http://jsfiddle.net/ot6tkgdp/4/