CKEditor code snippets trouble

Help
1

Enonic version: 6.15.5

I’m trying to enable the code option in the new CKEditor, and have included it in the confiig like this:

Body text * Styleselect Bold Italic Underline | Code | Table

-which the 6.15.5 docs states is an allowed additional tool. However, as the other elements appears, nothing is indicated for Code, it doesn’t seem to appear at all, the space which it should have occupied (I assume it should be an indicator of some sort like for all the others) is just not filled with anything. Is it a bug, or am I missing something here (other than literally) ?

Also, if one would desire the CKEditor-plugin for Code snippets, it must be built online from the CKEditors page, according to their documentation. Is it possible to include it with the Enonic builtin CKEditor? If so, how does one do that?

1 Like
2

The Code plugin (which is actually the Source plugin) is located not in the toolbar like other plugins but in the footer, the bottom right corner of the editor.

image

If it’s not there, it means that current user lacks Content Manager Expert role that allows access to this tool, as described here

As for the second part of your question, do you mean if it’s possible to build custom CKEditor plugins and plug them in to XP? We currently don’t support that out of the box, no.

3

I see, that explains the missing element:)

Yes, that’s what I mean… Then, could it be a nice to have at some future point?
The current - code element is not very flexible , or perhaps I am using it wrong…

If I use it like this:

image
what is rendered, is like this (the border and background I’ve added with css)

image

So linebreaks and indentations are lost, and the example is much harder to read… is there any way to keep the formatting for code?

4

I believe you are misusing it :slight_smile:
This plugin is used to work with source HTML code of the HTML Area.

If what you need is code markup then you simply paste the code into the HTML area, then select it and choose “Code” from the Formatting dropdown menu.

image

Also, most of the time the editor tracks the pasted content and correctly wraps it with the code tags if you paste it from an IDE so you don’t even have to do anything.

5

Actually, what you did was (almost) right - I overlooked the <code></code> tags. Just wrap the entire contents inside <pre></pre> tags and you’ll be fine.

So it should be

<pre>
  <code>
    your code here
  </code>
</pre>
6

Aha - yes indeed, that did the trick! Thank you!

1 Like