John W.

How can I move ckeditor styles.js to another site folder?

Recommended Posts

This question has probably been beaten to death - think I'm approaching this wrong. 

Anyway, I've got a textarea input field that uses ckeditor.

Under the fields Input section I managed to add my custom style sheet in the 'Custom Editor CSS File (regular mode) section for instance:

/site/templates/css/ckeditor.css

This seems to work fine.

What I'm trying to do now is add a custom style to the ckeditor styles menu, for instance, called .green_button

(p.s. in the ckeditor styles.js I added this to the inline section : { name: 'Green Button', element: 'a', attributes: { 'class': 'button' } },

 

Ok, onto the problem...

I notice that PW, by default, is using  /wire/modules/inputfield/inputfieldCKEditor/ckeditor-4.5.10/styles.js

So, I copied this into /site/templates/js/mystyles.js

Next, I added the above to the 'Custom Editor JS Styles Set' field, however, it doesn't seem to load myckeditorstyles.js -- rather continues to load the one from the /wire/modules... folder.

I cleared all history and caching in Safari (also tried Chrome, etc).

I'm wondering if there is something else I need to do to have PW load my /site/templates/js/myckeditorstyles.js instead of the one in /wire/modules.../ckeditor-4.5.10/styles.js ?

Thanks!

 

 

Screen Shot 2017-04-20 at 4.26.41 PM.png

Edited by holmescreek
wrong filename in topic title

Share this post


Link to post
Share on other sites

you have to follow the format:

mystyles: /site/modules/etc..

you only have the path; also make sure to change the name of the styleset to add, so it doesn't conflict with the core.

  • Like 2

Share this post


Link to post
Share on other sites
On 4/20/2017 at 8:57 PM, Macrura said:

you have to follow the format:

mystyles: /site/modules/etc..

you only have the path; also make sure to change the name of the styleset to add, so it doesn't conflict with the core.

Thanks, that fixed it.  There was a space between mystyles: and /site/modules/ ... the the correct syntax mystyles:/site/... and not mystyles :/site/...

A note for other readers, the Styles drop-down wasn't displaying anything after the change quoted above. However changing the style name in the mystyles.js file 

from:

CKEDITOR.stylesSet.add( 'default', [

to:

CKEDITOR.stylesSet.add( 'mystyles', [

fixed the issue of the styles list being empty.

@Macrura - thanks!

  • Like 2

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.

  • Similar Content

    • By rafaoski
      This profile can be used as a business card or very simple blog.
      Milligram Site Profile For Processwire 3x with include functions like:
      MarkupRegions
      FunctionsAPI
      wireIncludeFile | wireRenderFile
      Essentially, this structure uses minimalist CSS framework Milligram and the Flexbox Grid System Gridlex
      Live Example
      CAN DOWNLOAD FROM THIS LINK ( Basic Version and simple Blog Version )
      https://github.com/rafaoski/site-milligram
      https://github.com/rafaoski/site-milligram-blog
      Screenshot:

      If you want to use Laravel Mix you must first ensure that Node.js and NPM are installed on your machine.
      Basic example to Debian and Ubuntu based Linux distributions:
      Node.js
      curl -sL https://deb.nodesource.com/setup_8.x | sudo -E bash - sudo apt-get install -y nodejs
      See more installation options LINK
      npm is installed with Node.js just check in linux terminal like below:
      node -v
      npm -v
      Set BrowserSync inside folder /templates/webpack.mix.js and change your dev url
      proxy: 'http://localhost/mix/', to your installation processwire folder like:
      proxy: 'http://localhost/your-processwire-installation-folder/',
      Next install npm packages in your templates folder with command npm install
      Now, boot up the dev server npm run watch, and you're all set go!
      On completion, use the command npm run production to build styles and scripts in the dist folder
      Simple Usage ( Basic Command )
      Run npm install Watch npm run watch Build npm run production All files to Webpack build steps is inside file ( webpack.mix.js )
      Folder With all SCSS files is inside templates/src/scss
      All build styles and scripts is inside the ( dist ) folder
      References:
      Milligram
      Gridlex
      Laravel Mix
      Feather Icons
      Web Font Loader
      Verlok Lazy Load
      Cookie Consent
      Particles.js
       
       
       
       
    • By darrenc
      lets say, in _main.php I have some placeholder regions for content/sidebar
      <div id="content">foo</div> <div id="sidebar">bar</div> in my home.php template, maybe i don't want the sidebar div at all. But when I put in the intentionally blank code
      <region id="sidebar"></region> I simply make my sidebar div blank, it doesn't remove it.
      Q: Is there a slick way to simply nuke that div#sidebar entirely from markup?
    • By Thomas Diroll
      Hi guys I'm relatively new to PW and just finished developing a page for a client. I was able to include all necessary functionality using the core fieldtypes but now I it seems that I need to extend them with a custom one. What I need is a simple button, that copies the absolute url (frontend not PW-backend) of the page which is currently edited to the clipboard. As this feature is only needed inside a specific template, I tend to use a custom fieldtype which provides this feature. I've been looking inside the core modules code (eg. FieldtypeCheckbox.module) but I don't really get the structure of it and how its rendered to the admin page. I also didn't find a lot of tutorials covering custom fieldtypes.
      Maybe some of you could give me some tips on how to write a basic custom fieldtype that renders a button which copies the value of
      page->httpUrl() to the clipboard using JS. Thanks!
    • 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 🙂