Geek Answers Handbook

CKEditor is breaking my other js application how to download my own js file

An interesting turn of events here. I put together an external application that loads from a web page that works great. HOWEVER, when I install an instance of CKEDITOR, it breaks. Chrome throws an error:

Uncaught TypeError: undefined is not a function

Note that the undefined error returns to the following function in my code:

URL.createObjectURL();

Anyway, this is how I install the editor instance. It should be noted that if I delete this piece of code, my js applet works great.

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

This piece of code causes the problem ... deleting this code allows everyone else to work fine:

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

Below is an example of how I include my external js file. This is what stops working when loading 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>
+4
2

, ... Google . , , :

window.webkitURL.createObjectURL(blob);

:

URL.createObjectURL(blob);

CKEDITOR, - ... * sighhh

0

, PHP . , ... , " , , THAT 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 script:

$(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() , .

: http://jsfiddle.net/ot6tkgdp/4/

+2

More articles:


All Articles