CKEditor: Restrict to a single input line/row

[masslevel]

Hello, community!

Does anyone have an idea how to limit a Textarea field with CKEditor to just one line/row?

I'm using the Textarea field in a repeater and CKEditor because it needs to hold formulas. I would use a simple text field, but I need the formatting options like super-/subscript, underline etc.

None of the below methods seem to be working.

Are there any other methods you may know or have used before that can restrict CKEditor to a single row? Or should I use a completely different approach for entering/formatting the content?

I tried these approaches:

#1 Redirecting enter and shift+enter keys
https://stackoverflow.com/a/7991519
When the doNothing plugin is enabled CKEditor won't load on the edit page - the space is blank. There's a parsing error. I tried to modify the plugin - no luck.

#2 Using the blockedKeystrokes function that was introduced in CKEditor 4

• as a plugin (13 = enter key)

  config.blockedKeystrokes( 13, CKEDITOR.SHIFT + 13 );

  Getting: config.blockedKeystrokes is not a function. Tried also with editor.blockedKeystrokes

• in the config.js and config-fieldname.js
   

  config.blockedKeystrokes = [ 13, CKEDITOR.SHIFT + 13 ];

  is getting ignored. does nothing.

• in the Input field settings (Custom Config Options) in ProcessWire

  blockedKeyStrokes: 13, CKEDITOR.SHIFT + 13

  is getting ignored. does nothing.

 

Thank you so much in advance.

[dragan]

Try the MathJax CKEditor plugin

https://sdk.ckeditor.com/samples/mathjax.html

https://docs.ckeditor.com/ckeditor4/latest/guide/dev_mathjax.html

it should even be available with AdminOnSteroids (a highly recommended plugin with tons of tools, extras, helpers, customization options etc.)

Edited February 20, 2018 by dragan
added another link

[masslevel]

1 hour ago, dragan said:

Try the MathJax CKEditor plugin

https://sdk.ckeditor.com/samples/mathjax.html

https://docs.ckeditor.com/ckeditor4/latest/guide/dev_mathjax.html

it should even be available with AdminOnSteroids (a highly recommended plugin with tons of tools, extras, helpers, customization options etc.)

Thanks @dragan for your excellent suggestion. I will look into MathJax. Since I was trying to keep it vanilla/basic I wasn't looking into AdminOnSteroids but will definitely have a look now - thanks!

I'm still not sure how I could restrict CKEditor to a single line/row.

Since I want the data to be searchable, filterable and the output to be formatted in different ways in the front-end, I wanted to use a Pro Field Table or a repeater field for each entry/formula/ingredient.

I'm pretty sure that there will be many surprises in the rendered output if content editors are allowed to create new lines in the backend with this field ;-). I could post-process the output via a text formatter (paragraph stripper etc.) or explain it to the content editors, but limiting it to a single line/row would be a much safer solution in my opinion.

Looks like if the "doNothing" plugin or the blockedkeystrokes approach (which I'm not really a fan of) isn't working, there isn't an easy way to do this afaik.

[dragan]

I would probably strip any extra p tags with a hook.

It looks like all MathJax blocks create something like this:

<p><span class="math-tex">...</span></p>

It would be quite easy to just render the very first p tag which has the above span class .math-tex inside, and delete everything else.

I'm sure as time goes by, authors won't even try to add more than one line anymore

I also quickly tried some cheap CSS hacks, but they don't really work... e.g. restricting the RTE height:

height: 62px;
resize: none;
overflow: hidden;

 

[Robin S]

The suggestion here worked for me. If your CKEditor field is named "formula", create a file "config-formula.js" in /site/modules/InputfieldCKEditor/ with contents:

CKEDITOR.editorConfig = function( config ) {
    config.keystrokes =
        [
            [ 13 /* Enter */, 'blur'],
            [ CKEDITOR.SHIFT + 13 /* Shift + Enter */, 'blur' ]
        ];
};

 

[masslevel]

7 hours ago, dragan said:

I would probably strip any extra p tags with a hook.

It looks like all MathJax blocks create something like this:

<p><span class="math-tex">...</span></p>

It would be quite easy to just render the very first p tag which has the above span class .math-tex inside, and delete everything else.

I'm sure as time goes by, authors won't even try to add more than one line anymore

I also quickly tried some cheap CSS hacks, but they don't really work... e.g. restricting the RTE height:

height: 62px;
resize: none;
overflow: hidden;

 

Thanks @dragan. Yeah I might have to put in a hook anyway. Thanks for looking into it.

 

3 hours ago, Robin S said:

The suggestion here worked for me. If your CKEditor field is named "formula", create a file "config-formula.js" in /site/modules/InputfieldCKEditor/ with contents:

CKEDITOR.editorConfig = function( config ) {
    config.keystrokes =
        [
            [ 13 /* Enter */, 'blur'],
            [ CKEDITOR.SHIFT + 13 /* Shift + Enter */, 'blur' ]
        ];
};

 

This is actually working! I really thought I tried every syntax combination. Interestingly when you press Enter it puts the Save-button into focus on the page (in Chrome).
Thank you so much, Robin.

I guess I can go ahead and build something with your suggestions. Thank you both very much!

EDIT:

If anyone wants to build something similar: Here is my current config-fieldname.js in /site/modules/InputfieldCKEditor/
You can also turn off autoparagraphs so you can format the text in your template more easily. I also added a change for the underline icon since the default CKEditor behavior using <u> as underline element isn't semantic html how it will probably be used in this case.

CKEDITOR.editorConfig = function( config ) {

    // don't create <p>-tags
    config.autoParagraph = false;
    
    // underline icon adds span.underline instead of <u>
    config.coreStyles_underline  = { element : 'span', attributes : {'class': 'underline'}};
  
    // blur Enter and Shift+Enter keys
    config.keystrokes =
        [
            [ 13 /* Enter */, 'blur'],
            [ CKEDITOR.SHIFT + 13 /* Shift + Enter */, 'blur' ]
        ];
};

 

Edited February 21, 2018 by masslevel
added working example config