CKEditor 5 - First Time User Experience

[nhuebnereagle]

I just started trying out CKEditor 5 and spent a good 4 hours trying to get what I needed (by the way I never got what I needed). You are welcome to close this after reading it, because it's not a bug report, but it's definitely an issue if I couldn't use CKEditor 5.

• I started with the CDN version. None of the plugins were available, I was stuck with Bold, Italic, and Block Quotes.

• The documentation shows examples, but without any code implementation displayed (such as, you see the editor, but not the code that generated it) - Checked source code, dug around for a bit, never found it.

• The documentation states you can list all of the available plugins and such by using a command. The command returns editor is not defined. I tried finding the command through documentation but didn't manage to bump into it again.

• When I create a CKEditor, I started like this: var Editor = ClassicEditor.create --- With the example options available. When I console.log(Editor) I get [[Promise]] type output. I am a bit behind on how to access these, it would be nice to have some notes on how to interact with a created Editor through Javascript to accomplish goals.

• There's no way to set Height and Width of the Editor without doing a CSS style .ck-editor__editable_inline { height: 300px !important; } I spent 3 hours trying to figure this out. I even found ui.height and ui.width for the options, but neither of them yielded results. When you first start up CKEditor 5 on a textarea you get a box that's not even big enough for 1 line of text. It's this way regardless of CSS styles you put on the textarea (including cols/rows/style/width/height).

• I searched for "CKEditor 5 Text Color" and the only thing I returned was a GitHub Issue from a new user asking how to create a "Color Picker" plugin. It sucks this isn't already built in.

I am switching back to CKEditor 4 for now, but I hope my above notes help.

Things I would recommend:

• Add code to the Examples (full code) - and make sure CDN supports it, that would be nice.

• Create a "Kitchen Sink" example showing everything CKEditor 5 can do.

[onurozkan]

I'm sure developers can give you better answers, but here is my two cents;

I started with the CDN version. None of the plugins were available, I was stuck with Bold, Italic, and Block Quotes.

There are currently 15 plugins available in CDN version.

(16) [undefined, "CKFinderUploadAdapter", "Autoformat", "Bold", "Italic", "BlockQuote", "EasyImage", "Heading", "Image", "ImageCaption", "ImageStyle", "ImageToolbar", "Link", "List", "Paragraph", "ImageUpload"]

The documentation states you can list all of the available plugins and such by using a command. The command returns editor is not defined. I tried finding the command through documentation but didn't manage to bump into it again.

Code in documentation worked very well for me.

var pluginList = ClassicEditor.build.plugins.map( plugin => plugin.pluginName );
console.log(pluginList)

When I create a CKEditor, I started like this: var Editor = ClassicEditor.create --- With the example options available. When I console.log(Editor) I get [[Promise]] type output. I am a bit behind on how to access these, it would be nice to have some notes on how to interact with a created Editor through Javascript to accomplish goals.

Builds are returning promises are you stated. If you want to use in window context, you should do something like this.

ClassicEditor
	.create( document.querySelector( '#editor' ) )
	.then( editor => {
		window.myEditor = editor
	})

Rest of your problems are normal. Its because of CKEditor5 is in alpha state. That means you should not use in production. Its only for test purposes (in my opinion) and giving developers chance to discover new architecture.

[AnnaTomanek]

Hi @nhuebnereagle,

First of all, thanks a lot for trying out CKEditor 5 and taking the time to provide that much feedback. It's much appreciated and we're sorry to hear that your start with CKEditor 5 did not go as expected.

@onurozkan's answer addresses most of the issues (thanks!), so let me just restate the following:

• CKEditor 5 is in its alpha state. So as we've been trying to explain, it's not production ready yet, it's totally new, its architecture was designed from scratch and is different than in CKEditor 4 and so on.
• The code, the documentation, the examples etc. are all public at this stage to make it easier for the developers to try it out and provide feedback (such as yours) which we take really seriously, and which helps us tremendously to improve the product. However, this is still the alpha stage and we have a lot of work that still needs to be done to make us, and the development community around the project, and the end users of the editor, satisfied.

Thanks again for reporting your issues, and we're really sorry that you struggled so much with our product :(

I'm leaving this issue open in the hope that other people who are facing similar "first time user" challenges will be kind enough to report them here. We wholeheartedly appreciate your feedback and will be doing our best to meet your needs.

Thank you for helping us create a better editor!

[Reinmar]

There's no way to set Height and Width of the Editor without doing a CSS style .ck-editor__editable_inline { height: 300px !important; } I spent 3 hours trying to figure this out.

You're right about those confusing width and height properties which we had somewhere in the API. They were leftovers and we removed them recently because they did nothing. We'll definitely need to add info about resizing. So far we only have it on SO (https://stackoverflow.com/questions/46559354/how-to-set-the-height-of-ckeditor-5-classic-editor).

Add code to the Examples (full code) - and make sure CDN supports it, that would be nice.

This is really tricky and that's why we don't have the example (code) there yet. But this is on our roadmap to have those code examples for at least part of those existing demos.

[TomS-]

Builds are returning promises are you stated. If you want to use in window context, you should do something like this.

ClassicEditor
	.create( document.querySelector( '#editor' ) )
	.then( editor => {
		window.myEditor = editor
	})

Rest of your problems are normal. Its because of CKEditor5 is in alpha state. That means you should not use in production. Its only for test purposes (in my opinion) and giving developers chance to discover new architecture.
— @onurozkan

I can't for the life of me get this working. It just returns window.myEditor.destory() is not a function. No matter what I try? If it helps I'm using BalloonEditor. According to this "https://docs.ckeditor.com/ckeditor5/latest/builds/guides/integration/basic-api.html#Destroying-the-editor" it should work?

[oleq]

Are you sure window.myEditor is defined in the scope? Check console.log( window.myEditor ) first.

[ronit29]

Is there any way to add extra plugins like table and fontsize editing to a cdn version of ckeditor5

[oleq]

@ronit29 If those plugins are unavailable in the CDN build, there's no simple way to add them. You have to create your own build and host it locally.

AFAIR the table feature is available in all our builds ATM, all you need to do is add the font size feature (unless you're using the document editor build).

---

Closing the issue due to inactivity, the problems mentioned here have either been addressed since 2017 or are no longer relevant.