Leaderboard

WIP module (90% done) following this request expression of interest ? by @szabesz. A (Process) module that allows the posting of Notes in the ProcessWire admin. Inspired by WP Dashboard Notes (see video in link above). The module is almost complete. As usual, I hit a snag with the CSS! PRs highly welcome, please! (see below). Setting note sizes and display was a bit tricky. Module is now available for alpha testing here. https://github.com/kongondo/DashboardNotes Contributing I should have mentioned this earlier and done it properly but I am lazy, so this is the rough guide. I know we all have our preferences but please note: No heredoc syntax No alternative syntax for control structures (i.e. endif, etc) Indent using tabs (4) Doesn't matter in this case, but no PHP short tags For methods, opening curly bracket on same line as the method name (there's a technical wording for this, I can't remember now) Features Set Notes priority (low/normal/high) Note text and background colours Enable/disable replies to Notes Lock Notes for editing Viewing of Notes can be controlled using users IDs, roles or permissions. Default is all Notes can be viewed by all who have access to the module Edit Note after posting Global note settings (accessible only to those with dashboard-notes-settings permission) - default colours, date format, if users can delete notes they did not create, if users can edit notes they did not create, note display dimensions, maximum depth of (nested) replies, maximum characters of note preview before truncate, etc.) Sort notes by date, title or priority Pending Bulk actions (delete, lock, change priority, etc) Reply/commenting on notes More testing on visibility Requests/Ideas Mine is: PRs are welcome! Especially with the CSS and/or Design (Use the Dev Branch please) Display Note author title (if present, or any other named author title field) rather than their (user)name? Other? Screenshots Thanks!

Hello guys Though times. Hope this is ok to post here. I'm currently looking for a new job here in Switzerland. I have over 20 years of experience in web development. I'm specialised in front-end HTML5, CSS, JS and backend (PW of course). I also have strong visual design skills. If anyone has a tip or knows a good address, I would really appreciate it. Thanks in advance for any help you could provide. Soma

https://flaviocopes.com/page/ebooks/ I am in the middle of reading his The JavaScript Handbook which is great to get up to speed in the additions of the language added in the last few years. This is a no-nonsense, easy to understand, from-a-programmer-to-programmers book, highly recommended ? All six titles: The JavaScript Handbook (171 pages) JavaScript from ES5 to ESNext (84 pages) The React Handbook (220 pages) The Node.js Handbook (189 pages) The Express.js Handbook (61 pages) The Vue.js Handbook (122 pages) Happy coding ?

In my opinion the cleanest approach is using: It's simple to add into a CI/CD workflow and you can use e.g. git to keep track of changes. You could also try to use the json exports of processwire, but it does have way to many quirks in my opinion.

I don't believe any such solution is possible. PW relies on SQL for sorting in $pages->find() selectors and SQL doesn't support natural sorting. So I think you'll have to do one of the following: 1. Load all the pages you want to sort into memory so you can sort them with PHP. Not a good solution if you have a large number of pages. 2. Request that content editors insert leading zeros to the numbers you want to sort on, so that standard SQL sorting will be sufficient. This would be subject to human error/oversight and would probably need to be done in a separate field to allow the title field to remain in the desired format without leading zeroes. 3. Use a saveReady hook to automatically parse titles into components and save these to dedicated sort fields. This seems like the most promising option to me. An outline of how you could do option 3... Add 3 new fields to the painting template: prefix (text), number (integer), suffix (text). Add the following hook to /site/ready.php: $pages->addHookAfter('saveReady', function(HookEvent $event) { $page = $event->arguments(0); if($page->template == 'painting') { // Find the last number in the title and get the prefix/suffix before/after the number preg_match('/^(.*\D)(\d+)(.*)$/', $page->title, $matches); if(count($matches)) { // There is a number so populate each sort field $page->prefix = $matches[1]; $page->number = $matches[2]; $page->suffix = $matches[3]; } else { // There is no number so put the whole title into the prefix field $page->prefix = $page->title; $page->number = ''; $page->suffix = ''; } } }); When a painting page is saved this results in a division of the title like below. You would set the visibility of the sort fields to "hidden" for production but I have shown them below for clarity. Now when you want to find painting pages sorted naturally you sort on the three sort fields in order: $paintings = $pages->find("template=painting, limit=10, sort=prefix, sort=number, sort=suffix"); You can sort the painting pages (children of a page with the "paintings" template) in the back-end with this hook: $wire->addHookBefore('ProcessPageList::find', function(HookEvent $event) { $selector = $event->arguments(0); $page = $event->arguments(1); // If page is the parent 'paintings' page if($page->template == 'paintings') { // Set the children selector to sort on the three sort fields $selector .= ', sort=prefix, sort=number, sort=suffix'; $event->arguments(0, $selector); } });

