Implement configurable editor's placeholder

[Reinmar]

We could support:

• config.placeholder = 'Type here...',
• and even reading the placeholder from the editor element if the editor was initialised on a textarea.

We should also:

• Find a decent name for the utility https://github.com/ckeditor/ckeditor5-engine/issues/899
• Address the a11y contrast issue https://github.com/ckeditor/ckeditor5-theme-lark/issues/213
• Update documentation with the information about placeholders
  • A placeholder feature guide with a couple of editors?

Of course, it will depend on editor creator how to set the placeholder (e.g. some creators may have multiple editables and then they will have to support setting multiple placeholders in config.placeholder).

[vladikoff]

Ref: mozilla/notes#405

[Reinmar]

BTW, I forgot to mention that @alexeckermann wrote a simple plugin which adds a placeholder to the editor: https://github.com/alexeckermann/ckeditor5-emptyness ❤️

[vladikoff]

@Reinmar Awesome! We are gonna try using that!

[kirk-quinbar]

Is this still a TODO item? status?

[alexeckermann]

Look as though from the tags above that its been pushed to a future milestone but not any known milestone in the pipeline.

The emptyness plugin mentioned above is what I am using in production at the moment as a solution. It will also be greatly improved soon pending some pull requests in CK5 to fix some integration issues. If you need any help with that just let me know.

[kirk-quinbar]

alexeckermann,

I took a look at the overview of your plugin and did have a question. Your overview talks about making a custom build of ckeditor to pull that plugin in, but I was wondering if there is a way to just do that at runtime. There is a plugin for CKEditor v4 that is commonly used to provide this same type of html5 placeholder. It was written by a guy named alfonsoML. His plugin you could just load at runtime when the editor instance was created similar to this:

https://github.com/AlfonsoML/confighelper

//ckeditor plugin placeholder text plugin, pulled from placerholder="" on #ReplyTextArea CKEDITOR.plugins.addExternal( 'confighelper', '/ckeditor/confighelper/'); CKEDITOR.config.extraPlugins = 'confighelper';

Not sure if that was a v4 feature that isnt in v5 as i didnt dig that far yet, but I was hoping that maybe your plugin could just be loaded at the time the instance is created to and how I could go about doing that?

The other thing that was nice about his was that you could just set the standard html5 placeholder property on the textarea and it would read that one instead of having its own property. not a big deal but kept the coding standard for how placeholders are typically added to textboxes and textareas.

[Reinmar]

Not sure if that was a v4 feature that isnt in v5 as i didnt dig that far yet, but I was hoping that maybe your plugin could just be loaded at the time the instance is created to and how I could go about doing that?

It depends on a plugin. Technically speaking, some can be loaded on runtime. But it's safer to assume that it cannot be loaded on runtime. We wrote more about it in https://docs.ckeditor.com/ckeditor5/latest/builds/guides/integration/installing-plugins.html

[alexeckermann]

@kirk-quinbar The emptiness plugin will need to be loaded with the editor during its initialisation, it can't be loaded thereafter because of view extension restrictions after rendering. Moreover, because of duplicated dependencies it would get out of hand really quickly.

I would highly recommend setting up a custom build, even if its to add one or two plugins to a base editor. If thats not possible or unsuitable let me know (email in my profile) and I can help put something together for you.

Since the editor uses contenteditable there is no possibility to have a native placeholder attribute supported. Additionally, it has to be added so that it doesn't interfere with the content structure in the editor.

[oleq]

@Mgsy Could you take a look at the t/479 constellation (in ckeditor5)?

There are some new manual tests (called "placeholder" in ckeditor5-editor-*) but also some serious changes were made to the architecture and it would be great if we knew that the editor is still rock–solid in other, normal, non–placeholder use cases.

[Mgsy]

@Mgsy Could you take a look at the t/479 constellation (in ckeditor5)?

I was playing with those changes and found a problem in Edge. The editor doesn't initialize and throws the error (works fine on the master):

 TypeError: Object doesn't support property or method 'Symbol.iterator'
   at View.prototype.attachDomRoot (http://192.168.1.48:8125/ckeditor5-core/tests/manual/article.js:77674:3)
   at ClassicEditorUI.prototype.init (http://192.168.1.48:8125/ckeditor5-core/tests/manual/article.js:38984:3)
   at Anonymous function (http://192.168.1.48:8125/ckeditor5-core/tests/manual/article.js:38844:19)

[oleq]

It looks like Edge does not offer DOM element attributes as iterable. Curious... it passed CI. Don't we run tests on Edge in CI?