4

Interesting turn of events here. I put together an external application which loads with the web page which works fine. HOWEVER, when I establish an instance of CKEDITOR it breaks. Chrome spits out an error:

Uncaught TypeError: undefined is not a function

Please note that the undefined error is coming back on the following function in my code:

URL.createObjectURL();

Anyway, here is how I am establishing an instance of the editor. It should be noted that if I remove this piece of code, my js applet works fine.

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 is what is causing the issue... removing this code allows everything 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 how I am including my external js file. This is what stops working when ckeditor is loaded:

</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>
17
  • I don't see jquery being included in the html snippet - are you adding jquery before or after that above javascript? (just eliminating the obvious) Sep 29, 2014 at 9:18
  • yes, it is added before the above javascript... Sep 29, 2014 at 12:20
  • Just checking :) In your HTML there is nothing with an id containing '-launch-editor-'. Could you show us the html that the js is trying to bind to, and the final/rendered js? Sep 29, 2014 at 13:03
  • added additional html :) Sep 29, 2014 at 13:15
  • 2
    What you see when you view the page source in your browser ... as opposed to the server-side code you've posted. What is '<?php echo $this->c_id; ?>-<?php echo $this->section_num; ?>-editor'?
    – PeterKA
    Oct 6, 2014 at 19:38

2 Answers 2

2

To me it looks like your issues may be caused by using php to inject your content ID's. Without all of your code to experiment on, I'm going on what it seems like you want... which seems to be that "within your table, when a launch-content-editor link is clicked on, THAT ROW's content is loaded into the editor." Since your PHP is already setting the ID values for each row, there's no need to include them in your javascript since you can retrieve them from the table row being clicked. You can save yourself some trouble with HTML5 data- fields on the row like this:

<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>

Then you can use those data fields in your JavaScript instead of having to have PHP inject them into your 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");
    });
});

Also, you should set your CKEDITOR.on() call before your call to replace, or the editor may be loaded before you register the instanceReady callback.

Here's the fiddle: http://jsfiddle.net/ot6tkgdp/4/

5
  • thanks but the problem I am having is that there is a conflict with my recording app and ckeditor... your code doesn't address that issue. when I load ckeditor, my recorder app does not work because there is a variable conflict (identified in my original question). Oct 7, 2014 at 14:40
  • 1
    You cleaned up your code the way I suggested and were still having the conflict? My point was that I think that the way you are including the php outputs in your javascript may be causing you troubles. Even if it doesn't solve your problem it will make it easier for you to debug. Also, my last point stands... your CKEDITOR.on() call should happen before you call CKEDITOR.replace(), or the event will not be registered in time to catch it when it fires. Also, where is the JS include for CKEDITOR? is it before or after your other scripts?
    – Steve K
    Oct 7, 2014 at 22:29
  • I agree on the CKEDITOR.on() call, I have since moved it. the CKEDITOR JS file is included before the other scripts.I have tried switching this around, but still getting errors. Oct 8, 2014 at 13:05
  • The only things I can think of without looking at your full code are: 1) that you could try replacing the event mapping from jQuery(document).on() to jQuery('table.editable').on() in case there's something weird happening with the event mapping. 2) Your HTML table starts with </table> - is that only in your post here, or is that actually in your code? 3) Are your recordermp3.js and RecordRTC.js files properly encapsulated (they should be wrapped in (function(){//my code here})() so that their declared variables are enclosed and not global.) If they're not, then there's a chance they'll clash.
    – Steve K
    Oct 8, 2014 at 22:22
  • sorry, im not understanding your first point? the other 2 i've checked and unfortunately have not changed the outcome. Oct 10, 2014 at 5:11
0

Well, after a few days of sleepless nights... hours of googling and tons of research.. I have found that it is becuase CHROME is expecting the following:

window.webkitURL.createObjectURL(blob);

instead of my original:

URL.createObjectURL(blob);

both CKEDITOR and my customer app are now working in harmony... *sighhh

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.