Hey @Robin, I don't have much time, but some quick answers to hopefully get you going: 1) It does support multi value fields, but it does so with a multi-value separator (default is: |) so you would need to concatenate your separate columns into one with a separator. 2) I believe it should support importing for different templates for child pages, but only for one to one column to field relationships. I think where you will have trouble is if you want to match specific columns to specific fields. This leads into your next question. 3) If you have a mismatch of columns to fields, then you will want to use the "Field Pairings" feature. This is available if you make the parent a "configurable page" in the module settings and then define the pairings on the settings tab of that parent page. 4) See answer to 3 ? 5) Currently there is no match by ID - if you are doing an "update", then it's all based on the order of child pages. Maybe this feature could be added though. Hope that helps. Cheers!

I created this module a while ago and never got around to publicising it, but it has been outed in the latest PW Weekly so here goes the support thread... Unique Image Variations Ensures that all ImageSizer options and focus settings affect image variation filenames. Background When using methods that produce image variations such as Pageimage::size(), ProcessWire includes some of the ImageSizer settings (height, width, cropping location, etc) in the variation filename. This is useful so that if you change these settings in your size() call a new variation is generated and you see this variation on the front-end. However, ProcessWire does not include several of the other ImageSizer settings in the variation filename: upscaling cropping, when set to false or a blank string interlace sharpening quality hidpi quality focus (whether any saved focus area for an image should affect cropping) focus data (the top/left/zoom data for the focus area) This means that if you change any of these settings, either in $config->imageSizerOptions or in an $options array passed to a method like size(), and you already have variations at the requested size/crop, then ProcessWire will not create new variations and will continue to serve the old variations. In other words you won't see the effect of your changed ImageSizer options on the front-end until you delete the old variations. Features The Unique Image Variations module ensures that any changes to ImageSizer options and any changes to the focus area made in Page Edit are reflected in the variation filename, so new variations will always be generated and displayed on the front-end. Installation Install the Unique Image Variations module. In the module config, set the ImageSizer options that you want to include in image variation filenames. Warnings Installing the module (and keeping one or more of the options selected in the module config) will cause all existing image variations to be regenerated the next time they are requested. If you have an existing website with a large number of images you may not want the performance impact of that. The module is perhaps best suited to new sites where image variations have not yet been generated. Similarly, if you change the module config settings on an existing site then all image variations will be regenerated the next time they are requested. If you think you might want to change an ImageSizer option in the future (I'm thinking here primarily of options such as interlace that are typically set in $config->imageSizerOptions) and would not want that change to cause existing image variations to be regenerated then best to not include that option in the module config after you first install the module. https://github.com/Toutouwai/UniqueImageVariations https://modules.processwire.com/modules/unique-image-variations/

Thanks for developing it! Let's say I was interested in it but turning it into a "request" is fine with me too ? Thanks in advance!

Based on your description I feel like you're tackling the problem from the wrong end. You're actually trying to do what was requested from MarkupSEO ages ago: Just adding a single field to a template, but getting a whole bunch of fields in the process. In my opinion either let people add all fields to their templates or even better have an own template and just store the metadata there. Sadly it took quite a few month until the latter option was actually added properly, but now we have it: https://processwire.com/blog/posts/processwire-3.0.73-and-new-fieldset-types/#fieldset-page-fieldtypefieldsetpage https://processwire.com/blog/posts/processwire-3.0.74-adds-new-fieldsetpage-field-type/ Edit: And some more context from the time I initially proposed the idea (I've no idea if Ryan actually knew this, but it's basically what I proposed):

