3 
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）或如何使用此方法的简单示例。

4

3 回答 3

3

在CKEditor-5你可以添加placeholder喜欢

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

查看文档

于 2019-12-03T12:07:26.237 回答
2

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

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

空图像标题中可编辑占位符的屏幕截图

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

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

于 2018-01-03T15:55:32.197 回答
0

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

只需使用此插件构建您的编辑器，您就可以访问您的编辑器实例上的 isEmpty observable 属性（关心 Observable）。另外，当 is 为空时，插件将在编辑器元素上添加一个 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;
 }
于 2018-09-20T08:06:30.293 回答