WebsiteBaker Community Forum

WebsiteBaker Support (2.10.x) => Modules => Topic started by: tschiemer on August 07, 2017, 11:30:01 PM

Title: Missing Button Art inside CKEditor
Post by: tschiemer on August 07, 2017, 11:30:01 PM
I have upgraded to the latest WP (2.10) and the latest CKeditor (4.6.2), but once I did that, the link button art is missing. I have tried uninstalling and reinstalling , but it doers not come back.  How can I fix this?  See attached.
Title: Re: Missing Button Art inside CKEditor
Post by: sky writer on August 08, 2017, 12:26:15 AM
I'll try to help.

Let's start by ensuring you have cleared your browser cache.  F5 or ctrl-F5.  If this doesn't work, close WB and completely close your browser, then open browser to another site, clear cache (ctrl-F5) and then try opening your admin and take a look.  Or try opening your admin in a different browser altogether and see if the icon is missing there as well.
If this doesn't solve the missing icon issue...

Before you did the upgrade to 2.10 and 4.6.2 had you customized the CKEditor Toolbar in your Templates (wb_ckconfig.js) or were you using the default WB/CKEditor toolbar?

We'll work from here.
Title: Re: Missing Button Art inside CKEditor
Post by: Gast on August 08, 2017, 12:59:58 AM
CKeditor as part of the wb-package or as single download  (maybe) directly from ckeditor.com?

is only the link button missing or the complete function - the link-dialog?

