Ckeditor5: Implement configurable editor's placeholder

[Reinmar]

We could support:

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

We should also:

• [x] Find a decent name for the utility https://github.com/ckeditor/ckeditor5-engine/issues/899
• [x] Address the a11y contrast issue https://github.com/ckeditor/ckeditor5-theme-lark/issues/213
• [x] 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: https://github.com/mozilla/notes/issues/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.

[Reinmar]

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.

We can actually use the placeholder attribute of the element replaced by CKEditor to read the value and setting it automatically in the editor. In the same matter we read the content of that element and load it into the editor and we set the content back on form#submit or editor#destroy. It's a bit like the <textarea> which the editor replaced was a custom <ckeditor> element :).

BTW, we can see that this is becoming more and more popular ticket so I added it to the current iteration because we may have a bit of time for it.

[kirk-quinbar]

That would be awesome if CKEditor could support the html5 placeholder attribute by default just like textbox and textarea. seems like something that should be standard in this type of control. :)

[robclancy]

This should have been a default feature? Pretty standard...

[mrinaljain]

Is there any temporary solution available to get a placeholder in CKEditor 5 ?

[michaeldjeffrey]

@mrinaljain I didn't need a placeholder with anything like headings, so I'm using this until an official one comes out.
It does rely on Emptyness though.
https://gist.github.com/michaeldjeffrey/46b7556b901a1abe593384ed68f9302d

[taufik-nurrohman]

Is there any temporary solution available to get a placeholder in CKEditor 5 ?

@mrinaljain Here’s my quick and dirty hack using plain JavaScript and CSS:

~ .js
ClassicEditor.create(document.querySelector('textarea')).then(function(editor) {
var source = editor.sourceElement, // <textarea>
editable = editor.ui.view.editable.editableElement; // <div contenteditable>
// Set placeholder attribute to <div>
editable.setAttribute('placeholder', source.placeholder);
function isEmpty() {
var v = this.textContent; // Get editor content without HTML tags
this.classListv ? 'remove' : 'add'; // Add or remove the ck-editor__empty class
}
isEmpty.call(editable); // Trigger check on initiation
editable.addEventListener("blur", isEmpty, false); // Trigger check on editable blur event
});
~

CSS to show the placeholder attribute in editable element:

~ .css
.ck.ck-editor__editable.ck-editor__empty:not(:focus):not(:focus-within)::before {
content: attr(placeholder);
display: block;
opacity: .5;
pointer-events: none;
}
~

[oleq]

I tried to use the attachPlaceholder helper that we use for image caption placeholders like this:

attachPlaceholder( editor.editing.view, editor.editing.view.document.getRoot(), 'foo' );

but it fails, ditching all attributes except data-placeholder of the editable

There are no errors, the editor runs but for obsious reasons (no contenteditable="true") it's useless.

I figured that because in a view post–fixer we set the data-placeholder attribute on a root element (normally it would be some child), when it is being (re–)rendered by the engine, all the DOM attributes (class, contenteditable, etc.) set by the EditableUIView are forgotten.

We have an issue for that and I'm afraid we must address it before we can properly attach placeholders to the root view elements.

cc @pjasiun @scofalik

[alexeckermann]

Is there any temporary solution available to get a placeholder in CKEditor 5 ?

@mrinaljain Here’s my quick and dirty hack using plain JavaScript and CSS:

If you want to use something in the mean time that is less of a 'hack' then check out ckeditor5-emptyness (see README for example).

I'm maintaining it whilst the offical implementation is underway.

cc @tovic @mrinaljain

[oleq]

We should respond to https://stackoverflow.com/questions/48052905/how-to-add-a-placeholder-in-ckeditor-5 once the official implementation is ready.

[sauravraj95]

+1

[Ghustavh97]

+1

[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?