Custom CKEditor styles in webfiles fails on some browsers

Experience Manager (PaaS/OnPrem)
1

Hi All,

We are having some issues with users unable to see the custom styles in CKeditor. When they open a document in the CMS they don’t see any of the custom styles and an error appears in the console. Similar errors occur in Chrome and Firefox. Although most users do not have this issue.

This is the error from the Firefox console:

Error: [CKEDITOR.resourceManager.load] Resource name "mystyle" was not found at 
"webfile:/js/ckeditor/mystyles_gaw.js?t=CMTc". ckeditor.js:220:270 load /<
http://intranet.gartner.com/cms/ckeditor/optimized/ckeditor.js:220:270 g 
http://intranet.gartner.com/cms/ckeditor/optimized/ckeditor.js:215:486 n 
http://intranet.gartner.com/cms/ckeditor/optimized/ckeditor.js:216:130 t 
http://intranet.gartner.com/cms/ckeditor/optimized/ckeditor.js:216:210 r/g.$.onerror 
http://intranet.gartner.com/cms/ckeditor/optimized/ckeditor.js:217:146

We have custom styles in/webfiles/js/ckeditor/mystyles_gaw.js

The config.overlayed.json property from the node /hippo:namespaces/hippostd/html/editor:templates/_default_ is:

{
     extraPlugins: 'wysiwygarea,assetlist,twocollayout,threecollayout,iframedialog,floatingdiv,horizontalrule,blockquote,table,link,inlinevideo,bootstrapAccordion,bootstrapTabs,modal,customdiv',
     removePlugins: 'divarea,youtube,tableresize',
     stylesSet: "mystyle:'webfile:/js/ckeditor/mystyles_gaw.js'",
     contentsCss: [
        'webfile:/css/styles.css',
        'webfile:/css/gaw.css',
        'ckeditor/hippocontents.css',
        'webfile:/css/ckeditor/customckeditorstyle.css',
        'webfile:/css/ckeditor/gaw.css'
     ] 
   }
2

In this case for most user it is working so your configuration is correct. It does not work for some users may due to the network connection that prevent their browser download the file mystyles_gaw.js.

Can you try to open the Firebug and check the Network tab to see if the file mystyles_gaw.js is downloaded correctly when you open the document ?

3

The same users consistently face the same issue. Some of them are on the local network and others are remotely accessing via the vpn and have no issue accessing other internal sites, so network issues seem unlikely. I know that mystyles_gaw.js is not being downloaded properly, but the issue is that ckeditor.js (which is vendor provided) is making an XHR request for a file called “webfile:/js/ckeditor/mystyles_gaw.js” which is not a valid URL. It seems like there is an issue with replacing the “webfile:” in the configuration with the appropriate urls for webfiles. I don’t know how that string replacement occurs, but it seems like that is the issue.

4

you cannot use webfile protocol like that (in cms).
package your styles in cms.war
see:

5

We have been using webfiles for the stylesets for years without any issues and it works for most users. We can move it to the source code like suggested, but that means we would need to rebuild and have an outage every time we add a new style to the style set. Is there a way of deploying new stylesets without an intranet outage?

6

Pretty much all of our clients do, but that is in HST layer only.
CMS doesn’t use webfile protocol.

7

Only way is to have a custom mapping (servlet) within cms web.xml which would serve css file from repository (webfiles or assets folder, or some other repository location )