@Robin S - to support the textareas pro field, I think you'll need to add a new block after these: https://github.com/adrianbj/BatchChildEditor/blob/85d81d7e7cb452c0d5ece34583e42c1f2f4aae50/BatchChildEditor.module.php#L1644-L1649 and a updateTextaresField() method to handle the import. This might actually work for other simple multivalue fieldtypes, so perhaps it could be: elseif($f->type instanceof FieldtypeMulti) { Not sure you timing on needing this. If you don't get to it (or decide to take a different approach), I'll try later in the week.

You can install TracyDebugger and you can test it. Also see the developer tools in the browser. Perhaps there you will find the cause.

I've been working with ProcessWire for a while now, and I've noticed that using Composer to manage dependencies and autoload external libraries isn't as prevalent in ProcessWire development as in other areas of PHP programming. I started out by using the default setup recommend in this blogpost. However, one major problem I have with this approach is that all external dependencies live in the webroot (the directory the server points to), which is unfavourable from a security standpoint and, in my opinion, just feels a bit messy. In this tutorial, I want to go through a quick setup of Composer and ProcessWire that keeps the dependencies, all custom-written code and other source material outside of the webroot, and makes full usage of the Composer autoloader. This setup is pretty basic, so this tutorial is probably more useful to beginners (this is why I'll also include some general information on Composer), but hopefully everyone can take something away from this for their personal workflow. Site structure after setup This is what the directory structure can look like after the setup: . ├── composer.json ├── composer.lock ├── node_modules │ └── ... ├── public │ ├── index.php │ ├── site │ ├── wire │ └── ... ├── packacke-lock.json ├── package.json ├── sass │ ├── main.scss │ ├── _variables.scss │ └── ... ├── src │ ├── ContentBag.php │ └── ... └── vendor ├── autoload.php ├── composer ├── league ├── symfony └── ... As mentioned, the main point of this setup is to keep all external libraries, all other custom source code and resources out of the webroot. That includes Composer's vendor folder, your node_modules and JavaScript source folder if you are compiling JavaScript with webpack or something similar and including external scripts via NPM, or your CSS preprocessor files if you are using SASS or LESS. In this setup, the public directory acts as the webroot (the directory that is used as the entry point by the server, DocumentRoot in the Apache configuration). So all other files and directories in the mysite folder aren't accessible over the web, even if something goes wrong. One caveat of this setup is that it's not possible to install ProcessWire modules through Composer using the PW Module Installer (see Blogpost above), but that's just a minor inconvenience in my experience. Installation You'll need to have composer installed on your system for this. Installation guides can be found on getcomposer.org. First, open up your shell and navigate to the mysite folder. $ cd /path/to/mysite/ Now, we'll initialize a new Composer project: $ composer init The CLI will ask some questions about your projects. Some hints if you are unsure how to answer the prompts: Package names are in the format <vendor>/<project>, where vendor is your developer handle. I use my Github account, so I'll put moritzlost/mysite (all lowercase). Project type is project if you are creating a website. Author should be in the format Name <email>. Minimum Stability: I prefer stable, this way you only get stable versions of dependencies. License will be proprietary unless you plan on sharing your code under a FOSS license. Answer no to the interactive dependencies prompts. This creates the composer.json file, which will be used to keep track of your dependencies. For now, you only need to run the composer install command to initialize the vendor directory and the autoloader: $ composer install Now it's time to download and install ProcessWire into the public directory: $ git clone https://github.com/processwire/processwire public If you don't use git, you can also download ProcessWire manually. I like to clean up the directory after that: $ cd public $ rm -r .git .gitattributes .gitignore CONTRIBUTING.md LICENSE.TXT README.md Now, setup your development server to point to the /path/to/mysite/public/ directory (mind the public/ at the end!) and install ProcessWire normally. Including & using the autoloader With ProcessWire installed, we need to include the composer autoloader. If you check ProcessWire's index.php file, you'll see that it tries to include the autoloader if present. However, this assumes the vendor folder is inside the webroot, so it won't work in our case. One good place to include the autoloader is using a site hook file. We need the autoloader as early as possible, so we'll use init.php: EDIT: As @horst pointed out, it's much better to put this code inside the config.php file instead, as the autoloader will be included much earlier: // public/site/config.php <?php namespace Processwire; require '../../vendor/autoload.php'; The following also doesn't apply when including the autoloader in the config-file. This has one caveat: Since this file is executed by ProcessWire after all modules had their init methods called, the autoloader will not be available in those. I haven't come across a case where I needed it this early so far; however, if you really need to include the autoloader earlier than that, you could just edit the lines in the index.php file linked above to include the correct autoloader path. In this case, make sure not to overwrite this when you update the core! Now we can finally include external libraries and use them in our code without hassle! I'll give you an example. For one project, I needed to parse URLs and check some properties of the path, host et c. I could use parse_url, however that has a couple of downsides (specifically, it doesn't throw exceptions, but just fails silently). Since I didn't want to write a huge error-prone regex myself, I looked for a package that would help me out. I decided to use this URI parser, since it's included in the PHP League directory, which generally stands for high quality. First, install the dependency (from the project root, the folder your composer.json file lives in): $ composer require league/uri-parser This will download the package into your vendor directory and refresh the autoloader. Now you can just use the package in your own code, and composer will autoload the required class files: // public/site/templates/basic-page.php <?php namespace Processwire; use \League\Uri\Parser; // ... if ($url = $page->get('url')) { $parser = new Parser(); $parsed_url = $parser->parse($url); // do stuff with $parsed_url ... } Wiring up custom classes and code Another topic that I find really useful but often gets overlooked in Composer tutorials is the ability to wire up your own namespace to a folder. So if you want to write some object-oriented code outside of your template files, this gives you an easy way to autoload those using Composer as well. If you look at the tree above, you'll see there's a src/ directory inside the project root, and a ContentBag.php file inside. I want to connect classes in this directory with a custom namespace to be able to have them autoloaded when I use them in my templates. To do this, you need to edit your composer.json file: { "name": "moritzlost/mysite", "type": "project", "license": "proprietary", "authors": [ { "name": "Moritz L'Hoest", "email": "info@herebedragons.world" } ], "minimum-stability": "stable", "require": {}, "autoload": { "psr-4": { "MoritzLost\\MySite\\": "src/" } } } Most of this stuff was added during initialization, for now take note of the autoload information. The syntax is a bit tricky, since you have to escape the namespace seperator (backslash) with another backslash (see the documentation for more information). Also note the PSR-4 key, since that's the standard I use to namespace my classes. The line "MoritzLost\\MySite\\": "src/" tells Composer to look for classes under the namespace \MoritzLost\MySite\ in the src/ directory in my project root. After adding the autoload information, you have to tell composer to refresh the autoloader information: $ composer dump-autoload Now I'm ready to use my classes in my templates. So, if I have this file: // src/ContentBag.php <?php namespace MoritzLost\MySite; class ContentBag { // class stuff } I can now use the ContentBag class freely in my templates without having to include those files manually: // public/site/templates/home.php <?php namespace Processwire; use MoritzLost\MySite\ContentBag; $contentbag = new ContentBag(); // do stuff with contentbag ... Awesome! By the way, in PSR-4, sub-namespaces correspond to folders, so I can put the class MoritzLost\MySite\Stuff\SomeStuff in src/Stuff/SomeStuff.php and it will get autoloaded as well. If you have a lot of classes, you can group them this way. Conclusion With this setup, you are following secure practices and have much flexibility over what you want to include in your project. For example, you can just as well initialize a JavaScript project by typing npm init in the project root. You can also start tracking the source code of your project inside your src/ directory independently of the ProcessWire installation. All in all, you have good seperation of concerns between ProcessWire, external dependencies, your templates and your OOP-code, as well as another level of security should your Server or CGI-handler ever go AWOL. You can also build upon this approach. For example, it's good practice to keep credentials for your database outside the webroot. So you could modify the public/site/config.php file to include a config or .env file in your project root and read the database credentials from there. Anyway, that's the setup I came up with. I'm sure it's not perfect yet; also this tutorial is probably missing some information or isn't detailed enough in some areas depending on your level of experience. Feel free to ask for clarification, and to point out the things I got wrong. I like to learn as well ? Thanks for making it all the way to the bottom. Cheers!

