Search code examples
javascriptyoutubeckeditorcdn

Can't use youtube plugin in CDN CKEditor

I want to add youtube plugin in CDN CKEditor, I follow the steps from the doc below

How do I set a plugin on CKEditor when is used from the CDN?

Before adding youtube plugins, textarea looks fine

enter image description here

But after adding youtube plugins, it shows nothing.

My code look like this: 

<script src="//cdn.ckeditor.com/4.7.3/full/ckeditor.js"></script>
....
....
<div class="form-group">
   <label class="control-label" for="article_content">Content：</label>
   <textarea class="form-control" type="text" name="article_content"></textarea>
</div>
....
....
....
 <script>
    CKEDITOR.plugins.addExternal( 'youtube', '../public/ckeditor/plugins/youtube/', 'plugin.js' );
    CKEDITOR.replace( 'article_content', {
       extraPlugins: 'youtube'
    });
 </script>

Hope someone can give me some advises to fix this problem,

Thanks

Solution

  • If you open a browser console, you'll find the following:

    Error: [CKEDITOR.resourceManager.load] Resource name "youtube" was not found at "https://cdn.ckeditor.com/4.7.3/full/../public/ckeditor/plugins/youtube/plugin.js?t=H8DA".

    It appears that with relative paths, CKEditor searches for the plugin inside the CDN. So, instead use absolute paths and CKEditor will search inside your web server, for example if public is inside web server root folder, use:

    CKEDITOR.plugins.addExternal( 'youtube', '/public/ckeditor/plugins/youtube/', 'plugin.js' );