Дима, привет!
А ты не сможешь использовать Uploader так, как ты здесь вариант приводишь. Uploader - это Реакт-компонент, а не просто отдельный набор готовых функций. То есть чтобы он работал, его и надо вставлять как Реакт-компонент. Ты же вот здесь его вставляешь как надо.
<Uploader name="post" onUpload={onUpload} directory="images/" />
А там у тебя да, сторонний компонент, который требует навешивания функции-обработчика на загрузку изображений. К сожалению, у меня эта функция не вынесена, чтобы ее можно было использовать вот так в отдельности. Для этого надо Uploader переписывать в функциональный компонент и пилить отдельный хук. Я себе задачу поставлю сейчас, но не известно когда ее сделаю (ближайшие 2 недели точно буду занят). Но если хочешь, можешь сам переписать. Исходники здесь: https://github.com/prisma-cms/uploader
Заодно разберешься что и как работает.
Дорогу осилит идущий. И спасибо: избавил от лишних поисков)
Дима, не хочу тебя расстраивать, но под React нормального WYSIWYG с поддержкой SSR просто нет :)
Вот этот вот костыль с import dynamic from 'next/dynamic' приводит к тому, что на сервере этот компонент просто не отрисовывается. То есть он срабатывает только на стороне браузера. То есть если отключить JS, то у тебя будет пустой контент.
Такие дела.
Встала задача добавить к проект создание и редактирование контентной части наиболее простым, но прямо максимально "хорошим" способом. Коряво как-то вышло. Вот так лучше: чтобы без заморочек и классно получилось. Полез искать и таки есть: https://editorjs.io/
"И сразу же вот эту штучку. Если скажете, что это плохо - Вы мой враг на всю жизнь!" (с) Штука показалась мне классной и, на первый взгляд, "безгемморойной".
1. Сначала выяснилось, что нужен кастыль под реакт, но всё уже придумали до нас: https://www.npmjs.com/package/react-editor-js
2. Потом стало понятно, что с next.js и конкретно с SSR штука не дружит. Решение нашлось у самого next.js - https://nextjs.org/docs/advanced-features/dynamic-import#with-no-ssr
Идея в том, что создаётся новый компонент и уже его динамическим импортом закидываем на нужную страницу:
import { createReactEditorJS } from 'react-editor-js'
import SimpleImage from '@editorjs/simple-image'
import CheckList from '@editorjs/checklist'
import Image from '@editorjs/image'
const ReactEditorJS = createReactEditorJS()
export const CustomEditor = () => {
return (
<ReactEditorJS
tools={{ simpleImage: SimpleImage, checklist: CheckList, image: Image }}
/>
)
}
export default CustomEditor
И во чтобы дойти до этого мне потребовалось потратить кучу времени. Объяснюсь.
Вообще говоря для эксперимента я использовал базовый пакет + дополнительно @editorjs/simple-image
И вот чтобы я не делал, базовый параграф добавлялся, а вот картинка так и появлялась в редакторе. Вот искал причину, пока не догадался попробовать добавить любой другой элемент: и он встал нормально. Не работает сам плагин @editorjs/simple-image похоже.
На нужной странице импортируем компонент так:
import dynamic from 'next/dynamic'
const CustomEditor = dynamic(() => import('src/components/EditorJS'), {
ssr: false,
})
Дальше по плану загрузка картинок и установка редактора по месту дислакации.
Не за что! Рад, что вопрос решился.
Спасибо большое за ответ! Действительно библиотека просто не подгружалась, но стоило включить touch vpn как все успешно запустилось. Видимо стоят ограничения у провайдера или ркн мне тут что-то блокирует
Есть вероятность, что у вас просто не подгрузился jQuery (в тестах он отдельно загружатеся). Откройте вкладку загрузок в dev-tools и убедитесь, что библиотека действительно подгружена. И в консоли укажите область выполнения - frame tests-frame и убедитесь, что библиотека присутствует. Да и просто можете попробовать открыть ссылку https://code.jquery.com/jquery-3.5.1.min.js, грузится ли?
Без этого данные тесты действительно не будут выполняться.
Не понимаю почему у меня по-умолчанию выводится в результаты "$ is not defined". Тоже самое выводится когда пытаюсь запустить тест и проверить решение, уведомление по прохождении не выводится
(UPD) Спасибо большое за ответ! Действительно библиотека просто не подгружалась, но стоило включить touch vpn как все успешно запустилось. Видимо стоят ограничения у провайдера или ркн мне тут что-то блокирует
Наткнулся тут еще на один вариант решения:)
const title = new URLSearchParams(router.query).get('title');
Метод .get() возвращает string | null