如何在 ckeditor5 中更改 entermode br 而不是 p？

Question

在 cdn 的 ckeditor5 中包含 ckeditor.js 我想更改 entermode

<br>

而不是

<p></p>

？可能吗？

Answer 1

如果您想在CKeditor 5中使用

<BR>

作为更改行代码，那么只需使用“Shift+Enter”即可实现。

这里是代码，如果你还想制作

<P>

显示喜欢

<BR>

一个人的：

p {
   margin: 0;
}

说真的，我遇到了和你一样的问题......然后我找到了 Shift+Enter.

Answer 2

您可以处理

enter

事件并使其触发

shiftEnter

代替。

    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

Answer 3

我在 PHP 中所做的如下：

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

我用

<br>

替换了结束标签，用空格替换了开始标签。 它很脏，但对我有用。可能使用 javascript 你可以做类似的事情。

对于编辑边距样式，我使用了这个：

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

因为我使用 CDN，这会覆盖该类。

这个问题已有 2 年历史，但希望这对将来的某个人有所帮助。

Answer 4

对于任何使用 Vue 希望实现这一目标的人来说，将 Ramast 的解决方案作为插件添加到 editorConfig 对我来说很有效（按照此处的说明进行操作：https://github.com/ckeditor/ckeditor5-vue/issues/58）

Answer 5

我的要求和你的相反

本人使用

@ckeditor/ckeditor5-vue

和自定义编辑器，供参考

自定义编辑器：

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模板：

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

vue 设置脚本：

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