CKEditor 5 Base64 image upload adapter in Angular 11

[@DevBugFix]

if you want to learn how to integrate this video source code(CK Editor 5) in Angular project watch the following video
ua-cam.com/video/9GYIfX3YEgU/v-deo.html

[@abhaykumar5857]

Thank you so much . I was searching for 2 days for this kind of video

[@sumitkush7083]

Nice video 👍👍

[@ntnull82]

@DevBugFix I can't resize the image like you ?

[@DevBugFix]

hello you did not add below configuration in config Object
code URL: github.com/DevBugFix/CKEditor5_IntegratoionInAngular/blob/main/src/app/my-ck-editor/my-ck-editor.component.ts
image: {
// Configure the available styles.
styles: [
'alignLeft', 'alignCenter', 'alignRight'
],
// Configure the available image resize options.
resizeOptions: [
{
name: 'resizeImage:original',
label: 'Original',
value: null
},
{
name: 'resizeImage:50',
label: '25%',
value: '25'
},
{
name: 'resizeImage:50',
label: '50%',
value: '50'
},
{
name: 'resizeImage:75',
label: '75%',
value: '75'
}
],
// You need to configure the image toolbar, too, so it shows the new style
// buttons as well as the resize buttons.
toolbar: [
'imageStyle:alignLeft', 'imageStyle:alignCenter', 'imageStyle:alignRight',
'|',
'ImageResize',
'|',
'imageTextAlternative'
]
},

[@ujjwalanand6687]

SHOULD GO WITH NORMAL IMAGE UPLOADER OR BASE 64 FOR A NORMAL BLOG APP

[@DevBugFix]

base64 increases the blog size because the image will save in the database, which will also impact loading time of your blog,, I will recommend image uploader save the image externally.

[@HarshRana-lt8yj]

how did you send the image on your own server can you tell me how did u didt it?

[@DevBugFix]

Check my video on ck editor image upload

[@HarshRana-lt8yj]

i want that as i copy past word file then the images in that should hit on my server is its possible?
@@DevBugFix

[@DevBugFix]

You can try base64 uploader. Or do some research hopefully you will find answer

[@shaktikush6613]

Nice video 👍

[@NuevaHD]

is there a way to add image upload for ckeditor 4 or 3 in angular 7 !?

[@DevBugFix]

Ckeditor 5 has uploading feature that will upload image on given API endPoint
ua-cam.com/video/mny6Oj7_3j4/v-deo.html

[@greencoder3795]

Hi , can anyone tell me how to integrate underline and font size i ckeditor 5.

[@DevBugFix]

import underline plugin

[@naveenfernando1852]

Thanks for the great tutorial,
How can i save the uploaded image into a directory and use the directory path as the url
.

[@DevBugFix]

Hi watch this tutorial
ua-cam.com/video/mny6Oj7_3j4/v-deo.html

[@greencoder3795]

Hi could u pls provide detail information on uploading image with base 64 step by step

[@DevBugFix]

See the video in playlist

[@maryambibi9687]

hi please tell how you open this ckeditor.js file in visual code my is mixup

[@DevBugFix]

i did not get your point

[@DevBugFix]

watch this video too and watch this series might be it will help you
ua-cam.com/video/9GYIfX3YEgU/v-deo.html

[@sumitkush7083]

👍👍👍

[@jdnielss]

can you show example how to htmlEmbed?

[@DevBugFix]

hello
fellow this step
add 'htmlembed ' & configuration like this
{
toolbar: [ 'htmlEmbed' ],
htmlEmbed: {
showPreviews: true,
sanitizeHtml: (inputHtml) => {
const outputHtml = this.domSanitizer.bypassSecurityTrustHtml(inputHtml);
return {
html: outputHtml,
hasChanged: true
};
}
}
}
add domSenitizer in constructor
constructor(private domSanitizer: DomSanitizer){}
Trusted html is required for rendering
this.domSanitizer.bypassSecurityTrustHtml(html)

[@jdnielss]

@@DevBugFix its domSanitizer Package from npm?

[@DevBugFix]

its Angular service

[@jdnielss]

@@DevBugFix hmm thank you very much :)

[@maryambibi9687]

where is ckeditor.js file

[@narenk8077]

I am getting duplicate issues

[@greencoder3795]

Hi

[@DevBugFix]

Hello

[@venkatpalllantla1302]

Can you provide the GitHub url of this working project

[@DevBugFix]

Source Code
github.com/DevBugFix/CKEditor5_IntegratoionInAngular

[@sumitkush7083]

Nice video 👍👍

[@sumitkush7083]

👍👍👍👍