You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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';
}
};
馃摑 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.
馃搩 Other details
If you'd like to see this improvement implemented, add a 馃憤 reaction to this post.
The text was updated successfully, but these errors were encountered: