 So welcome around today we're going to talk about CK editor one small step for content editor one gently for Drupal and Don't forget. This is a content Editor track. So it means that today I'm gonna cover things like content editing to some Progress on how the editing is going some tools for content editors Be it actually a knowledge or a specific module some library we can use this session does not cover developer tools There would be no tips on how to build your own plug-in We're not gonna not going to cover a lot of technical information and we're not going to cover Premium features. However, there are sessions there which I'm gonna give you a link to that do cover that in In last extent from the actual creators of CK editor. Can everyone hear me? Okay? Excellent So I'm Vladimir. I'm from Brisbane, Australia. I am a teacher I teach AT and also I've been for more than a decade. I've been a Drupal developer in various roles so What are we gonna cover today? We're gonna cover what is CK editor five? I was surprised how little I knew what CK editor five is how it works and what's actually in Drupal Apart from the modules there is thing called plugins and all that so we're gonna cover that we're gonna look a bit into content Editing depending how we go we might or might not jump to Drupal and see how it thinks But I got all screenshot just for you. So that's good. I'm gonna talk about the future How are we going to go into the future having CK editor five in Drupal? So story time once upon a Drupal seven time There was a wheezy wig module who use wheezy wig module Who knows how many at its peak how many wheezy wig editors and let's word like editors. It's supported so that's the module and It's supported. Well, that's the least without the one that crossed in the documentation. There is more that how many wheezy wig editors were there and Yeah, you actually had the choice if you are using Drupal seven its prime You had the ton of wheezy wig editors to use to choose and if you go to the documentation as of May 2022 Only two remain I'm not gonna go to a culture references. There's a line on the bottom Which I'm covering which can tell you something so one of them is tiny emcee and there would be a couple of references to Eurovision So don't worry if you don't get it. So tiny emcee is built in Australia. It's Open source if you want to come in there's plenty of seats here welcome And also they make money on subscription model so you kind of subscribe to the cloud you might use premium features They actually charge by number of editor loads and all that but that's one quite a big player Tiny dot cloud the URL and it has a very popular integration with WordPress There's integration with Drupal and they support a lot of custom application if you go to the official documentation They actually have official documentation to integrate with different sort of technologies JavaScript PHP rails you name it and there was a Ciki editor and Ciki editor can be found at Ciki editor comm and who knows where it's built Which country that's it so It's built by a company called CK source which is based in Poland. They have about 80 employees So Ciki editor is a word like a so if you use Microsoft Word or any version of cloud office That's exactly what we're talking when we say wheezy week. What do you see is what you get? It's open source. The essential is open source. It's mature It's Very very old if we talk about I actually haven't looked when the first version was out but we're gonna talk about version 5 which is already eight years old and The good news for us CK editor is available in Drupal core and stable There are also premium features and then they how they try to make money Includes all real-time collaboration on multiple people editing taking people and there's plethora of other premium features so CK editor ecosystem is on github so you can go to the github and Yeah, you can go and help them out read the issues help. We help to build the beta editor. So typos representation was here before I They said that it used in typosphere. I'm not sure which extent it is in Drupal core and The interesting bit about CK editor, which I didn't knew it's actually a decoupled. So it's a headless editor Zen desk uses editor engine and they built their own editor on top of that But they're using CK editor 5 engine in the back as a headless editor So CK editor 5, it's not the next version from CK editor 4 Well, it is but it's not it's written from scratch and actually first commit was in 2015. So full take The timeline it's eight years old. So it's quite mature It took about two years to integrate it into core So people can start using it and as I mentioned before it has a headless mode So if we look at the moment that version in for the CK editor 5 Current core uses version 35.4 But the good news is version 37 which is a major mind-stole milestone for the CK editor They converted it to a type script with this. It's coming and it's already in 10.1 beta 1 which was out a couple of days ago. So you can actually go and test it out So what's the difference between CK editor 4 and CK editor 5? Modern architecture They completely Re-architected the model for the things they wanted to use including the premium features So they actually created own data model rather than relying on HTML data model It's mobile friendly CK editor 4 wasn't and there were a lot of massive Table improvements which we're gonna cover when we go to a specific plugin So security they said they have about 20,000 tests I didn't count them but I do believe them and the interesting news is because they actually allow you for premium features To be installed on premises. They're actually looking in a year or two to get security certifications So let's talk about architecture. So what is CK editor? CK editor 5 they call it. It's an ecosystem so ecosystem includes a bunch of core Plugins, so this is a core plugins for CK editor ecosystem something like a table that you can manipulate the table or auto format and There's bunch of plugins that sit in the core of CK editor 5 not all of them made it to Drupal and Then then there are other plugins. For example, there are a couple of plugins written for Drupal inside Drupal There are plugins that sit on a github and then there is Drupal core So Drupal core has CK editor 5 modules only number of plugins. For example table plugin made it a while back in 9.4 auto formatting plugin Are gonna be available from 10.1 Then there are modules like media that uses their own Plugin to integrate with CK editor 5 and then we have plugins that never made it although the in core of CK editor For example CK editor font and color Actually, I'm gonna talk about color, but font and size module is actually a separate module And then there are modules that do not use CK editor official plugins at all They build their own and few examples we're gonna look at it's CK accordion and CK bootstrap columns Now anyone has a question about the architecture Great So what's CK editor at Drupal as I mentioned before it took about two plus years of work to To get where we are at the moment. It was experimental Drupal 9 as a 9.4 It became stable 9.5 stable 9.5 and it became stable at 10 So now if you go to Drupal, you can see the CK editor 5 sits there right in the core modules and CK editor 4 You can install as a contrip module and it also labeled deprecated so you can still use it but not for long because I Think officially the security coverage is Stopped so it says quarter quarter two so we get a month or so and Drupal community Pledge to support the security for CK editor 4 until the end of this year So you can still use it, but you don't have a lot of time and Upgrade path is quite simple So you go to your Drupal text formats and what I would recommend so a couple of tips from someone who upgraded a couple of websites is that Create a new text format don't go to existing text format and bump it up to CK editor 5 first of all You're gonna lose what you already have second It's just a good to compare and convert And see how it works not necessarily your data would be converting nicely from CK editor 4 to CK editor 5 Same thing. There are a couple of bugs when you go and switch CK editor 4 CK editor 5 in text formats You might get an error because of styles are not populated and things like that So there are still few issues to be ironed out. That's why I recommend to actually Go and create a new format and then compare them Another big thing is allow tags are hard-coded unless you're using the full html format You actually won't be able to go and put specific tagging say I want iframe you can't do it You need a plugin to do that Well, this how CK editor 4 look for admins And This is how toolbar used to look It still looks like that CK editor 4 and this is CK editor 5 Not sure it's a big screen, but you can see the the the buttons itself once you change it for the first time You'll see they're more tap-friendly They're actually quite nice and design is very good But apart from that you can see there are fewer buttons there as well this one actually with a few enabled plugins And that's because it's a work in progress. So we cannot just go and pour the whole thing That's why a lot of people are waiting for Specific features for CK editor 4 to actually my CK editor 5 to my grade and we're gonna look at what's actually there and editor experience is Important so when you're editor, I think you need to know what's available for you before you start jumping from technology to technology Which plugins actually made it? We're gonna look at the country modules as well And we're gonna look at the modules that actually using core CK editor 5 functionality as opposed to building their own or Trying to kind of integrate both So what's actually in a Drupal core if you go to the assets CK editor 5 you can see all of them there and they're all available in That's all available in github. So we're just gonna go quickly and see what's there So we know what's actually in CK editor 4 So essentials plug-in cover things like clipboard enter select shift enter Typing and undo things things that we thought we actually you know were given for free. They're all there now It's a plug-in again. They're using their own data model. So they actually have to define it that gets more interesting So HTML support obviously it is a HTML editor after all so there's HTML support supporting your HTML structure Now basic styles so bold italic underscore cross. That's all also superscript and subscript That's all considered a basic styles. So we all use them Alignment also pretty simple left right center and fill in the gaps Block quote. So if you want to quote something you can see this nice and gray Line you can go select particular text click a block quote and it's there available as a separate plug-in Code block. So if you are writing blocks technical blocks, I want to highlight specific code There are preset Languages like you can see here C sharp CSS you can use diff for git so you can actually Create a code block and select what type of code is available there Heading I Didn't update the Screenshot here. So heading obviously is the header one header two up to header six available where the paragraph is Horizontal line again simple nice and gray horizontal line in between your code Then there is image so upload image and insert image with a number of options Like there's alt text on the bottom. There is also Aligning it to the left and right and depending on your context like sitting on the same line or mixing with the text Identation so getting your block of text Identity to the right if it's left to right or to the left Language so we can have there is support from left to right and right to left We can actually specify with a drop-down which particular language we're using this is available in the core as well So again, nice support for other languages that use right to left They shouldn't that okay now link simple link So as you can see there is not many parameters there so you can just insert the link by selecting the text list numbered list and numbered list Pretty simple you can see the examples there Paste from office or as They called paste from word as well So just processing a lot of word stuff cleaning it up That's a specific plug-in used for that and it's available in core removing format So if you have very heavily formatted text that you want to make Unformatted there is a button for that Source editing so we covered the HTML support now there's source editing So source editing is quite interesting if you play with the demo on the CK editor website It's nice and neat and sits in one window, but be careful if you're doing it in Drupal core I'm editing the timetables for the Drupal south and That's not it. That's probably like third of it So think about using paragraphs a multi-field in case you do a lot of HTML editing That's my advice, but by default it actually goes once you click source editing and goes full height of the source special characters If you want to put some pounds on your website Style now style If you use the cater five a lot of people have a live and hate relationship with the styles It's actually quite good because what it I find like our clients love it because you can actually create a bunch of styles based on a design and Give it to them in a drop-down and they can see it Now it's an excellent idea, right if you're bootstrap user like things like pills or now they called They called like What was that? badges yes pills badges you can actually put all styles there allow them and Yeah, and all you can do in the configuration screen. You just go and say here's the name of the style Here's what it does. It's a deep tag with the thing It can't do a very complex thing, but something like deep depth deep tag with styles. It can do Spam tag as well. So you can actually it can do a lot with that But as I said great visual tool, so but there are a few issues first issue Obviously, we all know that from paragraphs Well, I know that from paragraphs that once clients see something They want more of it and more of it and more of it and you end up with 40 types of paragraphs same with style So be careful of that eventually it goes there then there is a Set up as I mentioned before when you migrating from CK to 40 CK to 5 There are a couple of issues that are not ironed yet You might get in trouble and won't be able to save your changes. So if you're doing it for the first time Change to CK to 5 save your changes first then mark around with styles. There is there are some issues with styles I also recently couple of days ago. I saw the issue with disabled styles For example, if one user role doesn't have access to all the tags and only number of plugins They would still see the styles. They would be disabled. So they would see this Array of disabled text. They won't be able to click on there is an issue for that as well So come to the code sprint if you want to work on something like that But yeah, be careful with styles that great tool and like here's a good example We built for the client the buttons. They just go select the text create a button, you know Have it all in their drop-down style. They're happy. They have the four colors five the like and yeah, here we go. They don't need to know HTML Table so table is considered one of the major improvements from CK to 4 to CK editor 5 The first biggest change is no more models models made it hard to do now. It has very nice and easy interface Very similar to Google Docs I'm not sure about word. I haven't created table in the word, but you've probably seen this interface before Yeah, row and column selection. So if you see Keter 5 you couldn't select single row If you knew that I didn't I Want to test it and now you can you can select and apply different styles to just one row part of the row multiple cells and Then there is also other things like you can convert into the header columns You can make a row header row can delete the row insert the row you can merge things You can add the extra information on top on the bottom of the table. So tables are quite large again List is quite big and we went through most of them. There is only couple that sits like an engine Extensions, but we pretty much that's what's in the core as of now 9.1 is coming out in a couple of weeks and we're gonna have a couple more things here But I once also wanted to mention media media doesn't use the core CK5 plugin, but it allows you to insert Drupal media be it a document and image a video a remote video so you have a media button there and You have a media selector thing From admin perspective is quite easy. You can allow or disallow admins to Select the display mode if you have multiple display mode for the media and you can even say which one you allow or disallow From admin perspective. So the user can for example say I want this media display the thumbnail and I want this media display other white image Now let's go talk about contrib modules. So There is a quite a few modules available some of them work some of them do not work I tested everything here that I Kind of present about and actually move one module to work to be done Although it claims they have CK5 support So make sure you test the module first most of the module also needed some sort of a patch Because it's Drupal 10 or because actually there is something that crashes So yeah, when you test a new module for CK editor 5 just tested thoroughly first Before showcasing it. So today we're gonna cover four modules font color Which I mentioned before is a plugin find and replace another core plugin That didn't make to the cool Drupal core Bootstrap grid and CK editor accordion things that you can do with CK editor They kind of take CK editor to the realm of the Gothenburg editor But also with that power You need to know what you're doing. So font Color pretty simple You select the color for your text and the color for your highlight. There is a Yep, so there is a CK editor 4 play a module and there is CK editor 5 Module looks pretty simple. So you can see two colors and you can do different things including Yeah, just Get your content up there so everyone can notice Everyone loves colors Oh find and replace find and replace again core plugin for CK editor Finding things and replacing things. I've seen quite a few clients use it for CK editor 4 Now you can use it with the module again CK editor 5 if you go CK editor 5 on the replace Google gonna give you CK editor 4 version So make sure you look for CK editor 5. It's a separate Module altogether. So the links are all gonna be provided in my presentation. So you can actually find it It's not I found it's not easy to find the especially when you know CK editor font was around for quite a while and CK editor 5 font just or finding replace just appeared Google doesn't always give you the results. So be careful And again, this is me testing it in Drupal on my content looks pretty good Okay, so CK editor bootstrap grid. This is a quite a complex module It requires from content editor the knowledge of grids how they work and a mobile design and different breakpoints So if your content editor is quite savvy or they don't mind to learn This is a great module great from my perspective because I actually know how those tables work It requires quite a bit of configuration, but this is what users see So when they go to CK editor and say at me a column you can actually have one to twelve column layout You can filter them out From admin perspective and give them only one two three four columns. Don't give them twelve I'm not sure why they would want that unless they build in tables But they might and then you choose the layout again This is all configurable and you can go to each specific breakpoint And you know bootstrap has a really good breakpoints for different devices and you can actually specify different things Including how do you want columns be displayed? including do you want add extra classes and Then you'll get this nice thing actually forget to mention one thing this yellow Enter signs. They're great because how many people Put the table in the CK editor for and then couldn't put the enter in. Yeah. Yeah, that's that's what it does It actually puts the new line after the element, especially complex element, and they're great great time savers Yeah, so this is an administrator review again as I said you can filter them you can filter allow breakpoints and You can go like if the configuration screen I try to take a screenshot of partially open and I just didn't bother because Extra small has only three lines, but you can see I didn't even open available column layouts And it just goes into this by the web So you need to spend some time to configure in it But once you configure it and once your content editor knows bootstrap That's going to be a massive time saver considering you dealing with a lot of layouts and One last country module For fun. It's a accordion again. We all love accordions Same thing when you insert the accordion enable the module insert the accordion. It's pretty simple. You have a raw Title and raw content and you can insert the raw below and above and That's how it looks so the configuration is pretty Simple and yeah admin can configure that one thing I found Interesting yesterday that I actually were able to type in the accordion in a plain HTML thing I was late at night and I didn't bother. I said no, I'm not gonna even look at it But there was some like extra thing that I didn't expect maybe we're just too late Okay, let's talk about the future. So in the last couple of minutes, let's cover what's actually In the future. So as of now, we have Drupal CK We have CK5 in the core. We have bunch of country module and I only show you a few things and But there are a couple of new features coming in as I mentioned before Drupal 10.1 a few weeks away. There is already beta available for you to test So first thing that comes in its auto formatting So what auto formatting is the ability to enter the content without using the buttons? So it's a mix of MD editor So you can put star star star and that would make font look bold You can do the same thing for tables for at least for everything The only issue I read through the whole thing It was no one knew if it's accessible or not and in then it was kind of I think the consensus was yeah It's accessible enough so we can check it into the core. So that's coming in 10.1 And also extended code block support There is plenty of features available in CK editor plug-in and doesn't mean they all available in core or in the module and one of the example was code plug-in Remember I showed you the drop-down you can select the specific language the programming language Well, you weren't able to add the new one now you can So now so thanks everyone who contributed it. I actually the first screenshot I did was Ready to be released and I redid the screenshot last night and it was fixed So it's coming in triple 10.1. So thanks everyone who contributed to that or to pretty much any module and I think that's a wrong screenshot, but now you can go to admin mode and Set the new language and what sort of format you want it to be Right so you can select triple and put it as PHP There is a warning in Drupal 10.1 release notes is that if you use Code block in your profiles or modules make sure you go and update because the configuration changed quite significantly Oh, here we go. Here's a screenshot so you can go and say here's a format and here's what it's called So that's when you configure in plug-in for CK editor 5 so If you listen to the podcast they put in the end the creator say it's all about long-term collaboration So they said actually Drupal community were great to them because they collaborated throughout the last You know number of years where it's a lot of JavaScript frameworks. They're very quick They jump in they do what they need and they get out because the project is complete. So they actually said would benefit a lot I think it's a great Example of how we can collaborate with other plugins Roadmap as they say it's community driven again another reminder that CK editor 4 end of life end of this year and exciting things to be I Think security certification would be awesome to have for the obviously proprietary or for the commercial license That's a reminder for CK editor 4 so you can help as well. There is a code spread coming in so come along Help test issues help go through issue queues I'm developing the developer version of the talk for Vienna this year as well So that's going to be all about developing nothing about content editing So that would be the talk would be a base or kind of version one of the talk So tomorrow we're gonna look at a few things anchor link a lot of people ask for anchor link Then there are issues there link it which I wanted to put in first and they say the support is in but I couldn't see the button pulling it There maybe there's something I just missed but again, that's what we're gonna work at the code spread on Friday The details are on a website where code spread is if you didn't register you might need to register So check the website and talk to the organizers a couple of references. There's a great podcast in source available on YouTube Talking Drupal about CK editor with owners not creators of CK editor and there is also Prague 2022 talk which is talks more about premium features and Actually CK from the creators of the CK. So, thank you very much. Thanks for coming and do we have any questions? yep, so the question was when we created the new format for CK editor 5 did we have to migrate the content? So first thing when we actually get the CK editor 5 first first thing we did We just converted the format straight away and then got some nasties in but majority was fine But yeah, now the process is to create a new Format text format test a few pages that you think might be tricky and then just run the upgrade script that upgrades the CK editor format for the whole website. That's that's the process we're in at the moment Considering that those websites don't have more than three or four thousand nodes Pretty much. I mean unless you're doing it all in production Yeah, I found some clients are really happy to jump on it some clients say oh we need time to transition so it depends I Do now use it for testing purposes because I had a Lot of experience with it, but I do like to give it to the client when it's thoroughly tested and again depending on what sort of Initial content you're dealing with sometimes it actually improves Just by switching the format and sometimes it's not so yeah, you just need to know your content as well There are a couple of tools that can help you say how many tables you have The stuff that can give you grief or some complex divs that Link to JavaScript and all this stuff, but if the content is plain I didn't see a lot of like troubles to actually convert That's that answer a question