Filed Under

Transcription

I’m a huge fan of Layout Builder and Drupal, but it’s not without its challenges. Today we solve one of those buggy little issues that’s been driving me crazy for months.  I’ve got to be honest, I didn’t solve it. A guy named Bert Vivie over on the Drupal Slack Channel had the same issue, and, well, figured it out. Literally, it’s two lines of CSS. 

I’m on a site that I built for a client called LibertyHall.org, and here we are in Layout Builder. And as you can see, if I click off the source code, well, of course, you get the full body field, right? But sometimes you need to edit the source. Well, click Source, and it automatically goes to one line, which is pretty much impossible to use. Well, literally, it’s two lines of CSS. I’m going to head over to Configuration, and I’m using Asset Injector here temporarily until I get all of the actual CSS done the way I like it. I’m going to scroll down to the bottom here, and I’m just going to paste in the CSS.

It’s going to be in the description below, but it’s literally pretty simple. It’s one line to make sure that text in the editor is black so we can read it, and another line makes the height of the text area 100 inside of CKEditor. Alright, so now when I click on Source, I’ve got a full 100% height for my source code window, and I can add all the code in here I want.

Well, what can I say? The beauty of the Drupal community, like most open-source communities, is that people share. So, if in Drupal Slack, head over to the CKEditor 5 Channel. Take a look at the comment he made. He highlighted the problem and then, well, fixed it himself. As I mentioned, the CSS is in the description in the video, so hopefully, that’s helpful to you. It’s been driving me crazy for just a little. Well, thanks for joining me today. This has been OS Tips from OS Training. For more information about Layout Builder in Drupal 10, head over to OSTraining.


 .ck-content { color: #000!important; }

.ck-source-editing-area textarea { height: 100%!important; }