(https://i.gyazo.com/95f96ee6fc80aba25762bba4d0fdd8d8.png)

the icon is defined in modules/ckeditor/ckeditor/plugins/wblink/plugins.js
default icon for un-used links is modules/ckeditor/ckeditor/plugins/wblink/icons/wblink.png -> (https://i.gyazo.com/e74d27d26e8c30e270be37ad3711eb3c.png)
if the editor founds a working link, the icon change to a light-blue-icon, filename: _wblink.png
please check at first, that you have this file in the folder modules/ckeditor/ckeditor/plugins/wblink/icons

if the popup-windows doesnt starts after a click on the (in your screenshot empty) link-button, maybe the plugin is deactivated.
if you use the ckeditor from the wb-2.10.0-package, the plugin there is activated in
- modules/ckeditor/include.php  as part of this array -> $ckeditor->config['extraPlugins']  (~Ln 181)
- check here also the next array -> $ckeditor->config['removePlugins']. these are inactive plugins, so be sure, that wblink is not a part of this array

- modules/ckeditor/wb_config/wb_ckconfig.js
- check, the the name "WbLink" is Part of the used toolbar. default toolbar is "WB_Default", but its possible, to change this default toolbar with admin tools like wysiwyg_admin etc
- check also the config array's config.extraPlugins and config.removePlugins - wblink must be a part of extraPlugins and not of removePlugins

- custom wb_ckconfig.js in the used frontend template(s)
- same settings like the default wb_ckconfig.js, but for separate settings in every template
(in theory its possible, to give different pages or section types a different template with the same design, but with other settings for the editor. For example: some special pages are only for the admin and he gets a extended toolbar, but the news-Page has multiple autors and needs only a small toolbar - thats the idea behind the custom config files in template folder

last point: the whole editor works with javascript and sometimes, its difficult to clear the cache. use a tool like ccleaner to clear the cache
and!!
go to a page without wysiwyg editor (maybe media or settings), clear the cache and go back to the page with the editor

P.S.: use only editors, designed for WB
Title: Re: Missing Button Art inside CKEditor
Post by: tschiemer on October 26, 2017, 03:18:41 AM
Hi all,

I have dozens of WB sites on my server that I have built over the last 10+ years and have been getting complaints from clients that the Link button graphic is gone in the WYSIWYG ever since the upgrade.  After looking, they are right. The link graphic is not only linked wrong in the CKEditor Module code (showing: /modules/ckeditor/ckeditor/plugins/wblink/icons/hidpi/wblink.png?t=H0CG') - This file does not exist.  Through FTP I did find it in the /wblink/icons/ folder, but it's named "_wblink.png ".  See attached.  This is showing the same on all my WB site Admins since the upgrade to 2.8.3 and even after upgrading one of the sites to 2.10.0 with CK-Editor 4.6.2. 

I did try to uninstall/reinstall and to unistall and use the module shoting in Website Bakers site called: Wysiwyg_v3_0_6.  Unfortunately though, this WYSIWYG module will not install even when I don't have any WYSIWYG modules installed and assigned in the settings.  It keeps telling me that the module is already installed. Not sure how to fix that, so I just reinstall the latest CKeditor module from WB and the graphic is still gone.  I have tried numerous browsers and computers and they all show a missing graphic.

Please help.


Just for reference, here is the new WYSIWYG that looks like CKEditor in the graphic, but it will not install no matter what I do:
https://addon.WebsiteBaker.org/pages/en/browse-add-ons.php?id=04B94543

Here is the CKeditor I have installed separately from the WB editor, but also allowed the WB upgrade to install it too... bth with same result:
https://addon.WebsiteBaker.org/pages/en/browse-add-ons.php?id=08A769F
Title: Re: Missing Button Art inside CKEditor
Post by: tschiemer on October 26, 2017, 03:35:28 AM
Here is another screen shot, from Firefox this time, using a different site and 2.8.3 with CKeditor 4.6.2.  Same graphic missing and same code linking to a weird url with missing graphic.  The actual file is in the icons folder with an _ in front of the name just like the last post. It appears all my sites are the same right now x10+.  I planed to upgrade all of them to 2.10.0 this weekend, but I would like to find a resolve to this first so I can repeat the fix for all sites during the upgrades.

Title: Re: Missing Button Art inside CKEditor
Post by: hgs on October 26, 2017, 08:34:57 AM
I can not confirm the errors.
I see the button with this call.
Code: [Select]
<span class="cke_button_icon cke_button__image_icon" style="background-image:url('https://domäne.de/modules/ckeditor/ckeditor/plugins/icons.png?t=H0CG');background-position:0 -1008px;background-size:auto;">&nbsp;</span>This is an original WB 2.10 with php5.6 upgrade from a WB 2.8.3

Then I think you are confusing something.
The module WYSIWYG described by you is a core module to create pages with text and images, the EDITOR used, with the button "Images" is empty, is set in the backend via "option" "extended options" and the is since WB 2.83. SP6 or SP7 the CKEditor v4.6.2.
In the next version, it will be the CKEditor v4.7.3
Title: Re: Missing Button Art inside CKEditor
Post by: Gast on October 26, 2017, 01:02:39 PM
the editor has a switch for retina displays, called HiDPI, see -> https://ckeditor.com/blog/Retina-in-CKEditor-4.2/
if the editor detect a display like this, it change the links to the icons to icons/hidpi, if not, it use the "old" grafics in icons-folder
thats the reason, why somebody has the error, another one not

two solutions

1.  go into modules / ckeditor / ckeditor / plugins / wblink / plugins.js
and set hidpi to false in this line 14
       
Code: [Select]
hidpi: true, // %REMOVE_LINE_CORE%
2. build a new folder in modules / ckeditor / ckeditor / plugins / wblink / icons with name hidpi and copy the grafic's from the icon folder into this new hidpi-folder
Title: Re: Missing Button Art inside CKEditor
Post by: tschiemer on October 26, 2017, 05:53:54 PM
Thanks. I set the plugin.js file for hidpi to false and that worked perfectly!!  I will repeat this for all other sites in the future.

It's weird that CKeditor has this turned on, but does not have upgraded art files made for it.

I appreciate the help.
Title: Re: Missing Button Art inside CKEditor
Post by: Gast on October 26, 2017, 06:12:11 PM
Quote
It's weird that CKeditor has this turned on, but does not have upgraded art files made for it.

simple answer
the ckeditor plugins are a combination of original - ckeditor-plugins and wb-own-plugins
the upgrade of the editor (and his original) plugins comes directly from the ckeditor-group, so also the code and the icons.
if you build a own plugin (like wblink), you use a lot of parts from other plugins, so also the switch like this here
Code: [Select]
var iconPath = CKEDITOR.getUrl( this.path + 'images' + ( CKEDITOR.env.hidpi ? '/hidpi' : '' ) + '/anchor.png' ),but it works only, if you have a retina display. it looks, that nobody from the testers have a display like this, include myself  :oops:

P.S.: if my search was correct, the wblink-plugins is the only one, what use hidpi without a special icon in hidpi-folder

another P.S.: if you add a new folder "hidpi" like my description, it works also in the next editor-upgrade (if nobody correct this issue), but i'm sure, the next upgrade of this plugins has also a activated hidpi-setting in this plugin, so the problems come'a back again then - remember this thread  ;-)