Question

import BalloonEditor from '@ckeditor/ckeditor5-editor-balloon/src/ballooneditor';

import Essentials from '@ckeditor/ckeditor5-essentials/src/essentials';
import Paragraph from '@ckeditor/ckeditor5-paragraph/src/paragraph';
import Bold from '@ckeditor/ckeditor5-basic-styles/src/bold';
import Italic from '@ckeditor/ckeditor5-basic-styles/src/italic';

BalloonEditor
                .create( elem, {
                    plugins: [ Markdown, Essentials, Paragraph, Bold, Italic ],
                    toolbar: [ 'bold' ]
                })
                .then((editor) => {
                    ....
                })
                .catch( error => {
                    console.error( error );
                } );

我尝试使用https://ckeditor.com/docs/ckeditor5/latest/api/module_engine_view_placeholder.html#static-function-attachPlaceholder

中的 attachPlaceholder

import { attachPlaceholder } from "@ckeditor/ckeditor5-engine/src/view/placeholder";

您能否告诉我如何使用此方法（attachPlaceholder）的简单示例或如何操作。

Answer 1

我假设您想要将占位符添加到整个编辑器中，这样当它为空时，您可以显示类似“在此处输入...”的内容。

不幸的是，attachPlaceholder()函数尚不支持为编辑器的主要可编辑设置占位符。目前，它用于图像标题等情况：

有一张实现可配置编辑器占位符的票证：https://github.com/ckeditor/ckeditor5/issues/479。

还有一个第三方插件，它以更简单的方式添加占位符：https://github.com/alexeckermann/ckeditor5-emptyness。

Answer 2

插件URL ：https://github.com/alexeckermann/ckeditor5-emptyness

只需使用此插件构建编辑器，您就可以在编辑器实例上访问isEmpty observable属性（注意Observable）。另外，当插件为空时，该插件将在编辑器元素上添加ck-editor__is-empty类名。

原始用例用于应用程序观察属性并知道编辑器何时进入或退出空状态。从那里，应用程序将属性应用于编辑器HTML元素，以便可以应用基于CSS的占位符-使用CSS的:: before规则来注入幻像内容，而不会干扰CKEditor的实际内容。

import BalloonEditorBase from '@ckeditor/ckeditor5-editor- 
balloon/src/ballooneditor';
import Emptyness from 'ckeditor5-emptyness/src/emptyness';
// .. all your other imports here

 export default class MyEditor extends BalloonEditorBase { }

MyEditor.build = {
// ... all your other configs here

plugins: [
    // ... all your other plugins here
    Emptyness
 ]

};

CSS

.ck-editor__is-empty .ck-content.ck-editor__editable::before,
.ck-editor__is-empty.ck-content.ck-editor__editable::before {
content: 'The editor is empty';
position: absolute;
display: block;

margin: var(--ck-spacing-large) 0;

color: #aaa;
 }

Answer 3

在CKEditor-5中，您可以像添加placeholder

  <ckeditor [config]="{ placeholder:'Placeholder Text', toolbar: [ 'bold', 'italic', 'bulletedList' ] }">
  </ckeditor>

See docs

如何在CKEditor 5中添加占位符？

3 个答案: