Jump to content

CKEditor: Restrict to a single input line/row


masslevel
 Share

Recommended Posts

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.

Link to comment
Share on other sites

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 by dragan
added another link
  • Like 1
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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;

 

  • Like 1
Link to comment
Share on other sites

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' ]
        ];
};

 

  • Like 1
Link to comment
Share on other sites

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 by masslevel
added working example config
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Similar Content

    • By nabo
      Hello
      it would be nice if it could be possible to force a unique (or relative) imagefield for CKEditor.
      Example
      Using a repeater matrix (or repeater) with CKEditor field, the primary sources for images are imagefields in the page-repeater fieldset. Obviously I can change the page source, but I need to start from the root and this is not comfortable. In this specific situation the better solution is to have an imagefield in the parent page and force CKEditor to automatically go there... or if you want to have a "media library" go there first.
      Don't know which could be the best "setting system" but in my opinion this is an annoying problem.
    • By fruid
      inserting links i.e. <a>-elements, and only links, inside a CKEditor-summary field outputs the link-text and a weird " /> above the content-div (I'm using markup regions).
      I have no idea where this is coming from, all the other tags work perfectly, and the CKEditor-markup is fine too when adding links. It puts the <a>-element inside a <p> element but should be alright?
      Any hints?
    • By fruid
      I doubt nobody has seen this issue before…
      when I have an <h2> or <h3> or the likes in a CKEditor-body-field and I delete that header, the h-tag is applied to whatever comes next in line. I'm obviously talking about the WYSIWYG-view. Similar bugs occur when applying an h-tag, that tag sometimes encloses the next line as well. Could be that this happens when the next line is in the same "block"-element and not technically a new line but separated with a <br> but not always…
      When will a new version of CKEditor for PW be released or what's a competitive alternative at this point?
    • By Jennifer Stock
      Hi. Sometimes when I select text in a textarea field outfitted with CK Editor, it fails to register as a "Block Style" and therefore the custom styles I have specified for block-level elements are not displayed in the Styles drop-down menu. If I open the page in an incognito window and select the same elements, the Block Style styles appear as expected in the Styles menu.
      Is this a caching issue of some kind? I've played with turning on and off the HTML "quality assurance" options as well as putting my custom styles directly within the CKEditor folder in the /wire directory. Once the field stops registering the selection of block-level elements, it also seems to have simultaneously stripped the custom styles that had been successfully applied to these block-level elements previously.
      Not sure what to do next.
×
×
  • Create New...