javascript – CKEditor打破我的其他js应用程序,如何加载我自己的js文件

这里有趣的转变.我整理了一个外部应用程序,它加载了网页,工作正常.但是,当我建立一个CKEDITOR的实例时,它会中断. Chrome会发出错误：

Uncaught TypeError: undefined is not a function

请注意,我的代码中的以下函数返回了未定义的错误：

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>

解决方法:

对我来说,看起来你的问题可能是由于使用PHP来注入你的内容ID.如果没有您的所有代码进行试验,我会继续看似您想要的……这似乎是“在您的表中,当点击启动内容编辑器链接时,已加载THOW ROW的内容进入编辑.“由于您的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");
    });
});

此外,您应该在调用replace之前设置CKEDITOR.on()调用,或者在注册instanceReady回调之前加载编辑器.

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