I know how this feels. I'm sure there is some core issue with the admin login that semi-regularly gives me CSRF errors when I attempt to log in but I haven't been able to isolate the conditions to reproduce it - my gut feeling is that it's something to do with an expired cookie. I'm always in a hurry when it happens so I just back button and resubmit the form. To get to the bottom of your issue I expect it could be traced by dumping within the chain of methods that get the data from the database and ultimately deliver the formatted value. But who has time for that when you're on a deadline?

Very strange, I've never experienced such a thing before. A couple of ideas... 1. Any chance there is a name clash for "document_pdf" on $page - something setting a custom property named "document_pdf" on the $page object? 2. Does changing the field name to something different fix it? Then maybe change it back to the original name and check again.

There is a Textformatter to get rid of the enclosing p tags. Go to Modules->Install and select Textformatter, there you should find "Paragraph Stripper". After installation go to your inputfield and on the Details tab add that textformatter. But be aware that CkEditor generates markup, so paragraphs are intentionally embedded in p tags, and CkEditor can generate plenty of other tags as well. If you only need plain text, then not selecting CkEditor is probably the better choice.

Adrian, I can't maximize the console panel, I see this error in Chrome console: Uncaught ReferenceError: tracyPanel is not defined at tracyResizePanel (?_tracy_bar=js&v=2.6.1&XDEBUG_SESSION_STOP=1:1130) at HTMLAnchorElement.onclick (?id=1015&s=1&c=1:1744) Not sure when this started...

I cant' replicate here... Sure there are no hooks on url method?

You don't need to install it, just go to your textarea field and configure it: Setup > Fields > your_field_name > Tab Details > inputfield type > select CKEditor

Seems I'm not alone encountering strange issues with File fieldtype configured for single items. I'm not sure if my symptoms relate to this one, but they are similar weird (work on one site/situation, fail on others). On one multi-language site I've added a single file to the language template which holds a SVG of the flag. The SVGs retrieve correctly for one language, but exactly one SVG can't be retrieved if the user is running from another language (I can try to replicate if required). Did the same on another site (using the same code) where it works ok. This does not relate to the language setting itself, I also saw a similar behavior with the same field used on different pages (can't remember exactly). As my personal workaround I've switched those fields to always return an array, even if they only hold a single item. Happens across any PW 3 version I've encountered so far.

WIP here:

It seems like a long way to go, but this looks fantastic. I'll get on it asap, thanks a bunch @Robin S and @bernhard. @marcus Wondering if this might deserve a recipe, I could imagine quite a bunch of people are struggling with this issue. Thanks again, and greetings to NZ!

No problem, thanks for the clarification. In the end I solved this by saving the base64 image as a text field, and I'm planning to use an on page-created hook to convert this to an image in a more PW way. I look forward to seeing where this plugin goes; even in its early form it's been very helpful.

Thanks for the info @adrian. I think for this specific case I'll write a custom import script. I'm already using a custom script for exporting the data so will be pretty straightforward to whip up an equivalent import script. Will definitely spend some time playing with BCE later though - looks really nice.

Hi @gerrmen and welcome, did you read the docs about url segments? https://processwire.com/docs/front-end/how-to-use-url-segments/ Seems like this could be what you are looking for.

Unfortunately the getMotationHook requires you to use the Youshido/GraphQL library that this module depends on. The issue with it, is that the youshido/graphql is not maintained anymore. Which means that I'll be rewriting GraphQL module to get red of it and use some other library. So I can't give you the correct solution because it's being deprecated at the moment, and I can't tell when I'll finish the migration to another php graphql library because I'm limited with my spare time. Sorry for replying this late, I hope you found a solution.

Best of luck on the job search, Soma! I hope you find a great place soon!

@PWaddict, if I understand right you want to set a limit of zero items. I added support for this in v0.1.6.

I'm looking forward to seeing it in alpha! ?. Most of it (especially the backend) is already planned (going through several iterations) and all that is remaining is the relevant code.

Thanks TTS...that clears it all up, I actually get what you mean. Guys and Girls, on a side note, I think you need to look at licencing the system you have in place for forums or online help....no shit, I've been on a LOT of them and the quickest I've had (Even being intermediate on some) is 4 times longer than I've experienced here....not to mention all answers have been relevant to my question. Anyway, love you guys....you rock! If ever you're looking at investing in Australian property, let me know and I'll make sure you get looked after! JA.

A couple of things have derailed me some, so I cannot promise this. Beta testing will also take a bit of time, sorry.

Happy and productive new year! ? I opt for this one: Please do not try to take on too much work before the initial release regarding the GUI. I think one layout is just enough to start with. Besides, if we have two layouts then it will make creating docs an tutorials more complex as we need to account for both. Configurable layout is less desirable than and easy to use one right from the beginning. I would not like to see an app like behaviour as that implies mobile only experience which can never be as productive as a well tailored desktop GUI. Sure, it should be usable on mobiles without any irritating issues but that is of second concern to me.

@kongondo you should consider crowdfunding this. Kickstarter or whatever. The community needs an official or reputable shopping solution and what you’re doing is so much work without a guarantee that it will pay off for you.

CKEditor is a nasty beast when it comes to configuring it, but I will try to help ? First things first, how to configure it: https://github.com/processwire/processwire/blob/dev/wire/modules/Inputfield/InputfieldCKEditor/README.md#custom-editor-css-file You probably did this but to make things clear: the field's type is Textarea, while the inputfield's type is CKEditor. So far so good ? On the Details tab: content type is recommended to be Markup/HTML and it should be. "Markup/HTML (Content Type)" option can be configured as required, as they do not affect the CSS we are dealing with. The things in question be configured on the Input tab, under the CKEditor settings, so here come the interesting bits. Available core toolbar items are listed there, and as an example, here is what I often use: PWImage, Format, Styles, RemoveFormat, Bold, Italic, NumberedList, BulletedList, PWLink, Unlink, Table, SpecialChar, Sourcedialog Format and Styles are needed to make those dropdowns show up. If you do not have too many CKEditor fields on the edit page then I recommend setting them to "Regular Editor". We have a thread of discussing settings, BTW: https://processwire.com/talk/topic/17862-share-your-ckeditor-settings/ Turning ACF and HTML Purifier on is generally recommended, however, they might make things harder in terms of keeping those HTML bits intact when saving the page. In the case of ACF, you need to deal with "extra allowed content" so that your code actually gets saved as intended. Here are some forum topics to tackle some issues that may arise: https://processwire.com/talk/topic/19519-ckeditor-and-extra-allowed-content/ https://processwire.com/talk/topic/19918-modify-ckeditor-image-markup-via-hook/?do=findComment&amp;comment=172616 https://processwire.com/talk/topic/12773-ckeditor-does-not-reapply-styles/#entry116174 Normally I turn ACF on, but keep HTML Purifier off in some cases, as I usually use "Regular Editor" instead of "Inline" and have trusted users. However, HTML Purifier is good for making sure only valid code is saved, so it is a trade off not to turn it on. When I do use HTML Purifier, then I sometimes temporarily turn it off during development but I make sure to turn in on for the production site, even for trusted users. If you run into troubles, try turning it on and off to see what it changes in the source. Sadly, HTML Purifier is not yet configurable in ProcessWire. You can give this request a thumb's up though: https://github.com/processwire/processwire-requests/issues/226 Setting up Format Tags is self explanatory, usually I use at least the minimum of p;h2;h3;h4;h5 (h1 is always generated by the template file so no need to include it). Extra Allowed Content is very important, normally I use this: p(*)[*]{*};div(*)[*]{*};li(*)[*]{*};ul(*)[*]{*};i(*)[*]{*};tr(*)[*]{*};*[id];*(class); *[id] and *(class) are somewhat redundant as they allow any IDs and any classes while (*)[*] also allow any of those in the case of the element they are applied to. Now we are getting to the bits you are probably concerned with: Custom Editor CSS File (regular mode) - which can be used to style the HTML of content editor itself as opposed to the frontend Custom Editor JS Styles Set - this is the file you need when you want to define styes for the Style toolbar dropdown Custom Config Options - the notes of the field read: these settings can also be set in one of these files (e.g.) ...config.js and ...config-body.js and this is what I normally use. To configure these options properly this is what you need to tripple check: Make sure: you did create the directory /site/modules/InputfieldCKEditor/ and copied the file called mystyles.js from /wire/modules/Inputfield/InputfieldCKEditor/ to its counterpart: /site/modules/InputfieldCKEditor/ Make sure: files in the directory /site/modules/InputfieldCKEditor/ are named exactly as the ones configured in the options. In the case of Custom Editor JS Styles Set, make sure that in the JS file the function parameter reflects the name you defined in the admin. The default is "mystyles", defined this way: mystyles:/site/modules/InputfieldCKEditor/site_styles.js which means that in the JS file you need CKEDITOR.stylesSet.add( 'mystyles', [... but if you want to use a different string, then replace "mystyles" both in the admin's configuration filed and the accompanying JS file, something like: cke_extra:/site/modules/InputfieldCKEditor/my_extra.js and CKEDITOR.stylesSet.add( 'cke_extra', [... Regarding the configuration files themselves, here is an example for config-body.js: CKEDITOR.editorConfig = function (config) { // Define changes to default configuration here. For example: // config.uiColor = '#AADC6E'; //config.enterMode = CKEDITOR.ENTER_BR; // stops new <p> tags from being added, adds <br /> instead. config.protectedSource.push(/<i[a-z0-9\=\'\"_\- ]*><\/i>/g); // needed for empty <i> tags (icons) config.protectedSource.push(/@/g); // needed for empty <i> tags (icons) /* If this one is enabled: * config.allowedContent = true; * then it is not possible to stop adding widht and height to images */ config.disallowedContent = 'img[width,height]'; // to stop adding widht and height to images }; CKEDITOR.dtd.$removeEmpty['i'] = 0; // needed for empty <i> tags (icons) Regarding mystyles:/site/modules/InputfieldCKEditor/mystyles.js here is one approach for UIkit 3: CKEDITOR.stylesSet.add( 'cke_extra', [ { name: 'Normal Paragraph', element: 'p', attributes: {'class': 'site-paragraph'} }, { name: 'Clear runaround', element: 'p', attributes: {'class': 'uk-clearfix'} }, { name: 'Warning Paragraph', element: 'p', attributes: {'class': 'uk-alert-warning', 'data-uk-alert': ''} }, { name: 'Success Paragraph', element: 'p', attributes: {'class': 'uk-alert-success', 'data-uk-alert': ''} }, { name: '1/2 left align', element: 'img', attributes: {'class': 'align_left uk-float-left uk-width-1-2@s site-body-img'} }, { name: '1/2 right align', element: 'img', attributes: {'class': 'align_right uk-float-right uk-width-1-2@s site-body-img'} }, { name: '1/3 left align', element: 'img', attributes: {'class': 'align_left uk-float-left uk-width-1-3 site-body-img'} }, { name: '1/3 right align', element: 'img', attributes: {'class': 'align_right uk-float-right uk-width-1-3 site-body-img'} }, { name: '1/4 left align', element: 'img', attributes: {'class': 'align_left uk-float-left uk-width-1-4 site-body-img'} }, { name: '1/4 right align', element: 'img', attributes: {'class': 'align_right uk-float-right uk-width-1-4 site-body-img'} }, { name: 'center image', element: 'img', attributes: {'class': 'align_center uk-align-center site-body-img'} }, ]); This method above defines classes for the Style toolbar dropdown in a way that more than one class or attribute is applied to the selected element. For example align_left is applied because the default ProcessWire CKEditor class for left align is this (see this post). However, to make sure that in the frontend the same element is also aligned to the left, I also apply uk-float-left uk-width-1-2@s to it. This is just a dead simple approach but you can make it more sophisticated. If you want to turn CKEditor into a WYSIWYG editor then you need do some extra work, because you need to make sure your contents.css defines the classes and styles also used on the fronted. I have not ventured too far in this direction though. Normally I use UIkit 3 on the frontend and not in the admin so I simply mimic the most important subset of the frontend's styles in contents.css. I will need to improve on this practice but only after I have switched from the Reno Admin Theme to Admin Theme UIkit. I hope I cleared up a few things for you. I you want even more tips form others, I recommend using google to search like this: https://www.google.hu/search?q=CKEditor+site%3Aprocesswire.com%2Ftalk&amp;oq=CKEditor

@ryan I can't seem to find any way to sort repeaters in the backend. Do you have any news on this? I tried going to where you said however nothing about sorting shows up in Family.