Customize imageupload plugin

[clairefields15]

📝 Provide a description of the improvement

I built my editor for react using the online builder. In my react app, I need to disable and hide the upload image from file in certain circumstances because we don't have the backend image storage to handle it. But I still want to support upload from url. It seems that because the image and media upload options are so intertwined with each other, I can only have both if I use the online builder. I found this article and attempted my own customization, which gets me close (see below), but is very hacky and less than ideal (you have to click on the image button twice to see the modified dropdown in this code). There should be a way to have both image upload from file and image upload from url plugins included in the build and use them separately or together. Or a better way to access the the onClick event of any toolbar item and add a custom callback that doesn't rely on fragile class selectors.

type RichTextEditorProps = {
	value: string;
	onChange?: (event: string | React.ChangeEvent<HTMLInputElement>) => void;
	onAutoSave?: (currValue: string) => void;
	markupId?: number;
	sku?: string;
	children?: ({ characters }: { characters: number }) => React.ReactNode;
};

export default function RichTextEditor({
	value,
	onChange,
	onAutoSave,
	markupId,
	sku,
	children,
}: RichTextEditorProps) {
	return (
		<>
			<CKEditor
				editor={Editor}
				config={getEditorConfiguration(
					isSimpleToolbar,
					translate,
					onAutoSave,
					maxCharacterCount,
					markupId,
					sku,
				)}
				onReady={(editor) => {
					if (!markupId) {
						hideImageUpload();
					}
				}}
				data={value}
				onFocus={hideLogo}
				onChange={(event, editor) => {
					const data = editor.getData();
					if (typeof onChange === 'function') {
						onChange(data);
					}
				}}
			/>

			{children && children({ characters })}
		</>
	);
}
const hideImageUpload = () => {
	const imageBtn = document.querySelector('.ck-file-dialog-button');
	const dropdownBtn = document.querySelector('button.ck-splitbutton__arrow');
	if (!imageBtn || !dropdownBtn) return;

	const imageIcon = imageBtn.querySelector('svg.ck-icon');
	const downAngleIcon = dropdownBtn.querySelector('svg.ck-icon');
	if (!imageIcon || !downAngleIcon) return;

	(imageIcon as HTMLElement).style.width = 'var(--ck-icon-size)';
	(imageBtn as HTMLElement).style.display = 'none';
	downAngleIcon.remove();
	dropdownBtn.prepend(imageIcon);

	dropdownBtn.addEventListener('click', removeDropdownImageUploadOption, {
		once: true,
	});
};

const removeDropdownImageUploadOption = () => {
	const uploadMenuOption = document.querySelector(
		'[data-cke-tooltip-text="Upload from computer"]',
	);
	if (!uploadMenuOption) return;

	uploadMenuOption.parentNode?.removeChild(uploadMenuOption);

	const insertImageViaUrlButton = document.querySelector(
		'.ck-button_with-text',
	);
	if (!insertImageViaUrlButton) return;

	// Hide the "Insert image via URL" dropdown button
	(insertImageViaUrlButton as HTMLElement).style.display = 'none';

	// Display the children of "Insert image via URL" directly
	const childrenContainer = insertImageViaUrlButton.nextElementSibling;
	if (childrenContainer) {
		(childrenContainer as HTMLElement).style.display = 'block';
	}
};

📃 Other details

• Browser: any
• OS: windows
• CKEditor version: 5 react
• Installed CKEditor plugins:

class Editor extends ClassicEditor {
   public static override builtinPlugins = [
   	Autoformat,
   	Autosave,
   	Bold,
   	Essentials,
   	FontBackgroundColor,
   	FontColor,
   	FontSize,
   	Image,
   	ImageCaption,
   	ImageInsert,
   	ImageResize,
   	ImageStyle,
   	ImageToolbar,
   	ImageUpload,
   	Italic,
   	Link,
   	List,
   	MediaEmbed,
   	MediaEmbedToolbar,
   	Paragraph,
   	PasteFromOffice,
   	RemoveFormat,
   	SelectAll,
   	SimpleUploadAdapter,
   	Strikethrough,
   	Underline,
   	Undo,
   	WordCount
   ];

   public static override defaultConfig: EditorConfig = {
   	toolbar: {
   		items: [
   			'undo',
   			'redo',
   			'|',
   			'fontSize',
   			'fontColor',
   			'fontBackgroundColor',
   			'|',
   			'bold',
   			'italic',
   			'underline',
   			'strikethrough',
   			'removeFormat',
   			'|',
   			'bulletedList',
   			'numberedList',
   			'|',
   			'link',
   			'imageInsert',
   			'mediaEmbed'
   		]
   	},
   	language: 'en',
   	image: {
   		toolbar: [
   			'imageTextAlternative',
   			'toggleImageCaption',
   			'imageStyle:inline',
   			'imageStyle:block',
   			'imageStyle:side'
   		]
   	}
   };
}

export default Editor;

---

If you'd like to see this improvement implemented, add a 👍 reaction to this post.