Ckeditor5: Create .sketch file with CKEditor 5 for designers use.

[jswiderski]

🐞 Is this a bug report or feature request? (choose one)

Task

Explanation

Below is the email we got from a designer who wanted to have CKEditor 4 .sketch file so that he doesn't have to re-create the editor sketch every time he wants CKEditor in his designs.

I work as a designer and I love ckeditor. It would be awesome if you have Sketch app files of your editor that me and other designers could use in our designs. I think this would help you adopt more users since designers can use the design and when going to build it they can implement the exact same editor.

Sketch App (https://www.sketchapp.com) is one of the most popular tools for UI/UX designers. The program is similar to Adobe Photoshop. It would be awesome if there was a .sketch file template of the editor. Here is an example of files that I could use in my designs to save time https://www.sketchappsources.com/search_editor.html. Since ckeditor is such a great looking editor, if there were a premade design file that I could drag and drop into my design than it would make my design take less time and show the developer exactly how it should be implemented. It's just a thought I had since I hate having to create these type of editors in a design file.

[jswiderski]

Adding @oleq & @dkonopka to the ticket.

[pxsmith]

Hi @jswiderski I made the CKEditor 5 → Classic in Sketch. It’s not fancy, but it’s better than nothing.

CKEditor 5.sketch.zip

https://sketch.cloud/s/Yvd8E

[pxsmith]

@Reinmar what are your thoughts? Would it be useful to add this file somewhere?

[Reinmar]

It's super cool! Thanks :) I'm not a designer myself but I understand how this can be useful.

I think you can add this to https://www.sketchappsources.com/. And perhaps we could get involved in this somehow too to collaborate on improving this further. I've got to talk with @oleq and @dkonopka about this. We may not have the time now, but I'd like at least to keep this in the back of our heads.

PS. @jswiderski is on a leave now, so sorry for longer response time.

[dkonopka]

@pxsmith thanks for your work! However, you used raster graphics (png/jpg), but to be honest, it's much better to work on vector versions of icons / UI elements.

That's why you can find full UI of CKEditor 5 at this moment (we will be updating it with introducing new feature).

https://sketch.cloud/s/a8qrr

Also, we are waiting for adding this resource to the https://www.sketchappsources.com.

[pxsmith]

@dkonopka I think it just looks like raster on Sketch cloud, but they’ll all vector in the file (unless something went terribly wrong). 😄 I’m unable to see that link that you shared with me—says it’s private. But essentially you’re waiting for Sketch App Resources to approve it, and then it’ll be public?

[dkonopka]

@pxsmith Thaks for info! I've already changed share settings of this file, now everyone is able to download / add as a library to Sketch.

[Reinmar]

So, can we add this now to sketchappsources.com, @dkonopka? :)

[dkonopka]

@Reinmar exactly, I have submitted a request ~ estimated 7 days.

[dkonopka]

Already there! https://www.sketchappsources.com/free-source/4125-ckeditor-5-rich-text-editor-sketch-freebie-resource.html