Question

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

未捕获的TypeError：undefined不是函数

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

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

对我来说，看起来您的问题可能是由于使用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/

Answer 2

好吧，经过几天的不眠之夜......几小时的谷歌搜索和大量的研究......我发现这是因为CHROME期待以下：

window.webkitURL.createObjectURL(blob);

而不是原来的：

URL.createObjectURL(blob);

CKEDITOR和我的客户应用程序现在都在和谐地工作...... * sighhh

CKEditor打破了我的其他js app，如何加载我自己的js文件

2 个答案: