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

Question

这里发生了有趣的事件。我将一个外部应用程序放在一起，该应用程序可以正常加载网页。但是，当我建立 CKEDITOR 的实例时，它会中断。 Chrome 报错:

Uncaught TypeError: undefined is not a function

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

URL.createObjectURL();

无论如何，这就是我建立编辑器实例的方式。应该注意的是，如果我删除这段代码，我的 js 小程序可以正常工作。

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

在我看来，您的问题可能是由使用 php 注入(inject)您的内容 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 将它们注入(inject)脚本:

$(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 回调之前加载。

这是 fiddle :http://jsfiddle.net/ot6tkgdp/4/