 everyone. Well, what is CK Editor? This is the point. Well, there is a short explanation here available in the website that is, WhizzyWig is an online editor to edit HTML documents in the browser. I would say that is much more than that, and I will explain. Okay, well, just to introduce myself, my name is Renato. I'm a software architect at CINT. I'm making systems for Johnson & Johnson that is a huge healthcare company. I've been working with Drupal for eight years, starting with Drupal 7, 8, 9, and now 10. I have focused in my life in the open source activities, so my master degree in the Drupal community as well. So I am a maintainer of more than 50 modules in the Drupal community, in the Drupal.org. And about the English. English is not my mother language, to be honest, but I'll do my best. I will try to explain in an easy way for everyone, but if you don't understand something, please let me know and I can try to explain in a different way. Okay? If you need to contact me, feel free here. Okay? Well, this is the agenda for today. So the first one, I'm going to talk about the highlights with the CK Editor 5. After that, I will explain how to use that, and I'll make a short conclusion with my opinion about that, and I will open to questions in the end of the presentation. Okay? Well, so the first point here is CK Editor 5 is now stable. Okay? Well, it was experimental since Drupal 93, and it's stable in Drupal 95 and 10. And about the highlights, well, I have separated in free and premium. Okay? Because in the free highlights for CK Editor 5, we have user experience that, in my opinion, is the best one. Now we have like a pop-ups for the link, for example. And we have media integration. We have image management, so you can use drag and drop. You can resize your images and et cetera. You have markdown support included in Drupal Core. So you have automatic text transformation as well. You have font colors, background colors. You have font size and font family as well. And the last but not least, CK Editor API, where you can create your own custom plugins for CK Editor. About premium. Well, in the premium version of CK Editor 5, you have the real-time collaboration that is very similar with Google Docs experience, for example. Well, so you have like support for suggestions, tracking changes, comments, and cross-platform. So in the tracking changes, you can work with revisioning. So very similar with Google Docs as well. In the cross-platform here, you can import from documents from Microsoft to Word, for example. You can export to PDF to doc as well. So it will work fine. Yeah, you can export data into PDF or Word. Well, so let's get started. So how to enable the CK Editor 5? Well, you can enable that in the CMS, in the Drupal 10 here in the configuration, content altering, text formats and editors. You can click in configure. So you can use the drag and drop to change from CK Editor, the full one to CK Editor 5. Just that. Okay? I really recommend you to take a look on this documentation because if you have custom code created for CK Editor 4, you need to take a look on this documentation about how to migrate. Okay? Well, talking about the new possibilities in the CK Editor 5, one of them is the better user experience. So now you can use, like, link pop-up. So, for example, you can click here and insert your link. So that's awesome. If you can modify, you can click in the pencil and it's available as well. Drag and drop. So you can click in your image using drag and drop functionality. If it works fine, you can use the image resize to click here and transform your image inside of the CK Editor as well. You can use the alignment to put that in the left or in the right if you want. Okay? So let me show here. I have it running in my local here. Well, this is a link for Google. We can double click here. Click here. So that's okay. So we can modify if you need. It will work fine. Okay? So let me see here about the drag and drop. You can get the image here using drag and drop here. It will work fine as well. So you can use this. It will work. You can put in the left, in the center, or in the right. It will work fine. Okay? Well, let me see here. About the media integrate. Just before going forward, that one that I was demonstrating here is included out of the box in the Drupal 10. So it's not necessary apply patch. It's not necessary install any additional modules. Okay? So just Drupal 10. Okay? About media. Media, it's a gallery where you can select your images to include inside of the CK Editor. Like this example. But let's remember how it was before media, right? Before media was able, we were able to upload images using the base upload and it was working fine as well. So we can click here and select the image here. We can upload the image and it will work fine. But let's suppose that we need to reuse the same image in another content, in another node, for example. It was necessary to upload again the new image and insert again. It's worked, right? But the problem is the duplicated files, right? If you go here in the content files, we can see that the content was duplicated here, right? So now to solve that, we can use media and select the same image here in the image gallery. It will work fine. So it's not necessary upload again. We can just reuse the image and it will work. So how to integrate the CK Editor 5 with the media? So, well, three steps. First, enable media is included in Drupal Core, configure the texture formats and after that, insert the media button inside of CK Editor. Well, so to enable media, it's not a big deal. Just enable the two modules here and save. Just that. Now the second point, clicking the configure in your texture format, you can enable this checkbox here that is new now and just save. The second bullet, it's okay as well. And now the third one, just configure again using the new button is available here. You can use the drag and drop and save. So that's okay. Awesome. I think just that. Now inside of your CK Editor, the button is available there. You can click, select your image and it will work fine. Okay. Let me see here. This is one version of the before. So let me put here one logo. Okay. So node one. Let's save. That's okay. Now let's add the second node here. Logo again. Now node two, right? Okay. So if you go here in the content files, let's take a look here. So the logo was duplicated, right? So let's go and change that for media, right? So let's enable the both modules here. That's awesome. Now let's enable the new button. The new checkbox, it's available here. So let's enable that and save the configuration. And that's awesome. And now the last point here is insert the media button here inside of our activity toolbar, just that. Okay. So let me save here. That's okay. So now let's try again. So let me see here. Add content page with HTML. Okay. Node one with media now. Now we can see that the media button is here, right? It's our first image. So let's upload that logo. Let's save. Now it's here available in the gallery. And let's save. That's okay. Now let's insert the second node but now with media. Node two with media now, right? Okay. So let's click in the media button. It's not necessary to upload again, right? Because it was uploaded before. So we can just reuse that. That's awesome. So we can save here. Okay. It will work by default out of the box without any additional module. Okay. So let's go ahead. Let's talk about the plugins available in the CK Editor 5. Well, the first one here is the spell checker. You can analyze your text just to verify if there is some mistake, some grammatical issues. So we can click here, see the error here. You can click here and make the fix automatically. Okay. Auto save button as well. So your CK Editor is saved here. You can modify. So the title is now is saving. You can stop typing here and now it's saved. So that's nice as well. Marked out support. This is new, super new to be honest. Because this is a markdown. So you have a specific syntax for markdown code like this one. And it will be converted automatically into a CK Editor like this. This is included in the Drupal Core. Okay. In the version 10.1, this is the issue. I work on that issue as well. So it's super new and it's available now. So now you have this, for example, this text. You can put here like acedisk, acedisk. This is markdown enclosed with two acedisks. And it will be converted automatically. Okay. Let me show you running on my machine. This is my markdown here. Underscore, underscore. This is my text. Underscore, underscore. That's done. Okay. So one underscore only. This is my text in italic underscore. That's done. Okay. So it will work fine as well out of the box without any additional module. Let's talk about phones. So you have support for a font family, font size, font color, and background color. Like this one, for example, you can see on that documentation that we have different fonts and we have different font colors, different background colors, different font size inside of the same CK Editor included by the phone. Okay. So we can change here if necessary. We can change the colors. We can change the background color if necessary. We can change the font size and it works fine. And how it will work in Drupal? Well, in Drupal you can enable the module CK Editor font. Okay. With that, we will appear a new button for you, like this one where you can use like the drag and drop and font size and font family as well. It will work fine. Now there is additional configuration that we need to do is like the hex code of your color and the label of your color. Just that. After that, it will work fine. So you can see here, for example, you can click here on that button. You can change the color here. You can change the background color as well. Tables. Well, tables now in the CK Editor 5, you can modify and you can create amazing tables with different styles like this one. You know, so as you can see here, this one is not included out of the box in Drupal Core and it's not included in any contrib modules, at least not for now. But there is an issue in the Drupal community and there is a patch that is available. You can enable that validation test. You will help in the Drupal community as well with your feedback. I tested that patch and it's working fine. So, for example, you can click here in the table, insert the columns, insert the lines that you want. We will appear a new button for you, this button here. That is Table Properties. You can click here and you can modify, for example, like the border. You can modify the color, put the width if you want and you can save here. So it's different, right? Now there is a new button here, Cell Properties, where you can select as well. Like the color here, like in gray, you can change the cell color for one specific cell, like red and other one in blue and it will work fine as well. Okay? Let me show you working here in my machine. Well, this one here is related with the font. So we can click here and change the color. It's hard to see, you know, right? But let me change here the background color. It's working fine as well. So now the table, it's here. So we can click here, insert the table, like with two columns, like name, I don't know, team, Renato, like name, Booz, staff, Golden State Waters. Okay, so now let me click here in the new button. The new button is available here, Table Properties. We can click here, for example, Solid, like you can select our color. We can use color with here. I think that's okay. And now the header, so oops, I'm sorry. Like this one, let me change the background color here. That's okay. And now let's modify this cell property here, like to red, let's save, and here, to blue. Okay, that's awesome. You can customize in the way that you need, okay? Now about the to the list, now inside of CK Editor, you have the support to the list as well. So you can use, like, checkboxes, like that one here. And you can use, like, this new option here. Okay, Code Block as well. So it's included by default. You can click here, insert Code Block, and insert your code here. It will work fine. HTML Embed. Now, like this one, this one, you need to install a new module, CK Editor, HTML Embed. And with that, we'll be available this new button here, the same approach. You know the drill, using the drag and drop, active toolbar. It will work fine for you, like this one here. You can click here, insert your hello word here, and it will work in the front end as well. Okay. Well, custom plugins now. Well, how you can create that, there is a documentation here in the CK Editor about how to create plugins. But it's basically three JavaScript codes, okay? The first one is the definition of the plugin. This is the JavaScript where you can define, for example, a timestamp that will extend the plugin. Timestamp is just one example for that, okay? You can create your own custom plugin. On that case, it's a custom plugin that will implement a timestamp button inside the CK Editor. So the first JavaScript code is this one. The second one is to do, like, a registration of your button. So, for example, button here, button view. So you need to import the button view, and after that you need to put a label for your button. And now the last one is the action that will be executed when we click on this button, okay? Well, the action will be this one, button on execute. So we are defining here a constant with the object date. And after that, we are putting that in the string, okay? So just to work in that, we can click, this is the button available. If we click here, the timestamp will appear here, okay? That's it. That example is available in the GitHub. So if you want to test, so you can do that, okay? Now let's talk about the premium features inside of CK Editor 5. Well, the first one is how to configure the premium. So, well, the first one, you need to buy a license. Or, of course, if you need you, you can use the trial version where you have like 30 days to validate that. You can use this link here. My deck, with my slides, will be available for you in the end of the presentation. There is a link. So on this link here, you can get the trial or you can contact the sales to buy a license if you want, okay? After buy a license, you can enable install this module, CK Editor 5 premium features. So it's a regular module. You just need to enable them here. So after that, we will appear a new configuration for you, CK Editor 5 premium features. On this configuration, you need to insert your license key here, okay? The license key will be available inside of dashboard of the CK Editor. You can click here and manage, copy your license key here and paste here, okay? I have a feedback for them because in my personal opinion, I think this one should be at least a support for encrypt. For now, don't have, but it will work fine, okay? So just that. This is the documentation for that if you need. So it's very, very easy. In my first time trying that, it was able, so it's not... I would say that is not a big deal, okay? Well, so that's okay. We configured. Now we need to enable the premium features inside of Drupal, right? To enable that, we can go here. So the same idea of before. So we have new buttons here, like export to PDF, export to Word, import from Word, comments, tracking changes, revision history, and etc. Okay? So well, the first one is about the comments. So as I told you, similar with Google Docs, you can click here and insert a comment, like this feature is two. This is the first comment. I have the second one here. Okay, I agree. So like tracking changes, the revision. We can insert here, like initial version. We can save our version here. Let's imagine that we are adding this new paragraph and we can save this one, like an adding a new paragraph, and it will be available here. So added by user. Okay? And the suggestion, the same idea of before. So let's imagine that we are saying here on this paragraph that CK Editor 5 was created using ECMAScriptive 5, but actually is ECMAScriptive 6. So we can just click here, suggestion, modify here, so replace ECMAScriptive 5 to 6, and we can answer with comments if we want, and clicking accepted suggestion, it will be done. Now that's okay. So now the cross-platform, so we can use the integration with Word as well, like you put in here, import from Word. We can click here, select your document, and in part that will work fine. And to export to Word and PDF as well. So there is now a new button here where you can click here and export, or click here to export to PDF, and it will work fine as well. Okay? So that's nice. Let me show you working on my local machine, the premium features. Okay, so now this is enabled, so let's put a comment here, right? Comments. This is the first comment. So that's okay. And now I will open an anonymous tab just to see the same, let me refresh that page here, just to see the comment there. So it's available here. So, Renato, did the first comment. This is the second one. Let me apply here. So that's it. So it will work fine. Okay? Let me do another one. So, for example, let me add in a new paragraph. That's okay. Let me click here, save our new revision here. Okay? So let's save. So that's okay. Now let's change to the other user in the anonymous tab. It's here. We can just click here in the revision history. Open revision history here. Let me open here. Our new revision here. So it's available here. Okay? If it works fine as well. And the last point here is about this one, for example. Let me put a suggestion here. So we can click here. Click here in the suggestion mode. I am suggesting something here. And let's change it. Something like that. And oops. I'm sorry. Done. That's okay. Let me change to the other user. Back to edit. So the suggestion is available here. We can apply the suggestion or deny if you want. Let me accept you here. Okay? It works fine as well. Okay? And of course, the last one here, let me see. So let me import one document from Word here. So like import from Word. This one is my document. So it's available here. If I need to export, just click on this button. Export. So my document is here. Now I can open that using Microsoft Word, for example, if you want. So that's okay. Or if you prefer, you can export that to PDF. So only the content inside of the CK editor will be exported. Okay? So that's done as well. Okay? So, okay. So let me do a short conclusion about that, about my opinion about CK editor 5. Well, the first one is the evolution from CK editor 4 to CK editor 5. Well, so we have many new possibilities. So the user experience is better. A lot of stuff now is available in the free version. So I think it's very, very good. Okay? So the free capabilities are amazing. So if you don't want to buy the premium version, the new version of CK editor is amazing. So you will love that. Of course, if you want to use the premium, I would say that is much better. So it's another level of user experience. So I think that's awesome. Well, in my personal opinion, it's not so perfect like that because I have some feedbacks for them. So, for example, about the to encrypt because we are using a license key that is a premium account. So if we are putting that inside of Drupal, everyone that has access to admin side configuration will be available to get the license key. So I just reported an issue here with that suggestion is a future request. We can talk more about that, but it's one possibility just to improve that. So I would say that is not perfect, but this is awesome for user experience. Well, and the last but not least, the community is working hard. Okay? So some features are ready in the Drupal core. Other features are not in the Drupal core, but are ready in the contrib modules. And some features, I would say that is in progress, working progress, or in the Drupal core or in Drupal modules or in patches like that one that I showed you that I was demonstrate to you. And the last point here is this lack of CK editor five. We have a lot of person working hard every day. So if you need something, please let us know. We'll be a huge pleasure to talk to you. Okay? That's it for today. Thank you so much for coming. Okay? Do we have any questions? Feel free. I'm sorry. Go ahead. Feel free. Well, for now, if you have some some possibilities to modify like what in the way that the the import from word, I would say that there is no this possibility by default inside of the the CK editor premium features. Maybe we can open a future request, but the configuration for that is very simple. And I need to say that this one, if I'm not mistaken, is an experimental module. So for this reason, it's very, very simple. Let me see if I can find here. I think I have this one open here. So let me get here. So extend here, premium features. Let me see. Yeah, this is experimental. And for this reason, it's very basic. Like the configuration is like enable or not enable, you know. So I would say that for now, we don't have this possibility, but of course, it's a valid feedback. Yeah. Yeah. Makes sense. Totally agree. Thank you so much. Go ahead. Yeah, it's a great question. Just to confirm if I understood correctly, the drag and drop in the images, right? This one is working fine only for files. It's not working for media. Yeah, I don't know why, but yeah, you are right. When I was demonstrated for you, I was demonstrated without media. If you enable media, the drag and drop will not work. Good question, I think. Go ahead. Yeah, on that case, that one that I was showing, let me get here. Yes, this one is a Drupal slack, like the normal Drupal slack where you have a lot of different channels. And there is a specific channel for CK Editor 5. Yeah, I actually, I don't know if you will have more than that. I would say that this one is like the only one that I am using. And yeah, we have support for for a lot of stuff. But yeah, I would say that is good to send on this one if you can, of course. I think it's better to like to centralize. We have wing leaders that is working hard there. So yeah, if you can, I would recommend using that that is inside of Drupal slack. If I'm not mistaken, you are able to go there, like on this one here. Drupal.org is less is lack. If I'm not mistaken, let me see. Yes, this one you have like the full instructions to go there. And yeah, feel free to take a picture and we'll be awesome. Go ahead, feel free. Well, about the comments. I would say that is out of the box of Drupal. I think it's totally different. If you can say when I was adding a new comment, I didn't save the node and it was available for other users, you know. So yeah, probably is external service that they are using. So it's not necessary save anything. Let me show you one example here. Okay, comment one here. Okay, I didn't save the node, right? Let me change here to another user now because I am logged here with the user Renato. Let me change here. Now I am logged here with another user staff. Let me see here. Oops, the comment is here, right? Yeah, so I would say that is very different. So probably is external web service. Okay. Go ahead, feel free. Okay, about the table, right? Actually, I don't know if it's the HTML table to be on next. I think, for example, if you copy and paste a HTML table, copy that and paste inside of the CK editor. I don't know if it works fine. I think it's a valid test. Actually, on my machine here, it was necessary to disable the source code HTML because I am using the premium feature, you know. It's a good point as well. Just to let you know, if you enable the premium feature, you must disable the source code. And for this reason, when I insert the table, I wasn't able to go there in the source code to validate if that table created by CK editor is a HTML table, you know. We can validate that. It's easy. I just need to disable the premium feature. And after that, I can validate that. And I can do a test, like copying a table in the HTML and pasting inside the CK editor, right? It's a good question. I think we can validate that. Thank you so much. Go ahead, Fufri. Okay. Just repeating the questions to be available here in the recording because it's an important question. If there are some plugins available for accessibility inside of the CK editor, right? To be honest, I didn't validate for now, but I agree that is an important point because I was in another session here at DrupalCon about the user experience. And if we put the possibility available for the CMS editor to modify the font color, the font family, and to modify the HTML, so we can have a problem in the editors, right? We can have a problem in the accessibility. So for now, I don't have a suggestion in top of my head, but I think it's definitely an important point that we can search for and maybe talk in the Drupal's lack just to get some suggestions. It's a valid point. Thank you so much. Go ahead, Fufri. Go ahead. Yeah. It's a great question. Just to repeat in here. She is in the process to migrate into Drupal 10, right, and migrate from CK editor 4 to CK editor 5. Yes. There is a link available with all the modules that is prepared to CK editor 5. And you definitely can think a look on that. It's not available here in my presentation, but if you can contact me, I will share you, okay? But it's a basic table that was created by Wyn Lears from Acre, if I'm not mistaken, and he's the responsible to make the track from CK editor 4 and CK editor 5. About your custom modules, I would say that this one will be useful for you. Let me get here. I think this one here. I think this one will be good for you because there is like a step by step about how to migrate, and we know that this part is the worst part, migrating from CK editor 4 to 5. So we are in the same in our project. So I would say that if you are using CK editor 4 without some custom modules and without a lot of plugins, it will be easy. But if you have a lot of them, so definitely it's necessary. My pleasure. Go ahead. Okay. Out of the box, I would say that we don't have, but it's definitely a good suggestion. So probably there is an issue inside of Drupal Core in the Drupal community about that because it's an important point as well. So I would say that out of the box, there is no, but can be available in like in working progress, like in some patches, like this image of the table. The table is not included in the out of the box in Drupal Core, but we can apply the patch. The Markdown as well, when I was starting doing that, the Markdown wasn't available. And during the process of creation of the session, the Markdown was committed in Drupal Core. So yeah, I would say that there are many possibilities with working progress, status, and this one can be one of them. Go ahead. It's a good question. If on this case, we are going to continue support IMCE. I think that table that I was mentioning before, you know, with the support for Drupal Core to CK Editor 4 to 5 is a good place to take a look. I do about specifically about the IMCE, I don't remember in top of my head. I think we need to take a look there just to confirm that. Yeah, so I won't say something here about my guess, because I can be wrong, but I think that table is a important one to take a look at. Thanks. Go ahead, feel free. About the tracking changes inside of the premium version, right? Okay, but just one question. Let me confirm here. About the tracking changes compared to Drupal revision, right? I would say that is not related. Yeah, I would say that is totally different because let me show one example here. On this one here, I will just save that one without any modification here. I'll just save. Okay, save it. Now let me edit again. And now let me click here in the revision. Open revision history. So we can see that was an inch to save here, right? Awesome. But now let, now we will not change some, we will not save here. Let me put here some, oops, modification here. And let me put a comment here. This is my comment. That's okay. So it saved, right? Okay, but I didn't execute the inch to save. If I go here in another user, I can see that the modification is here. This is my comment is here as well. But if I open here, the revision history, the only inch to save was before, right? So we don't have a new inch to save it with that. So it didn't execute a node save, only the previous one. So yeah, I would say that if you go here inside of node, insert a lot of comments, for example, but don't save the node, it won't execute the node, the inch to save. And probably this new data won't be saved in your Drupal database, probably only in the web service. Exactly. This is not using inch to feature of Drupal. So it's totally outside of that. My pleasure. Any other questions? Okay. So I think that's all. Thank you so much, everyone.