github/directus
1
0
Fork 0
mirror of https://github.com/directus/directus.git synced 2026-01-27 07:08:17 -05:00
Code Issues Packages Projects Releases Wiki Activity

save wysiwyg image size in url params instead of html tags (#10054)

Browse Source 
Co-authored-by: rijkvanzanten <rijkvanzanten@me.com>
This commit is contained in:
Malte Jürgens
2021-12-01 20:30:39 +01:00
committed by GitHub
parent 2be3ae715b
commit 1be8e1cd8d
3 changed files with 16 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
app/src/interfaces/input-rich-text-html/input-rich-text-html.vue
View File

@@ -278,7 +278,7 @@ export default defineComponent({
);
return value.replace(regex, (_, pre, matchedUrl, post) => {
const matched = new URL(matchedUrl);
const matched = new URL(matchedUrl.replace(/&amp;/g, '&'));
const params = new URLSearchParams(matched.search);
if (!token) {
@@ -341,6 +341,7 @@ export default defineComponent({
statusbar: false,
menubar: false,
convert_urls: false,
image_dimensions: false,
extended_valid_elements: 'audio[loop],source',
toolbar: toolbarString,
style_formats: styleFormats,

14
app/src/interfaces/input-rich-text-html/useImage.ts
View File

@@ -1,5 +1,6 @@
import { addTokenToURL } from '@/api';
import { i18n } from '@/lang';
import { addQueryToPath } from '@/utils/add-query-to-path';
import { getPublicURL } from '@/utils/get-root-path';
import { Ref, ref } from 'vue';
@@ -44,7 +45,10 @@ export default function useImage(
if (buttonApi.isActive()) {
const node = editor.value.selection.getNode() as HTMLImageElement;
const imageUrl = node.getAttribute('src');
const imageUrlParams = imageUrl ? new URL(imageUrl).searchParams : undefined;
const alt = node.getAttribute('alt');
const width = Number(imageUrlParams?.get('width') || undefined) || undefined;
const height = Number(imageUrlParams?.get('height') || undefined) || undefined;
if (imageUrl === null || alt === null) {
return;
@@ -53,8 +57,8 @@ export default function useImage(
imageSelection.value = {
imageUrl,
alt,
width: Number(node.getAttribute('width')) || undefined,
height: Number(node.getAttribute('height')) || undefined,
width,
height,
previewUrl: imageUrl,
};
} else {
@@ -96,7 +100,11 @@ export default function useImage(
function saveImage() {
const img = imageSelection.value;
if (img === null) return;
const imageHtml = `<img src="${img.imageUrl}" alt="${img.alt}" width="${img.width}" height="${img.height}" />`;
const resizedImageUrl = addQueryToPath(img.imageUrl, {
...(img.width ? { width: img.width.toString() } : {}),
...(img.height ? { height: img.height.toString() } : {}),
});
const imageHtml = `<img src="${resizedImageUrl}" alt="${img.alt}" />`;
isEditorDirty.value = true;
editor.value.selection.setContent(imageHtml);
closeImageDrawer();

6
app/src/utils/add-query-to-path.ts
View File

@@ -1,9 +1,9 @@
export function addQueryToPath(path: string, query: Record<string, string>): string {
const queryParams = [];
const queryParams = new URLSearchParams(path.split('?')[1] || '');
for (const [key, value] of Object.entries(query)) {
queryParams.push(`${key}=${value}`);
queryParams.set(key, value);
}
return path.includes('?') ? `${path}&${queryParams.join('&')}` : `${path}?${queryParams.join('&')}`;
return path.split('?')[0] + '?' + queryParams;
}