galetahub / ckeditor

Ckeditor 4.x integration gem for rails
https://ckeditor.com/ckeditor-4/
MIT License
2.23k stars 878 forks source link

Icon is not displayed when using additional plugins on CDN. #895

Closed sin-to-jin closed 4 years ago

sin-to-jin commented 4 years ago

ENV

For example, use the plugin at this link (https://ckeditor.com/cke4/addon/youtube).

<!-- applition.html.erb -->
<head>
  <%= javascript_include_tag Ckeditor.cdn_url %>
  <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
</head>
<body>
  <%= form url: 'hogehoge', local: true, multipart: true do |f| %>
    <%= f.cktext_area :ck_sample_text %>
  <% end %>
</body>
// application.js
//= require_tree ./ckeditor

Current directory structure

├── app
│   ├── assets
│   │   ├── javascripts
│   │   │   ├── application.js
│   │   │   ├── ckeditor
│   │   │   │   ├── config.js
│   │   │   │   ├── plugins
│   │   │   │   │   └── youtube
│   │   │   │   │       ├── images
│   │   │   │   │       │   ├── icon-hdpi.png
│   │   │   │   │       │   └── icon.png
│   │   │   │   │       ├── lang
│   │   │   │   │       │   └── en.js
│   │   │   │   │       └── plugin.js

The following error occurs when accessing the browser

ckeditor.js:101 GET http://cdn.ckeditor.com/4.11.3/standard/plugins/youtube/images/icon.png?t=J1QB 404 (Not Found)

CKEDitor is displayed normally and there is no problem in behavior, but the image of the added plug-in gives a 404 error. I can hack the plugin I added and display the image, but I would like to know if there is a standard way.

To put it another way, I put an image that was not displayed in the image directory under Rails assets, and changed the loading path of the image on the plugin side to the image under the image directory under Rails assets.

Placement of images

// before
├── app
│   ├── assets
│   │   ├── javascripts
│   │   │   ├── application.js
│   │   │   ├── ckeditor
│   │   │   │   ├── plugins
│   │   │   │   │   └── youtube
│   │   │   │   │       ├── images
│   │   │   │   │       │   └── icon.png

// after
├── app
│   ├── assets
│   │   ├── images
│   │   │   └── youtube-icon.png

Change the path of js plugin

(function () {
    CKEDITOR.plugins.add('youtube', {
// abridgement
            editor.ui.addButton('Youtube', {
                label : editor.lang.youtube.button,
                toolbar : 'insert',
                command : 'youtube',
                // icon : this.path + 'images/icon.png'
                 icon : '/assets/youtube-icon.png'
            });

Operationally, there are no errors and the image is displayed normally, but this method is not correct by nature, so please tell me if there is an accurate method.

sin-to-jin commented 4 years ago

https://github.com/fonini/ckeditor-youtube-plugin/issues/65