CODEWITHSUNDEEP
javascriptckeditor5
蔡宏興
蔡宏興

Reputation: 21

How can I change entermode br instead of p in ckeditor5?

In ckeditor5 by cdn to include ckeditor.js I would like to change entermode that <br> instead of <p></p>? Is it possible?

Upvotes: 2

Views: 5233

Answers (4)

chun kuen ho
chun kuen ho

Reputation: 1

My requirement is the opposite of yours.

I'm using @ckeditor/ckeditor5-vue and a custom editor, provided for reference.

Custom editor:

import ClassicEditorBase from '@ckeditor/ckeditor5-editor-classic/src/classiceditor';

import Essentials from '@ckeditor/ckeditor5-essentials/src/essentials';
import Enter from '@ckeditor/ckeditor5-enter/src/enter';
import ShiftEnter from '@ckeditor/ckeditor5-enter/src/shiftenter';
import Paragraph from '@ckeditor/ckeditor5-paragraph/src/paragraph';
import Custom1 from './plugin/custom1';
import Custom2 from './plugin/custom2';

export default class ClassicEditor extends ClassicEditorBase {}

ClassicEditor.builtinPlugins = [
  Essentials,
  Paragraph,
  Enter,
  ShiftEnter,
  Custom1,
  Custom2,
];

ClassicEditor.defaultConfig = {
  toolbar: {
    items: [],
  },
  language: 'en',
};

vue template:

<ckeditor
  v-model="content"
  :editor="editorBuild"
  @ready="editorOnReady"
  @input="handleEditorInput"
  @blur="handleEditorBlur"
/>

Vue setup script:

import ClassicEditor from '@/ckeditor';
    
const editorBuild = ClassicEditor;
const editor = ref();
    
function editorOnReady(editorObj) {
  editorObj.keystrokes.set('Shift+Enter', 'enter');
  editor.value = editorObj;
}

Upvotes: 0

Ramast
Ramast

Reputation: 7719

You could handle the enter event and make it trigger shiftEnter instead.


    editor.editing.view.document.on(
        'enter',
        ( evt, data ) => {
            editor.execute('shiftEnter');
            //Cancel existing event
            data.preventDefault();
            evt.stop();
     }, {priority: 'high' });

source: https://github.com/ckeditor/ckeditor5/issues/1141#issuecomment-403403526

Upvotes: 1

Mark_
Mark_

Reputation: 135

What I did in PHP is the following:

$replaceClosingTag = str_replace('</p>', '<br>', $_POST['message']);
$emailMessageText = str_replace('<p>', '', $replaceClosingTag);

I replaced the closing tag with a <br> and the opening tag with an empty space. It is dirty but it worked for me. Probally with javascript you can do something similar.

And for the editor margin style I used this:

.ck.ck-editor__editable_inline p {
    margin-bottom: 0;
}

Because I use a CDN and this overrides that class.

The question is 2 years old but hopefully this helps for someone in the future.

Upvotes: 0

Jimmy.Chu
Jimmy.Chu

Reputation: 27

If you wnat to use <BR> as change line code in CKeditor 5, then just use "Shift+Enter" can make it happen.

Here is the code if you still want to make <P> display likes <BR> one's:

p {
   margin: 0;
}

Seriously, I got same problem like your's......then I found Shift+Enter.

Upvotes: 0

Related Questions