Giters

galetahub / ckeditor

Ckeditor 4.x integration gem for rails

Home Page:https://ckeditor.com/ckeditor-4/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Icon is not displayed when using additional plugins on CDN.

sin-to-jin opened this issue · comments

commented

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.