Jump to content
Guy Incognito

CKEditor custom styles work in frontend editor not backend

Recommended Posts

I added some custom styles to the CKeditor menu bar using the example mystyles.js and the PW tutorial. This worked fine for fields when editing on the frontend. But none of our custom styles showed in the backend editor dropdown unless we edited the core copy of mystyles.js in wire/modules.

Is this correct behaviour, a bug or a mistake on my part? Tried clearing cache, logging in/out etc but the backend ignores our custom styles in the site/modules path.

Share this post


Link to post
Share on other sites

Hello @Guy Incognito,

can you select your custom styles in the Styles dropdown? Do you have selected the custom style but don't see any change?

If you have selected a custom style and want to change the appearance inside the CKEditor, you also have to add a custom editor CSS file😉

Regards, Andreas

Share this post


Link to post
Share on other sites
10 minutes ago, AndZyk said:

Hello @Guy Incognito,

can you select your custom styles in the Styles dropdown? Do you have selected the custom style but don't see any change?

If you have selected a custom style and want to change the appearance inside the CKEditor, you also have to add a custom editor CSS file😉

Regards, Andreas

Hi Andreas,

The custom styles aren't available to choose in the back end. On the front-end, it behaves exactly as I would expect with context-aware styles available in the drop-down, with the adding bonus of live style updates as you would expect in the front end template.

I'm not too fussed about the changes appearing accurately in the back end so haven't put in the editor css, but the styles just aren't available in the drop-down unless modifying the core mystyles.js. Front end they appear fine in the drop down.

Does that make sense? I'll have to take some screenshots if not. 🙂

 

Share this post


Link to post
Share on other sites
1 hour ago, Guy Incognito said:

The custom styles aren't available to choose in the back end. On the front-end, it behaves exactly as I would expect with context-aware styles available in the drop-down, with the adding bonus of live style updates as you would expect in the front end template.

I'm not too fussed about the changes appearing accurately in the back end so haven't put in the editor css, but the styles just aren't available in the drop-down unless modifying the core mystyles.js. Front end they appear fine in the drop down.

If I recall right, I read a discussion or issue about mystyles.js always pointing to the core file in the backend some time ago. The solution there I think was to replace the word mystyles with something different, e.g. renaming site/modules/InputfieldCKEditor/mystyles.js to customstyles.js and using a different name as prefix in the inputfield settings:

customstyles:/site/modules/InputfieldCKEditor/customstyles.js

Of course, the name change also needs to be done inside customstyles.js:

CKEDITOR.stylesSet.add( 'customstyles', [
	// style definitions
  ]
);

 

  • Like 3

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    No registered users viewing this page.

  • Similar Content

    • By Gadgetto
      Hello,
      is it possible to configure CKEditor to have syntax highlighting enabled in Source and/or Sourcedialog? Coming from MODX i had this feature enabled and now I'm trying to find a solution for PW too.
      I'd like to have both the WysiWyg Editor and the Source editor with syntax highlighting enabled in on field.
      Andy plugins to achieve this?
      Greetings,
      Martin
    • By Smirftsch
      I've got some odd problem adding additional styles to mystyles.js. After reading some and following the article here: https://github.com/ryancramerdesign/ProcessWire/blob/dev/wire/modules/Inputfield/InputfieldCKEditor/README.md#custom-editor-js-styles-set
      I was able to add a custom style. So far so good 😉
      It is displayed in the Styles menu and can be selected there. Now the odd thing starts, if I add a custom style like this:
       
      ... { name: 'Box Top', element: 'span',attributes: { 'class': 'box_top' } }, { name: 'Box Bottom', element: 'span', attributes: { 'class': 'box_bottom' } }  
      it works and can be selected just fine.
      However, if I add this:
      { name: 'Box Top', element: 'div',attributes: { 'class': 'box_top' } }, { name: 'Box Bottom', element: 'div', attributes: { 'class': 'box_bottom' } } It is also displayed, can be selected - BUT - once the edit is saved, it is gone, won't be displayed in the page and won't be shown anymore in the editor as selected style, it goes back to "normal".
       
      Can anyone give me a hint what I missed?
    • By karian
      I don't know why multiple instances (repeater_repeat_columns1, repeater_repeat_columns2, ...) of my repeater field are displayed inside Template field (see image).
      Is there a way to clean/reset it ?
       

    • By Robin S
      A pet hate of mine is when an editor uses a paragraph of bold text for what ought to be a heading. When I need to tidy up poorly formatted content like this I will quickly change such lines of text into the heading of the appropriate level, but that still results in markup like...
      <h2><strong>Some heading text</strong></h2> The <strong> has no business being there, but it's a bit of a hassle to remove it because you have to drag a selection around the exact text as opposed to just placing your cursor within the line. That gets tedious if you have a lot content to process.
      I figured there has to be an easier way so started looking into the ACF (Advanced Content Filter) features of CKEditor. What I wanted is a rule that says "strong tags are disallowed specifically when they are within a heading tag". (I guess there could occasionally be a use case where it would be reasonable to have a strong tag within a heading tag, but it's so rare that I'm not bothered about it).
      With the typical string format for allowedContent and disallowedContent there is no ability to disallow a specific tag only when it is within another specific tag - a tag is allowed everywhere or not at all. But I found there is an alternative object format for these rules that supports a callback function in the "match" property. So I was able to achieve my goal with the following in /site/modules/InputfieldCKEditor/config.js:
      CKEDITOR.editorConfig = function(config) { config.disallowedContent = { // Rule for the <strong> element strong: { // Use "match" callback to determine if the element should be disallowed or not match: function(element) { // Heading tag names var headings = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6']; // The parent of the element (if any) var parent = element.parent; if(typeof parent !== 'undefined') { // If there is a parent, return true if its name is in the heading names array return headings.indexOf(parent.name.toLowerCase()) !== -1; } else { // There is no parent so the element is allowed return false; } } } } };  
      Another tip: if you want to debug your allowedContent or disallowedContent rules to make sure they are being parsed and applied successfully you can log the filter rules to the console. For convenience I used /site/modules/InputfieldCKEditor/config.js again.
      // Get the CKEditor instance you want to debug var editor = CKEDITOR.instances.Inputfield_body; editor.on('instanceReady', function() { // Log the disallowed content rules console.log(editor.filter.disallowedContent); });  
    • By tpr
      A few usability tweaks and tips for the CKEditor "Styles" dropdown, which is by default not that user-friendly:

      As you can see it's small and if you add custom items to it they may look awkward as they may inherit styles from their targets (a 3rem bottom margin in the screenshot above).
      These are relatively easy to fix but you have to load your custom CSS files to two places (eg. with AdminOnSteroids): PW admin and CKEditor.
      After loading the CSS/Js assets (see code below) the dropdown looks nicer and more usable:

      The screencap contains other features that you can achieve with the snippets below.
      Code
      CSS - CKEditor (contains demo styles too)
      CSS - admin
      JavaScript - CKEditor custom styles
      P.s. in case you wonder whether the half-margin, no-margin stuff and font-sizes from 12px to 48px were real-life examples - yes, client request 🙂 
×
×
  • Create New...